Tic Tac Toe. Play online against the computer

To make a move - click on the square.

Your move: X

Tic Tac Toe. History and Rules

Tic Tac Toe is a logic game for two players, widely known all over the world. It is easy to learn, but at the same time allows you to develop strategic thinking.

History and Origin

The game has ancient roots. Similar games existed in Ancient Egypt and Ancient Rome. For example, the game "Terni Lapilli" was popular in Rome, where marks on stone slabs were used. The modern form of the game began to actively spread in the 19th and 20th centuries.

Rules of the Game

The classic game is played on a 3x3 field. Players take turns placing their symbols: one plays for "X", the other for "O". The winner is the first to line up three of their symbols vertically, horizontally or diagonally.

Variations

There are many variations of the game. For example, gomoku (or "five in a row") is played on a larger board (usually 15x15), and players need to line up five symbols in a row. Extended versions on 4x4 and 5x5 boards are also popular.

Strategies and tactics

Tic-tac-toe game

If both players play optimally, the game always ends in a draw. Basic strategies:

Take the center – this increases your chances of winning.
Players should block the opponent – if the opponent has two symbols in a row, it is better to immediately block the third.
Attack early – create situations where you have two potential lines for winning.

Tic Tac Toe in Programming

Because of its simple rules, this game is often used in teaching programming. Beginner programmers write console versions, and more experienced ones implement the minimax algorithm to create artificial intelligence for the game.

Source code of the game Tic Tac Toe for teaching programming

<script>
    let board = [''', ''', ''', ''', ''', ''', ''', ''', '''];
    let currentPlayer = 'X';
    let gameActive = true;

    function createBoard() {
        const boardElement = document.getElementById('board');
        boardElement.innerHTML = '';
        board.forEach((cell, index) => {
            const cellElement = document.createElement('div');
            cellElement.classList.add('cell');
            cellElement.textContent = cell;
            cellElement.addEventListener('click', () => makeMove(index));
            boardElement.appendChild(cellElement);
        });
    }

    function makeMove(index) {
        if (board[index] === ''' && gameActive) {
            board[index] = currentPlayer;
            createBoard();
            if (checkWinner()) {
                document.getElementById('status').textContent = `Winner: ${currentPlayer}`;
                gameActive = false;
                return;
            }
            if (!board.includes(''')) {
                document.getElementById('status').textContent = "Draw!";
                gameActive = false;
                return;
            }
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            document.getElementById('status').textContent = `Your move: ${currentPlayer}`;

            if (currentPlayer === 'O') {
                setTimeout(computerMove, 500);
            }
        }
    }

    function computerMove() {
        let bestMove = findBestMove();
        if (bestMove !== -1) {
            board[bestMove] = 'O';
            createBoard();
            if (checkWinner()) {
                document.getElementById('status').textContent = "The computer won!";
                gameActive = false;
                return;
            }
            if (!board.includes(''')) {
                document.getElementById('status').textContent = "Draw!";
                gameActive = false;
                return;
            }
            currentPlayer = 'X';
            document.getElementById('status').textContent = `Your move: ${currentPlayer}`;
        }
    }

    function findBestMove() {
        const winPatterns = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8],
            [0, 3, 6], [1, 4, 7], [2, 5, 8],
            [0, 4, 8], [2, 4, 6]
        ];
        
        for (let pattern of winPatterns) {
            let [a, b, c] = pattern;
            if (board[a] === 'O' && board[b] === 'O' && board[c] === ''') return c;
            if (board[a] === 'O' && board[c] === 'O' && board[b] === ''') return b;
            if (board[b] === 'O' && board[c] === 'O' && board[a] === ''') return a;
        }
        
        for (let pattern of winPatterns) {
            let [a, b, c] = pattern;
            if (board[a] === 'X' && board[b] === 'X' && board[c] === ''') return c;
            if (board[a] === 'X' && board[c] === 'X' && board[b] === ''') return b;
            if (board[b] === 'X' && board[c] === 'X' && board[a] === ''') return a;
        }
        
        if (board[4] === ''') return 4;
        
        let emptyCells = board.map((cell, index) => cell === ''' ? index : null).filter(index => index !== null);
        return emptyCells.length > 0 ? emptyCells[Math.floor(Math.random() * emptyCells.length)] : -1;
    }

    function checkWinner() {
        const winPatterns = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8],
            [0, 3, 6], [1, 4, 7], [2, 5, 8],
            [0, 4, 8], [2, 4, 6]
        ];
        return winPatterns.some(pattern => {
            const [a, b, c] = pattern;
            return board[a] && board[a] === board[b] && board[a] === board[c];
        });
    }

    function resetGame() {
        board = [''', ''', ''', ''', ''', ''', ''', ''', '''];
        currentPlayer = 'X';
        gameActive = true;
        document.getElementById('status').textContent = 'Your move: X';
        createBoard();
    }

    createBoard();
</script>

Conclusion

Tic-tac-toe is not just a children's game, but a powerful tool for training logic. Despite its simplicity, it continues to inspire developers and mathematicians around the world.