⭕ TIC-TAC-TOE

Three in a row — against a computer that never loses

← Back to Fun Time
You
0
Computer
0
Draws
0

⌨️ Controls

  • ← → ↑ ↓ move the dashed cursor
  • Space or Enter play there
  • Clicking or tapping a square works too
  • R next round  •  P pause
  • 🎮 Xbox controller? Just plug it in or pair it — the stick and D-pad are the arrow keys, A is SPACE, Menu pauses and View starts again

🎯 How to play

  • You are X and you always go first.
  • Get three in a row — across, down or diagonally.
  • The computer replies straight away, so every tap is a whole turn.
  • The scoreboard keeps count across rounds.

🤖 How the computer thinks

  • 1. If it can win this turn, it wins.
  • 2. If you are about to win, it blocks you.
  • 3. Otherwise it takes the middle — that square is on four lines.
  • 4. Otherwise a corner, which is on three.
  • Those four rules are enough that it never loses. A draw is a win for you!

🧑‍💻 For young coders: build this game yourself

This game is split into small library files inside funtime/lib/, and every function has a comment saying exactly what goes in, what comes out, and the algorithm in plain English. Empty any function out, read its comment, and write it yourself.

File What it does Good functions to try re-writing
lib/tictactoe-rules.js The rules, and the computer's brain winningLine, isDraw, computerMove
lib/tictactoe-draw.js Painting the grid, the Xs and the Os drawMark, drawWinningLine, squareAtPixel
lib/tictactoe-main.js The glue: clicks, keyboard, the scoreboard doAction, connectBoard, updateScoreboard

💡 The big idea: the computer plays by trying a move on a copy of the board and seeing what happens. That is why placeMark returns a new board instead of changing the old one — it lets you imagine a move without making it.

🛠️ Want to be walked through it? Build Tic-Tac-Toe Yourself takes you through the key functions one step at a time and tests each one you write. There is a Python version too.