BUILD WITH ME · SEASON 2 · DAY 2 / 7

Tic-Tac-Toe

Season 2 ka dusra project: Tic-Tac-Toe — do log baari-baari X aur O lagate hain, jeet ki line green ho jaati hai, aur draw ya restart bhi chalta hai. Isse tum seekhoge ki game ka data array me kaise rakhte hain aur jeet ka logic kaise likhte hain.

⏱ 35 min🎯 Beginner → JS logic🛠 Arrays, win logic, game state

grid-template-columns: repeat(3, 1fr) — 3×3 board
Board ko array me rakhna: Array(9).fill('')
Jeet ki 8 lines ka array + for...of aur destructuring [a, b, c]
classList.add se X / O / win ke rang lagana
Game state: turn aur over — ye do variables poora game chalate hain

Seedha code karo ↓Step by step

Aaj yeh banega 👇

Step by step

Har step me "Editor me daalo" dabao — ya best: khud type karo, haath se likha code yaad rehta hai. ✍️

1Board ka HTMLindex.html

#status heading me dikhega kiski baari hai ya kaun jeeta.
#board ke andar 9 khaali buttons — har button ek cell hai.
Alag #reset button jo game dobara shuru karega.

  <div class="game">
    <h1 id="status">Turn: X</h1>
    <div id="board">
      <button></button><button></button><button></button>
      <button></button><button></button><button></button>
      <button></button><button></button><button></button>
    </div>
    <button id="reset">Restart</button>
  </div>

2Dark cardstyle.css

Wahi purani trick: display: grid + place-items: center se card beech me.
Is baar text-align: center bhi, taaki title aur button beech me aayein.

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0f172a;
  font-family: sans-serif;
}
.game {
  width: 300px;
  padding: 24px;
  background: #1e293b;
  border-radius: 24px;
  text-align: center;
}

3Title + 3×3 gridstyle.css

repeat(3, 1fr) — 3 barabar columns. 9 buttons apne aap 3 rows me baith jaate hain.
gap: 8px cells ke beech jagah deta hai.

h1 { margin: 0 0 16px; color: #fff; font-size: 24px; }
#board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

4Cells + X / O ke rangstyle.css

#board button sirf board ke cells ko style karta hai, Restart button ko nahi.
Class .X indigo aur .O pink — JS ye class lagayega.
.win green hai. !important isliye ki cell ka normal background isse na dabe.

#board button {
  height: 84px;
  border: 0;
  border-radius: 14px;
  background: #334155;
  font-size: 44px;
  font-weight: bold;
  cursor: pointer;
}
.X { color: #6366f1; }
.O { color: #ec4899; }
.win { background: #22c55e !important; color: #fff; }

5Restart buttonstyle.css

Chhota sa indigo button, margin-top se board se thoda door.

#reset {
  margin-top: 16px;
  padding: 10px 24px;
  border: 0;
  border-radius: 10px;
  background: #6366f1;
  color: #fff;
  cursor: pointer;
}

6Data + WINSscript.js

cells = 9 buttons ki list. msg = upar ka heading.
WINS: jeet ki 8 lines (3 row, 3 column, 2 diagonal) — har line me 3 cell ke number (0 se 8).
board (kaun sa cell bhara), turn (X ya O), over (game khatam?).

const cells = document.querySelectorAll('#board button');
const msg = document.querySelector('#status');
const WINS = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8],
  [0, 3, 6], [1, 4, 7], [2, 5, 8],
  [0, 4, 8], [2, 4, 6],
];
let board, turn, over;

7start() + winner()script.js

start() sab kuch reset karta hai — page khulne par aur Restart par, dono jagah.
Array(9).fill('') — 9 khaali jagah ka array.
winner() 8 lines ek-ek dekhta hai. const [a, b, c] = destructuring: line ke 3 number alag-alag naam me.
Agar teeno cell ek hi (aur khaali nahi) hon to wo line return karo, warna null.

function start() {
  board = Array(9).fill('');
  turn = 'X';
  over = false;
  cells.forEach((c) => {
    c.textContent = '';
    c.className = '';
  });
  msg.textContent = 'Turn: X';
}

function winner() {
  for (const [a, b, c] of WINS) {
    const v = board[a];
    if (v && v === board[b] && v === board[c]) {
      return [a, b, c];
    }
  }
  return null;
}

8play() — ek chaalscript.js

Pehli line guard hai: game khatam ya cell bhara hua to kuch mat karo.
Chaal chalo: array me aur screen par X/O likho, aur uski class lagao.
Jeet ho gayi to line ke teeno cells win karo. Warna agar koi khaali nahi bacha to draw.
Nahi to baari badlo: turn === 'X' ? 'O' : 'X' — ternary operator.

function play(i) {
  if (over || board[i]) return;
  board[i] = turn;
  cells[i].textContent = turn;
  cells[i].classList.add(turn);
  const line = winner();
  if (line) {
    line.forEach((n) => cells[n].classList.add('win'));
    msg.textContent = `${turn} jeet gaya! 🎉`;
    over = true;
  } else if (!board.includes('')) {
    msg.textContent = 'Draw 🤝';
    over = true;
  } else {
    turn = turn === 'X' ? 'O' : 'X';
    msg.textContent = `Turn: ${turn}`;
  }
}

9Clicks jodnascript.js

forEach((c, i) => ...) — i hume cell ka number deta hai.
Restart button start function ko seedha chalata hai.
Aakhri line start() — page khulte hi board taiyar.

cells.forEach((c, i) => {
  c.addEventListener('click', () => play(i));
});
const reset = document.querySelector('#reset');
reset.addEventListener('click', start);
start();