Make a complete small puzzle game

Finishing a small puzzle requires more than getting the central rule to work. The game needs a clear start state, an explanation of valid moves, feedback after an action and a way to replay without reloading the page.

Represent a three-by-three board as nine cells and keep the win check independent of drawing. Enumerate the winning lines and evaluate them after each accepted move. Disable further moves once the round is complete.

Give symbols shape and text as well as color. Put round status in an HTML live region, and make each cell reachable by keyboard. A modest game with complete controls is a stronger learning project than a larger unfinished one.

Try the idea

const lines = [[0,1,2],[3,4,5],[6,7,8],
  [0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
const winner = lines.find(([a,b,c]) =>
  board[a] && board[a] === board[b] && board[b] === board[c]);