NC
← All articles
Tic-Tac-Toe for two players — from idea to finished game in 5 minutes
🎮
Games29 Apr 2026 · 5 min read

Tic-Tac-Toe for two players — from idea to finished game in 5 minutes

The simplest game AI can build. We show how to personalize it — colors, player names, animations.

Tic-tac-toe is the simplest grid game. A 3×3 grid, two players take turns placing X and O. First to get three in a row wins. It's the ideal first app because:

  • Rules are known to everyone
  • Logic is simple — only 8 winning combinations to check
  • Visually clear — you immediately see if it works

The prompt I tell my users to start with

You don't write technical details. No need to mention JavaScript or HTML. Try this:

Build me a tic-tac-toe game for two players. 3 by 3 grid,
players take turns clicking to place X and O. When someone
wins, show "X wins!" or "O wins!". Use blue and orange
colors. Add a "New game" button to reset.

What the AI will build

In seconds you get three files — index.html, style.css, and script.js. The app will:

  • Have 9 cells in a 3×3 grid
  • Alternate X and O on clicks
  • Detect a win (row, column, diagonal)
  • Show the winner and reset when you click the button

How to personalize it

This is where the fun starts. After the first version, ask for changes specifically:

  1. Player names instead of X and O: “Before the game starts, ask players for their names. Then show the first letter of each name instead of X and O.”
  2. Click sound: “Add a click sound when a player places their mark. Use the Web Audio API.”
  3. Win animation: “When someone wins, shake the three winning cells and glow them gold.”
  4. Score across games: “Track how many times each player has won and show it in the corner. Save the score to nocodeon.db so I can see it from other devices.”

What I learned from users

Most common beginner mistake: typing everything at once in one message. The AI works better when you build incrementally — first the base, then feature by feature. That way you see the effect of each change and can roll back easily if something breaks.

Second tip: turn on the 🎓 Coach Modetoggle in the chat while you're learning. The AI will ask you the right Project Manager questions instead of just doing.

Next level: 3D tic-tac-toe

Once you've mastered the 2D version, ask: “Convert this to 3D using Three.js. The grid should be a cube that rotates on click.” Same AI, just a more ambitious prompt. Our platform supports Three.js from CDN with no build step — it just works.