TypeScript Tutorial: Building a Simple Web-Based Game of Tic-Tac-Toe

Written by

learnmodernjavascript

in

Ever wanted to build your own game? Tic-Tac-Toe is a classic, easy to understand, and a great project to learn the fundamentals of web development and TypeScript. This tutorial will guide you through creating a fully functional, web-based Tic-Tac-Toe game using TypeScript, HTML, and CSS. We’ll cover everything from setting up your project to handling user input and determining the winner. By the end, you’ll have a playable game and a solid understanding of how TypeScript can be used to build interactive web applications.

Why TypeScript?

TypeScript, a superset of JavaScript, adds static typing. This means you can define the types of variables, function parameters, and return values. Why is this important? Because it helps you catch errors early in the development process. Instead of discovering bugs at runtime (when your game is being played), TypeScript allows the compiler to identify them during development. This leads to more robust, maintainable, and scalable code. Also, TypeScript provides better code completion and refactoring capabilities in modern IDEs, significantly boosting developer productivity.

Project Setup

Before we start coding, let’s set up our project. You’ll need Node.js and npm (Node Package Manager) installed on your system. If you don’t have them, download and install them from the official Node.js website. Open your terminal or command prompt and follow these steps:

  1. Create a new project directory: mkdir tic-tac-toe and navigate into it: cd tic-tac-toe.
  2. Initialize a new npm project: npm init -y. This creates a package.json file, which will manage your project dependencies.
  3. Install TypeScript: npm install typescript --save-dev. The --save-dev flag indicates that this is a development dependency.
  4. Create a tsconfig.json file. This file configures the TypeScript compiler. You can generate a basic one by running: npx tsc --init.

Your project directory should now look like this:

  • tic-tac-toe/
  • ├── node_modules/
  • ├── package.json
  • ├── package-lock.json
  • └── tsconfig.json

HTML Structure

Let’s start by creating the basic HTML structure for our game. Create a file named index.html in your project directory. This file will contain the layout and the user interface elements for our Tic-Tac-Toe game. Here’s the basic HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic-Tac-Toe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Tic-Tac-Toe</h1>
    <div id="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>
    <p id="status">Player X's turn</p>
    <button id="reset-button">Reset Game</button>
    <script src="script.js"></script>
</body>
</html>

Let’s break down this HTML:

  • <h1>Tic-Tac-Toe</h1>: The main heading for our game.
  • <div id="game-board">: This div will contain the nine cells of the Tic-Tac-Toe board.
  • <div class="cell" data-index="..."></div>: Nine divs, each representing a cell on the board. The data-index attribute is important; it tells us the index of the cell (0-8).
  • <p id="status">: A paragraph element to display the current game status (e.g., whose turn it is, the winner).
  • <button id="reset-button">: A button to reset the game.
  • <script src="script.js"></script>: Links our JavaScript file (which we’ll create shortly).

CSS Styling

Create a file named style.css in your project directory. This file will contain the CSS styles to make our game visually appealing. Here’s a basic CSS example:

body {
    font-family: sans-serif;
    text-align: center;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    width: 300px;
    margin: 20px auto;
}

.cell {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    font-size: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#status {
    font-size: 1.2em;
    margin-bottom: 10px;
}

#reset-button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
}

This CSS sets up the basic layout. It styles the body, the game board (using a grid layout), the individual cells, and the status and reset button. You can customize these styles to match your preferred aesthetic.

TypeScript Implementation

Now, let’s write the TypeScript code for our game. Create a file named script.ts in your project directory. This is where the game logic will reside. Here’s the initial code:

// Define the game board as an array of strings.  Each element represents a cell.
// Initially, all cells are empty ('').
let board: string[] = ['', '', '', '', '', '', '', '', ''];

// Keep track of the current player. 'X' starts first.
let currentPlayer: string = 'X';

// Determine if the game is still active.
let gameActive: boolean = true;

// Get references to HTML elements.
const cells = document.querySelectorAll('.cell');
const status = document.getElementById('status') as HTMLElement;
const resetButton = document.getElementById('reset-button') as HTMLButtonElement;

// Define winning conditions as an array of arrays.  Each inner array represents a winning combination of cell indices.
const winningConditions: number[][] = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];

// Function to handle a cell click.
function handleCellClick(clickedCellEvent: Event): void {
    // Get the clicked cell and its index.
    const clickedCell = clickedCellEvent.target as HTMLElement;
    const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index')!);

    // Check if the cell has already been played or if the game is over.
    if (board[clickedCellIndex] !== '' || !gameActive) {
        return;
    }

    // Update the game board and the cell's display.
    board[clickedCellIndex] = currentPlayer;
    clickedCell.textContent = currentPlayer;
    clickedCell.classList.add(currentPlayer === 'X' ? 'x-played' : 'o-played'); // Add a class for styling

    // Check for a win or a draw.
    handleResultValidation();
    handlePlayerChange();
}

// Function to handle player change.
function handlePlayerChange(): void {
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    status.textContent = `Player ${currentPlayer}'s turn`;
}

// Function to handle the result validation (win or draw).
function handleResultValidation(): void {
    let roundWon: boolean = false;
    for (let i = 0; i < winningConditions.length; i++) {
        const winCondition = winningConditions[i];
        let a = board[winCondition[0]];
        let b = board[winCondition[1]];
        let c = board[winCondition[2]];
        if (a === '' || b === '' || c === '') {
            continue;
        }
        if (a === b && b === c) {
            roundWon = true;
            break;
        }
    }

    if (roundWon) {
        status.textContent = `Player ${currentPlayer} has won!`;
        gameActive = false;
        return;
    }

    let roundDraw: boolean = !board.includes('');
    if (roundDraw) {
        status.textContent = 'Game ended in a draw!';
        gameActive = false;
        return;
    }
}

// Function to reset the game.
function handleRestartGame(): void {
    // Reset the game board.
    board = ['', '', '', '', '', '', '', '', ''];
    gameActive = true;
    status.textContent = `Player X's turn`;

    // Clear the cells' content and remove styling.
    cells.forEach(cell => {
        cell.textContent = '';
        cell.classList.remove('x-played', 'o-played');
    });

    currentPlayer = 'X';
}

// Add event listeners.
cells.forEach(cell => cell.addEventListener('click', handleCellClick));
resetButton.addEventListener('click', handleRestartGame);

// Compile the TypeScript code
// Run the following command in your terminal from the project root:
// tsc script.ts

Let’s break down this code:

  • Variables:
    • board: An array of strings representing the Tic-Tac-Toe board. Each element in the array corresponds to a cell. An empty string (”) indicates an empty cell, while ‘X’ or ‘O’ indicates the player’s mark.
    • currentPlayer: A string that stores the current player (‘X’ or ‘O’).
    • gameActive: A boolean that indicates whether the game is in progress.
    • cells, status, resetButton: These variables store references to the HTML elements that we’ll be interacting with. We use document.querySelectorAll to get all the cells, and document.getElementById to get the status and reset button. The as HTMLElement and as HTMLButtonElement assertions tell TypeScript what type these elements are.
    • winningConditions: An array of arrays defining all the possible winning combinations.
  • Functions:
    • handleCellClick(clickedCellEvent: Event): void: This function is called when a cell is clicked. It retrieves the clicked cell’s index, checks if the move is valid, updates the game board and the cell’s display, and then calls functions to check for a win or draw and to change the player’s turn.
    • handlePlayerChange(): void: Switches the current player.
    • handleResultValidation(): void: Checks if the current player has won or if the game is a draw.
    • handleRestartGame(): void: Resets the game to its initial state.
  • Event Listeners:
    • We add an event listener to each cell using cells.forEach(cell => cell.addEventListener('click', handleCellClick)). This tells the browser to call the handleCellClick function when a cell is clicked.
    • We also add an event listener to the reset button to call the handleRestartGame function when it’s clicked.

Compiling and Running the Game

To run the game, we need to compile the TypeScript code into JavaScript. Open your terminal in the project directory and run the following command:

tsc script.ts

This command will compile script.ts and create a script.js file. Now, open index.html in your web browser. You should see the Tic-Tac-Toe board. Click on a cell to start playing. The game logic, written in TypeScript, will handle the rest.

Adding Styles (Optional)

To make the game more visually appealing, you can add more styles to your style.css file. For example, you can add different colors for the ‘X’ and ‘O’ marks, change the font, or add a background color. Here are a few examples:


.x-played {
    color: blue;
}

.o-played {
    color: red;
}

#status {
    font-weight: bold;
}

Add these styles to your style.css file to enhance the appearance of your Tic-Tac-Toe game.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Typos: TypeScript helps prevent these, but double-check your code for any typos, especially in variable names and function names. Use your IDE’s auto-completion features to minimize these.
  • Incorrect File Paths: Ensure that the paths to your CSS and JavaScript files in index.html are correct. For example, if script.js is in the same directory as index.html, the <script src="script.js"> tag is correct.
  • Not Compiling TypeScript: Remember to re-compile your TypeScript code (using tsc script.ts) every time you make changes to script.ts. Otherwise, the changes won’t be reflected in the browser.
  • Incorrect Element Selection: Make sure your JavaScript code correctly selects the HTML elements you intend to manipulate. Use the browser’s developer tools (usually accessed by right-clicking on the page and selecting “Inspect”) to check that the elements are being selected correctly and that the correct classes and ids are applied.
  • Event Listener Issues: Double-check that your event listeners are correctly attached to the elements. Make sure the function names in the addEventListener calls match the function names in your code.
  • Type Errors: TypeScript will highlight type errors during compilation. Pay attention to these errors and fix them. They usually indicate that you’re trying to use a value in a way that’s not compatible with its declared type.
  • Logic Errors: Carefully review the game logic to ensure that the win conditions and draw conditions are correctly implemented. Test your game thoroughly to identify any logical flaws.

Key Takeaways

  • TypeScript Basics: You’ve learned about variables, functions, event listeners, and how to interact with HTML elements.
  • Type Safety: You’ve seen how TypeScript helps you catch errors early and write more robust code.
  • Project Structure: You’ve learned how to set up a basic web project with HTML, CSS, and TypeScript.
  • Game Logic: You’ve implemented the core logic of a Tic-Tac-Toe game, including handling user input, checking for wins and draws, and resetting the game.

FAQ

Here are some frequently asked questions:

  1. Can I use a different IDE? Yes, you can use any IDE or code editor you prefer. VS Code is a popular choice and has excellent TypeScript support.
  2. How do I deploy this game online? You can deploy your game to a web hosting service like Netlify, GitHub Pages, or Vercel. You will typically need to upload your HTML, CSS, and JavaScript files to the hosting service.
  3. How can I add more features to the game? You can add features such as:
    • A score counter
    • Difficulty levels (e.g., against an AI opponent)
    • The ability to choose player symbols (X or O)
    • A timer
  4. Why is TypeScript better than JavaScript for this project? TypeScript’s static typing helps catch errors during development, leading to more reliable code. It also provides better code completion and refactoring features, which can speed up development. While this project is simple, the benefits of TypeScript become more pronounced as projects grow in complexity.

This tutorial has given you a solid foundation for building interactive web applications with TypeScript. You can now adapt this knowledge to build more complex games or other web applications. Experiment with the code, add new features, and continue learning to enhance your skills. The possibilities are vast.

More posts