Tic Tac Toe with AI Logic and Glassmorphic Design

For Week 18 of Project52, I revisited a timeless classic: Tic Tac Toe.
The goal was not just to recreate the game, but to approach it with an engineering mindset—focusing on responsive design, AI logic, state control, and clean interface transitions, all built from scratch using only HTML, CSS, and JavaScript.

This wasn’t about reinventing the wheel. It was about asking:
"How polished and intelligent can a traditionally simple game become in the browser without any frameworks?"

Overview of What I Built

• A fully functional Tic Tac Toe game playable in two modes:

  • Player vs Player

  • Player vs Computer (Bot mode)

• A responsive interface that works seamlessly across devices, from desktop to mobile

• A visually modern UI featuring a glassmorphism aesthetic, animated transitions, and subtle glow effects for interactivity

• An AI logic system that allows the bot to either:

  • Win if possible

  • Block the player’s winning move if detected

  • Or choose a random available cell as fallback

Everything was built using a single .html file — no dependencies, no build tools, and no external libraries beyond a Google Font import.

Try it here.

The Technical Logic

1. Game State

• The board is represented as a simple array of 9 cells.

• Each cell corresponds to an index and stores either an "X", an "O", or an empty string.

• Player input updates both the array state and the UI directly via DOM manipulation (no full rerenders).

2. Turn Handling

• A currentPlayer variable toggles between "X" and "O".

• The display updates immediately after each valid move, and the game checks whether the move results in a win or draw.

3. Win Checking

• All 8 possible win patterns (rows, columns, diagonals) are hardcoded.

• After each move, the game checks if the current player’s combination matches any win pattern.

4. Bot AI Logic

The computer opponent uses a very lightweight but effective logic structure:

1. Can the bot win on this move? If yes, play that move. 

2. Can the bot block the player from winning on their next move? If yes, block it. 

3. Otherwise, pick any random empty cell. 

This keeps the gameplay interesting without needing minimax or complex search trees. For a casual user, the bot feels “smart enough.”

The Design Layer

I spent significant time on the visual experience, aiming to make the interface as clean and modern as possible while retaining clarity and responsiveness.

Key styling features:

• Glassmorphism UI using semi-transparent panels, subtle gradients, and blurred backgrounds

• Custom hover effects and click animations on cells

• Color-coded player moves with glowing outlines for each player

• Animated status panel that pulses when a player wins

• Responsive layout that scales the game board and text based on screen width using aspect-ratio, @media queries, and scalable units

Even though it's a game that could be completed in an hour with basic functionality, the visual polish and interactivity give it a product-like finish.

Why This Project Matters

This week’s project taught me that even the simplest applications benefit from:

• A strong attention to interface detail

• Well-scoped logic and state isolation

• Thoughtful UX choices that make the experience feel alive

Instead of rushing through a quick build, I focused on deepening my understanding of state persistence, DOM efficiency, and micro-interactions that guide user experience.

By keeping everything frontend-only, I also challenged myself to think through problems like:

• How do you handle animations cleanly without rebuilding the DOM?

• How do you keep logic separate from UI without a framework?

• How do you balance "smart" behavior with readable, debuggable code?

What's Next

Week 19 may go in a very different direction—possibly toward motion, randomness, or a heavier data-logic split. I’m considering building a physics-based game or starting a new round of utility tools that incorporate dynamic data or user scoring systems.

Each week is a chance to push my own boundaries—whether technically, creatively, or both.

—

If you want to try the Tic Tac Toe game, contribute improvements, or just peek into the codebase, feel free to reach out. I’ll be posting a live demo and repository link shortly.

– Atul Verma