Build a TicTacToe class for two players, X and O, on a 3 by 3 board. One object is one game: it remembers the board and whose turn it is, lets the players take turns, and tells who has won.
The board: rows and columns are numbered 0, 1 and 2. Cell (0, 0) is the top-left corner, (0, 2) the top-right, (2, 0) the bottom-left and (2, 2) the bottom-right. A cell holds 'X', 'O' or '.' when it is still empty.
Build:
- A new game. The class has two fields, set up when the object is created:
board, an array of three rows (each an array of three'.'), andplayer = 'X'. Every row must be its own array (build them withArray.from, not by repeating one row). All nine cells are empty and X moves first. move(r, c)plays one turn at the given row and column (always between 0 and 2, so you do not need to check the range).- If the cell is not empty, ignore the call: nothing changes and it is still the same player's turn.
- Otherwise put the current player's mark in the cell, then give the turn to the other player (X becomes O, O becomes X).
winner()returns the winner as a one-character string:'X','O'or'.'.- A player wins by having the same mark in all three cells of a row, a column, or one of the two diagonals ((0,0), (1,1), (2,2) and (0,2), (1,1), (2,0)). Three empty cells in a line are not a win.
- If nobody has three in a row, return
'.'. That covers a game still in progress, an empty board and a draw.
You start with this code, which plays six games and prints the result of each one:
let game = new TicTacToe();
game.move(0, 0);
game.move(1, 0);
game.move(0, 1);
game.move(1, 1);
game.move(0, 2);
console.log(game.winner() + " wins!");
game = new TicTacToe();
game.move(0, 0);
game.move(0, 1);
game.move(0, 0);
game.move(1, 0);
game.move(1, 1);
game.move(2, 2);
game.move(2, 1);
console.log(game.winner() + " wins!");
game = new TicTacToe();
game.move(0, 0);
game.move(0, 1);
game.move(1, 1);
game.move(0, 2);
game.move(2, 2);
console.log(game.winner() + " wins!");
game = new TicTacToe();
game.move(0, 2);
game.move(0, 0);
game.move(1, 1);
game.move(0, 1);
game.move(2, 0);
console.log(game.winner() + " wins!");
game = new TicTacToe();
game.move(0, 0);
game.move(0, 1);
game.move(0, 2);
game.move(1, 1);
game.move(1, 0);
game.move(1, 2);
game.move(2, 1);
game.move(2, 0);
game.move(2, 2);
console.log("No winner: " + game.winner());
game = new TicTacToe();
console.log("No winner: " + game.winner());
Games played: X fills the top row; then a game where X tries to play on a cell that is already taken (ignored, and still X's turn) and O wins the middle column; X on the main diagonal; X on the other diagonal; a full board with no three in a row; and a brand-new game.
Expected output:
X wins! O wins! X wins! X wins! No winner: . No winner: .
There are eight winning lines: three rows, three columns and two diagonals. A loop over
i from 0 to 2 can check row i and column i together; the two diagonals come after the loop. Skip a line whose first cell is empty.
Check for a taken cell first and leave the move method before touching the board or the turn. Only a successful move passes the turn to the other player.
class TicTacToe {
board = Array.from({length: 3}, () => Array(3).fill('.'));
player = 'X';
move(r, c) {
if (this.board[r][c] !== '.') return;
this.board[r][c] = this.player;
this.player = this.player === 'X' ? 'O' : 'X';
}
winner() {
const b = this.board;
for (let i = 0; i < 3; i++) {
if (b[i][0] !== '.' && b[i][0] === b[i][1] && b[i][1] === b[i][2]) return b[i][0];
if (b[0][i] !== '.' && b[0][i] === b[1][i] && b[1][i] === b[2][i]) return b[0][i];
}
if (b[0][0] !== '.' && b[0][0] === b[1][1] && b[1][1] === b[2][2]) return b[0][0];
if (b[0][2] !== '.' && b[0][2] === b[1][1] && b[1][1] === b[2][0]) return b[0][2];
return '.';
}
}
Free plan: 30 tutor messages. Premium is unlimited.
