Przejdź do głównej zawartości

20. Kółko i Krzyżyk (Tic-Tac-Toe)

Implementacja gry Kółko i Krzyżyk z detekcją wygranej i remisu, historią ruchów i opcjonalnym trybem vs komputer (AI).

const WINNING_COMBINATIONS = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], // wiersze
[0, 3, 6], [1, 4, 7], [2, 5, 8], // kolumny
[0, 4, 8], [2, 4, 6], // przekątne
];
function checkWinner(squares) {
for (const [a, b, c] of WINNING_COMBINATIONS) {
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return { winner: squares[a], line: [a, b, c] };
}
}
if (squares.every(Boolean)) return { winner: 'draw' };
return null;
}
// Minimax dla AI (wariant C)
function minimax(squares, isMaximizing) {
const result = checkWinner(squares);
if (result?.winner === 'O') return 10;
if (result?.winner === 'X') return -10;
if (result?.winner === 'draw') return 0;
if (isMaximizing) {
let best = -Infinity;
squares.forEach((_, i) => {
if (!squares[i]) {
squares[i] = 'O';
best = Math.max(best, minimax(squares, false));
squares[i] = null;
}
});
return best;
} else {
let best = Infinity;
squares.forEach((_, i) => {
if (!squares[i]) {
squares[i] = 'X';
best = Math.min(best, minimax(squares, true));
squares[i] = null;
}
});
return best;
}
}
  • Plansza 3×3 z kliknięciem
  • Naprzemienne tury X i O
  • Detekcja wygranej i remisu
  • Podświetlenie wygrywającej linii
  • Przycisk restart
Ocena: 3.0

Powodzenia!

Tic-Tac-Toe to klasyczny projekt React — oficjalna dokumentacja React używa go jako tutorial! Historia ruchów (time travel) z wariantu B pokazuje piękno niemutowalnego stanu. Minimax (wariant C) jest zaawansowanym algorytmem — zacznij od losowego AI i rozbuduj jeśli czas pozwoli!