Maggie HTTN
Web Design & Development • Interaction Demo

Tic Tac Toe Game

A simple UI game: clear interaction, immediate feedback, and state changes

This mini project demonstrates a small but complete interactive flow: the user clicks a square to place a move, the computer responds, and the game provides feedback for win/lose/draw and resets for the next round.

Type
Interactive micro-project
Tech
HTML • CSS • JavaScript
Open Full Page

Play the Game

Human vs. computer — quick, simple, and interactive.

How to Play

  1. Click any square to place your move.
  2. The computer responds automatically.
  3. Keep playing until there is a win or draw.
Interaction Design Notes
  • Single action: click = move (no extra steps).
  • Immediate feedback: board updates after each turn.
  • Simple rules: easy to learn in seconds.
  • Clear goal: get three in a row.

Why this relates to UX/UI

  • Clear affordance: the board invites clicks and supports quick learnability.
  • Immediate feedback: each click updates state on the board, and the game communicates win/lose/draw outcomes.
  • State management: each square tracks whether it’s used, and the game resets after an outcome.
  • Simple, readable visual system: consistent grid and contrast for the game marks.

Next improvements (to make it stronger)

  • Add a visible Reset button and a Status message area (instead of alert popups).
  • Add keyboard support + focus states for accessibility.
  • Add small UX polish: hover states, turn indicator, and win-line highlight.
  • Add a tiny “How to play” + “Difficulty” option if you want to expand it.