Reading Time: 4 minutes

Introduction:
Remember the classic movie WarGames, where the hero plays Tic-Tac-Toe against a supercomputer named WOPR? In this blog post, we’re going to recreate that nostalgic experience by building a simple Tic-Tac-Toe game using HTML, CSS, and JavaScript. Get ready to dive into some retro-inspired fun!

Step 1: Setting Up the HTML Structure
We start by setting up the basic structure of our game board using HTML. It consists of a grid layout representing the Tic-Tac-Toe board and a reset button to start a new game.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WarGames Tic-Tac-Toe</title>
</head>
<body>
    <h1>WarGames Tic-Tac-Toe</h1>
    <div class="game-container">
        <div class="game-board">
            <div class="cell" data-index="0"></div>
            <div class="cell" data-index="1"></div>
            <div class="cell" data-index="2"></div>
            <div class="cell" data-index="3"></div>
            <div class="cell" data-index="4"></div>
            <div class="cell" data-index="5"></div>
            <div class="cell" data-index="6"></div>
            <div class="cell" data-index="7"></div>
            <div class="cell" data-index="8"></div>
        </div>
        <button id="reset-btn">Reset</button>
    </div>
    <script>
        // JavaScript code goes here
    </script>
</body>
</html>

Step 2: Styling with CSS
Next, we add some styling to make our game board visually appealing. We use CSS to define the appearance of the game cells, the reset button, and the overall layout of the game.

<style>
    .game-container {
    text-align: center;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-board {
    display: inline-grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    gap: 5px;
    background-color: #444;
    padding: 5px;
}

.cell {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ddd;
    font-size: 2em;
    cursor: pointer;
}

#reset-btn {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1.2em;
    cursor: pointer;
    border: none;
    background-color: #4CAF50;
    color: white;
}

#reset-btn:hover {
    background-color: #45a049;
}

</style>

Step 3: JavaScript Magic
Now comes the fun part – adding interactivity to our game using JavaScript. We implement functionalities such as handling player clicks, checking for a winner, making the computer player’s move, and resetting the game.

<script>
    // Get all the cells
const cells = document.querySelectorAll('.cell');

// Add event listener to each cell
cells.forEach(cell => {
    cell.addEventListener('click', handleClick);
});

// Reset button
const resetButton = document.getElementById('reset-btn');
resetButton.addEventListener('click', resetGame);

// Game variables
let currentPlayer = 'X';
let board = ['', '', '', '', '', '', '', '', ''];
let gameEnded = false;

// Function to handle cell click
function handleClick() {
    if (gameEnded) return;
    const index = this.getAttribute('data-index');
    if (board[index] === '') {
        board[index] = currentPlayer;
        this.textContent = currentPlayer;
        checkWinner();
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        makeComputerMove();
    }
}

// Function to check if a player has won
function checkWinner() {
    const winningCombinations = [
        [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
        [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
        [0, 4, 8], [2, 4, 6] // Diagonals
    ];

    for (let combination of winningCombinations) {
        const [a, b, c] = combination;
        if (board[a] && board[a] === board[b] && board[a] === board[c]) {
            gameEnded = true;
            // Show X in winning cells
            cells[a].textContent = 'X';
            cells[b].textContent = 'X';
            cells[c].textContent = 'X';
            setTimeout(() => {
                alert(`${board[a]} wins!`);
            }, 100);
            break;
        }
    }

    if (!board.includes('') && !gameEnded) {
        gameEnded = true;
        alert("It's a draw!");
    }
}

// Function to make the computer's move
function makeComputerMove() {
    if (currentPlayer === 'O' && !gameEnded) {
        let emptyCells = [];
        board.forEach((cell, index) => {
            if (cell === '') {
                emptyCells.push(index);
            }
        });

        const randomIndex = Math.floor(Math.random() * emptyCells.length);
        const chosenCell = emptyCells[randomIndex];
        board[chosenCell] = currentPlayer;
        cells[chosenCell].textContent = currentPlayer;
        checkWinner();
        currentPlayer = 'X'; // Switch back to the human player
    }
}

// Function to reset the game
function resetGame() {
    // Reset all variables and clear the board
    currentPlayer = 'X';
    board = ['', '', '', '', '', '', '', '', ''];
    gameEnded = false;
    cells.forEach(cell => {
        cell.textContent = '';
    });
}
</script>

Step 4: Making It Playable
With all the pieces in place, our Tic-Tac-Toe game is now fully playable! Players can take turns clicking on the cells to place their marks (X or O), and the game will detect a winner or declare a draw when appropriate.

Let’s play Tic-Tac-Toe

Let’s Play Tic-Tac-Toe

Conclusion:
And there you have it – a retro-inspired Tic-Tac-Toe! By combining HTML, CSS, and JavaScript, we’ve created a fun and interactive project that pays homage to a classic movie. Feel free to customize and expand upon this project further, adding features like player vs. player mode or improving the computer player’s strategy. Let the games begin!

Tic-Tac-Toe: A Retro-inspired JavaScript Project

Let’s Play Tic-Tac-Toe

Tags