Tic Tac Glow is an original browser game I developed for Lalo.games using Unity and C#. It takes the familiar rules of Tic-Tac-Toe and presents them as a colorful single-player experience against a computer-controlled opponent.
The player controls X, while the AI controls O. Players can choose between three difficulty levels: Easy, Smart and Unbeatable. Although the rules are simple, producing a complete and polished browser game required considerably more work than creating a nine-cell board.
I needed to build reliable turn management, prevent invalid moves, program different AI behaviors, detect every possible outcome and ensure the interface worked across different browser sizes. I also created the game’s visual elements, animations, music and sound effects through code before preparing everything for WebGL.
This article looks at how I developed Tic Tac Glow, the technical decisions behind its main systems and what the project taught me.
Tic Tac Glow is an original browser game I developed for Lalo.games. You can play Tic Tac Glow online and challenge its three AI difficulty levels directly from your browser.
Starting With a Familiar Game
I chose Tic-Tac-Toe because its rules are immediately understandable. Players do not need a long tutorial before making their first move:
- The player places X.
- The computer places O.
- The first side to complete a horizontal, vertical or diagonal line wins.
- If all nine cells become occupied without a winning line, the round ends in a draw.
However, familiarity also creates an important design challenge. A basic digital Tic-Tac-Toe board is easy to build, but it can quickly feel lifeless. I wanted Tic Tac Glow to feel like a complete casual game rather than a technical demonstration.
I used a bright visual palette built around coral, turquoise, lavender, cream, gold and navy. Rounded cards, animated symbols, floating decorations, a glowing winning line and celebratory effects give each move more personality.
The result stays faithful to the traditional game while offering a presentation designed specifically for modern browser players.
Building the Project in Unity
I developed Tic Tac Glow with Unity 6000.3.15f1, commonly known as Unity 6. The gameplay, interface, animations and audio systems were written in C#.
The project uses standard Unity features, including:
- Unity UI
- Canvas and CanvasScaler
- GridLayoutGroup
- Buttons and text elements
- Coroutines
- AudioSource and AudioClip
- Runtime texture generation
- Unity WebGL
The project contains one enabled gameplay scene. Much of the interface is generated when the game starts rather than being manually arranged as separate objects inside the scene.
The main menu, game board, difficulty selection, scoreboard, result screen and decorative elements are all created through the central game controller. This approach allowed me to keep the project organized while maintaining consistent styling across every interface element.
Representing the Board
The logical board is stored as an array containing nine positions. Each position can have one of three states:
- Empty
- Occupied by X
- Occupied by O
The interface also contains nine corresponding buttons. When the player selects a cell, the game identifies the correct board position and checks whether the move is valid.
A move is accepted only when:
- It is currently the player’s turn.
- The round is still active.
- The selected position is empty.
If any of these conditions is not met, the input is ignored.
Keeping the logical board separate from its visual representation was important. A button may look available, but the actual game state must remain the final authority. This prevents visual errors or rapid inputs from creating illegal moves.
After a valid selection, the board records X, the symbol appears inside the selected cell and a short animation plays.
Managing the Turn Sequence
The player always takes the first turn in the current version.
After the player places X, the game immediately checks whether the move created a winning line or filled the final available cell. If the round continues, the remaining cells are temporarily disabled and the status message changes to “AI IS THINKING…”
The AI waits for approximately 0.48 seconds before responding. The computer does not technically need this time to calculate its move, but the pause makes the transition feel more natural. Without it, the O symbol could appear almost instantly and make the sequence difficult to follow.
Disabling the cells during this delay is essential. Otherwise, a fast player could select multiple cells before the AI completed its turn.
Once the computer places O, the game checks the result again. If neither side has won and empty positions remain, control returns to the player and the status changes back to “YOUR TURN.”
This turn-locking system keeps the logical board, visual interface and AI behavior synchronized.
Creating Three Difficulty Levels
The most important part of the project was giving the computer three noticeably different behaviors.
Easy Mode
Easy mode collects all available cells and chooses one randomly.
It does not search for a winning opportunity or attempt to block the player. This gives new players a good chance to experiment, recognize patterns and win rounds without facing a highly defensive opponent.
Smart Mode
Smart mode combines calculated decisions with occasional mistakes.
Most of the time, it evaluates the board using the same minimax system as Unbeatable mode. However, it has a 28% chance of choosing a random available position.
This produces an opponent that generally makes strong moves but remains beatable. The random decisions prevent every round from feeling completely predictable.
Unbeatable Mode
Unbeatable mode always uses the minimax algorithm.
The AI tests every available position, temporarily places O there and evaluates the possible future moves that could follow. It continues exploring the game tree while alternating between two objectives:
- The computer tries to maximize its result.
- The player is expected to minimize the computer’s result.
An AI victory receives a positive score, a player victory receives a negative score and a draw receives zero. Search depth is also considered, so the AI prefers a faster victory and tries to delay an unavoidable defeat.
Tic-Tac-Toe has a small board, making it possible to evaluate its complete decision tree without creating noticeable performance problems in the browser.
Unbeatable mode therefore does not simply react to the player’s previous move. It considers the possible consequences of every available option before making its decision.
Detecting Wins and Draws
There are eight possible winning combinations in Tic-Tac-Toe:
- Three horizontal rows
- Three vertical columns
- Two diagonals
I stored these combinations as groups of three board indexes. After each move, the game checks whether all three positions in any combination contain the same non-empty symbol.
When a match is found, the game identifies both the winner and the specific completed line. This information is used to display the correct result and position the visual winning indicator over the board.
If no winning combination exists and all nine positions are occupied, the round is recorded as a draw.
The session scoreboard separately tracks:
- Player victories
- Draws
- AI victories
Players can immediately start another round while keeping these results, or return to the home screen to begin a new session.
Making Every Move Feel Responsive
Even a small board game benefits from clear visual feedback.
When X or O appears, the symbol begins at a reduced size and quickly grows into place. A small overshoot gives the animation a more playful feeling before the symbol settles at its normal scale.
When someone wins, a golden line appears over the completed combination. Its position, width and rotation depend on whether the victory occurred across a row, column or diagonal.
A horizontal win displays a straight line across the row. Vertical victories rotate the indicator by 90 degrees, while diagonal victories use the appropriate 45-degree angle and a longer line.
When the player wins, the game also creates a short confetti celebration using coral, turquoise and gold pieces. Each piece falls with its own movement, rotation and duration before being removed.
The result screen then clearly communicates one of three outcomes:
- You Win!
- AI Wins
- Good Draw!
These details do not change the rules, but they make the result much easier to understand and give the round a satisfying conclusion.
Designing the Interface for Browser Players
The interface uses a Screen Space Overlay Canvas with a reference resolution of 1920×1080.
Tic Tac Glow contains four main areas.
Main Menu
The opening screen includes the game title, difficulty selector, sound control and a button for starting a match against the AI. It also identifies Tic Tac Glow as an original game from Lalo.games.
Gameplay Screen
During a match, players can see the current turn, session results, restart control, home button and the complete 3×3 board.
Result Screen
The result overlay displays the outcome and provides options to play another round or return home.
Difficulty Selection
Players can switch between Easy, Smart and Unbeatable modes depending on the experience they want.
The CanvasScaler adjusts its width-and-height matching value on narrow screens. This helps the same interface remain usable across different browser shapes without requiring a completely separate mobile version.
Creating Visual Elements Through Code
The project does not rely on a large collection of imported interface textures.
Instead, it generates a small rounded texture during runtime and converts it into a sliced Unity sprite. That sprite can then be reused for menu cards, buttons, board cells and result panels without stretching or distorting the corners.
Subtle outlines create shadows underneath interactive elements, while colored background bands and gently moving decorative shapes keep the scene from feeling static.
Generating these components through code helped me maintain a consistent visual language throughout the game. If the style of one component changed, I could update the shared settings instead of modifying many unrelated assets.
It also helped keep the WebGL build relatively compact.
Generating the Music and Sound Effects
One unusual part of Tic Tac Glow is that it does not use imported music or sound-effect files.
The game creates its AudioClip data through C#. Two AudioSource components are used:
- One for looping background music
- One for individual sound effects
The background track is a 12-second procedural loop combining a short melody, bell-like harmonics and lower supporting tones.
Separate generated sounds are used for placing X, placing O, selecting buttons, winning and ending a round.
The browser does not start the music as soon as the page loads. Many browsers block sound that begins before the user interacts with a webpage, so Tic Tac Glow waits until the player selects Play Against AI.
This provides a more reliable WebGL experience and avoids unexpected audio playing before the user begins.
Preparing Tic Tac Glow for WebGL
Because the game was created for browser publishing, I kept its systems lightweight.
The project uses:
- A single enabled gameplay scene
- A fixed nine-cell board
- A default WebGL canvas size of 960×600
- Compressed build output
- WebGL data caching
- A target frame rate of 60
- No networking dependency
- No complex physics
- No external audio files
- Temporary confetti objects that are removed after use
The minimax system is also suitable for WebGL because Tic-Tac-Toe has a limited number of possible board states.
Another important consideration was resetting the game correctly. Restarting a round must clear more than the nine symbols. The game also stops active coroutines, hides the previous result screen, removes the winning line, resets interaction and returns control to the player.
Returning to the main menu performs an additional reset by clearing the session scoreboard.
What I Learned
Tic Tac Glow reminded me that a simple concept does not automatically produce a simple development process.
The rules were easy to define, but the complete experience required several systems to work together:
- Board data
- Visual cells
- Player input
- AI decisions
- Turn timing
- Animations
- Score tracking
- Audio
- Result handling
- Responsive interface behavior
The project also demonstrated how a single AI algorithm can support different player experiences. Random moves created an accessible beginner mode, while controlled randomness produced a middle difficulty. Using minimax consistently created the strongest opponent.
Most importantly, I saw how much clear feedback contributes to a small game. The turn message tells players what is happening, pop animations confirm their selections, the golden line explains the victory and the result screen creates a clear ending.
None of these additions changes Tic-Tac-Toe itself, but together they make the game feel considerably more complete.
Future Improvements
There are several ways I could expand Tic Tac Glow in future updates:
- Allow players to choose X or O
- Randomize which side moves first
- Add a local two-player mode
- Save match statistics between sessions
- Add keyboard navigation
- Introduce alternative board themes
- Provide optional beginner hints
- Add a timed challenge mode
- Include daily challenges
- Support additional languages
- Improve accessibility options
- Test and document more browser and device combinations
These features are not necessary for the core game, but they could add variety while keeping the original rules understandable.
Play Tic Tac Glow on Lalo.games
Tic Tac Glow combines classic strategy with three AI difficulty levels, responsive controls, procedural audio and a colorful casual presentation.
Easy mode is suitable for beginners, Smart mode provides a balanced challenge, and Unbeatable mode rewards careful defensive play.
You can play Tic Tac Glow on Lalo.games directly in your browser without downloading or installing anything.
Frequently Asked Questions
Which Unity version was used?
I developed Tic Tac Glow with Unity 6000.3.15f1, using C# and Unity WebGL.
How does Unbeatable mode work?
Unbeatable mode uses the minimax algorithm to evaluate possible future moves. It selects the option with the strongest calculated outcome for the computer.
What makes Smart mode different?
Smart mode generally uses minimax but has a 28% chance of selecting a random available position. This gives it opportunities to make mistakes and allows skilled players to defeat it.
Does the game use downloaded music or sound effects?
No. The background music and interface sounds are generated programmatically through C#.
Can Tic Tac Glow be played on a touchscreen?
The board and menus use Unity UI buttons, so players on compatible touchscreen devices can interact by tapping.
Who developed Tic Tac Glow?
Tic Tac Glow was developed by Ismail Ettabani as an original browser game for Lalo.games.
About the author: Ismail Ettabani is a Unity developer and the creator of Lalo.games, where he develops and publishes original browser games alongside technical articles about their design and development.
