TypeScript Tutorial: Creating a Simple Interactive Tic-Tac-Toe Game

Written by

learnmodernjavascript

in

Ever wanted to build your own game? Tic-Tac-Toe is a classic, easy to understand, and a perfect project to learn the fundamentals of TypeScript. In this tutorial, we’ll walk through creating a fully functional, interactive Tic-Tac-Toe game from scratch. You’ll learn how to structure your code, handle user input, implement game logic, and display the game on the screen. This project is ideal for beginners to intermediate developers looking to expand their TypeScript skillset and understand how to apply it in a practical, fun context.

Why Build a Tic-Tac-Toe Game with TypeScript?

Tic-Tac-Toe provides a great learning opportunity for several reasons:

  • Simplicity: The rules are straightforward, making it easy to understand the core game mechanics.
  • Core Concepts: You’ll practice fundamental programming concepts like variables, functions, conditional statements, loops, and arrays.
  • User Interaction: You’ll learn how to handle user input and update the game state based on player actions.
  • TypeScript Benefits: This project highlights the advantages of TypeScript, such as type safety, which helps prevent errors, and code organization.

By the end of this tutorial, you’ll not only have a working game but also a solid understanding of how to use TypeScript to create interactive applications.

Setting Up Your Development Environment

Before we dive into the code, let’s make sure you have the necessary tools installed. You’ll need:

  • Node.js and npm (or yarn): These are essential for managing TypeScript and its dependencies. You can download them from https://nodejs.org/.
  • TypeScript Compiler: Install it globally using npm: npm install -g typescript
  • A Code Editor: Choose your favorite code editor, such as Visual Studio Code, Sublime Text, or Atom.

Once you have these tools installed, create a new project directory for your Tic-Tac-Toe game. Navigate to this directory in your terminal and initialize a new npm project:

npm init -y

This command creates a package.json file, which will store information about your project and its dependencies.

Creating the Project Structure

Let’s set up the basic project structure. Create the following files and directories in your project directory:

  • src/: This directory will contain your TypeScript source code.
  • src/index.ts: The main entry point for your game logic.
  • index.html: The HTML file for your game’s user interface.
  • tsconfig.json: Configuration file for the TypeScript compiler.

Configuring TypeScript (tsconfig.json)

The tsconfig.json file tells the TypeScript compiler how to compile your code. Create this file in your project’s root directory and add the following configuration:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Let’s break down some of these options:

  • target: "es5": Specifies the JavaScript version to compile to.
  • module: "commonjs": Specifies the module system to use.
  • outDir: "dist": Specifies the output directory for the compiled JavaScript files.
  • strict: true: Enables strict type checking.
  • esModuleInterop: true: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: true: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: true: Enforces consistent casing in file names.
  • include: ["src/**/*"]: Specifies which files to include in the compilation.

Creating the HTML (index.html)

Create an index.html file in the root directory. This file will contain the basic structure and layout of your Tic-Tac-Toe game. Here’s a simple example:

<!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>
    <div id="game-board"></div>
    <button id="reset-button">Reset Game</button>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML sets up the basic structure:

  • A title for the game.
  • A <div> with the id “game-board” where the game board will be displayed.
  • A button with the id “reset-button” to reset the game.
  • A link to a stylesheet (style.css) – we’ll create this later.
  • A script tag that links to the compiled JavaScript file (dist/index.js).

Styling the Game (style.css)

Create a style.css file in the root directory. This file will hold the CSS for your game’s visual appearance. Add the following CSS rules to start with:

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    gap: 5px;
    margin-bottom: 20px;
}

.cell {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 3em;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}

.cell:hover {
    background-color: #eee;
}

#reset-button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
}

This CSS provides basic styling for the game board, cells, and reset button. You can customize the styles to your liking.

Writing the TypeScript Code (src/index.ts)

Now, let’s write the TypeScript code that will handle the game logic. Open src/index.ts and start by defining the necessary types and variables.


// Define the game board as a 2D array of strings (X, O, or '')
let board: string[][] = [
  ['', '', ''],
  ['', '', ''],
  ['', '', ''],
];

// Define the current player (X or O)
let currentPlayer: string = 'X';

// Get references to HTML elements
const gameBoard = document.getElementById('game-board') as HTMLElement;
const resetButton = document.getElementById('reset-button') as HTMLButtonElement;

Here, we’ve declared:

  • board: A 2D array representing the Tic-Tac-Toe board. Each element will hold “X”, “O”, or an empty string.
  • currentPlayer: A string variable to keep track of the current player (“X” or “O”).
  • gameBoard and resetButton: Variables to hold references to the game board div and the reset button, respectively.

Next, let’s create the game board in the HTML.


function createBoard() {
  if (!gameBoard) return;
  // Clear any existing content
  gameBoard.innerHTML = '';

  for (let row = 0; row < 3; row++) {
    for (let col = 0; col < 3; col++) {
      const cell = document.createElement('div');
      cell.classList.add('cell');
      cell.dataset.row = row.toString();
      cell.dataset.col = col.toString();
      cell.addEventListener('click', handleCellClick);
      gameBoard.appendChild(cell);
    }
  }
}

This function does the following:

  • Clears the content of the gameBoard div.
  • Iterates through the rows and columns to create nine cells.
  • Adds the class “cell” to each cell for styling.
  • Sets data attributes (data-row and data-col) to identify each cell’s position.
  • Adds a click event listener to each cell, calling the handleCellClick function when clicked.
  • Appends each cell to the gameBoard.

Now, implement the handleCellClick function to handle player moves.


function handleCellClick(event: Event) {
  const target = event.target as HTMLElement;
  const row = parseInt(target.dataset.row || '0');
  const col = parseInt(target.dataset.col || '0');

  // Check if the cell is already occupied
  if (board[row][col] !== '') {
    return; // Cell is already occupied
  }

  // Update the board and the UI
  board[row][col] = currentPlayer;
  target.textContent = currentPlayer;

  // Check for a winner or a draw
  if (checkWinner()) {
    alert(`Player ${currentPlayer} wins!`);
    resetGame();
  } else if (checkDraw()) {
    alert("It's a draw!");
    resetGame();
  } else {
    // Switch players
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
  }
}

This function does the following:

  • Gets the row and column of the clicked cell using the data attributes.
  • Checks if the cell is already occupied.
  • Updates the board array with the current player’s mark.
  • Updates the cell’s text content in the UI.
  • Calls checkWinner() and checkDraw() to determine if the game is over.
  • If the game is over, displays an alert and resets the game.
  • If the game continues, switches to the other player.

Let’s implement the checkWinner function:


function checkWinner(): boolean {
  // Check rows
  for (let i = 0; i < 3; i++) {
    if (board[i][0] !== '' && board[i][0] === board[i][1] && board[i][0] === board[i][2]) {
      return true;
    }
  }

  // Check columns
  for (let i = 0; i < 3; i++) {
    if (board[0][i] !== '' && board[0][i] === board[1][i] && board[0][i] === board[2][i]) {
      return true;
    }
  }

  // Check diagonals
  if (board[0][0] !== '' && board[0][0] === board[1][1] && board[0][0] === board[2][2]) {
    return true;
  }
  if (board[0][2] !== '' && board[0][2] === board[1][1] && board[0][2] === board[2][0]) {
    return true;
  }

  return false;
}

This function checks for a winner by:

  • Checking all rows.
  • Checking all columns.
  • Checking both diagonals.

If any of these conditions are met, it returns true (indicating a winner), otherwise, it returns false.

Now, let’s implement the checkDraw function:


function checkDraw(): boolean {
  for (let row = 0; row < 3; row++) {
    for (let col = 0; col < 3; col++) {
      if (board[row][col] === '') {
        return false; // If any cell is empty, it's not a draw
      }
    }
  }
  return !checkWinner(); // If all cells are filled and there's no winner, it's a draw
}

This function checks for a draw by:

  • Iterating through the board and checking if any cell is empty. If an empty cell is found, it means the game is not a draw, and it returns false.
  • If all cells are filled, it calls checkWinner(). If there is no winner, it returns true (indicating a draw).

Finally, implement the resetGame function:


function resetGame() {
  board = [
    ['', '', ''],
    ['', '', ''],
    ['', '', ''],
  ];
  currentPlayer = 'X';
  createBoard(); // Recreate the board to clear the UI
}

This function resets the game by:

  • Resetting the board array to its initial state (all empty cells).
  • Setting the currentPlayer back to “X”.
  • Calling createBoard() to redraw the game board in the UI.

Add an event listener to the reset button to call the resetGame function when clicked.


if (resetButton) {
  resetButton.addEventListener('click', resetGame);
}

Finally, call the createBoard() function to initialize the game board when the script loads.


createBoard();

Compiling and Running the Game

Now that you’ve written the TypeScript code and created the HTML and CSS, it’s time to compile and run the game.

Open your terminal, navigate to your project directory, and run the following command to compile your TypeScript code:

tsc

This command will use the TypeScript compiler (tsc) to generate a dist folder containing the compiled JavaScript file (index.js). The compiler will also perform type checking, catching any potential errors in your code.

To run the game, open index.html in your web browser. You should see the Tic-Tac-Toe board, and you should be able to click on the cells to start playing.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them when building a Tic-Tac-Toe game in TypeScript:

  • Incorrect Type Definitions: Make sure you correctly define the types of your variables. Using string[][] for the board and `HTMLButtonElement` for the reset button are good examples. Incorrect types can lead to unexpected behavior and errors.
  • Event Listener Issues: Ensure your event listeners are correctly attached to the HTML elements. Double-check that you’re using the correct element IDs and that the event listener functions are properly defined.
  • Off-by-One Errors: When working with arrays, it’s easy to make off-by-one errors (e.g., accessing an index that’s out of bounds). Carefully check your loop conditions and array indexing.
  • Incorrect Game Logic: Review your checkWinner() and checkDraw() functions to ensure they correctly identify winning conditions and draw scenarios. Test these functions thoroughly.
  • Missing or Incorrect CSS: Ensure your CSS is correctly linked and that you are using the correct class names to style your elements.

Key Takeaways and Next Steps

Congratulations! You’ve successfully built a Tic-Tac-Toe game using TypeScript. Here’s what you’ve learned:

  • How to set up a TypeScript project.
  • How to define types and variables.
  • How to handle user input.
  • How to implement game logic.
  • How to update the user interface.

Here are some ideas for further development:

  • Implement AI: Add an AI opponent that can play against the user.
  • Add Scorekeeping: Keep track of the players’ scores.
  • Improve UI: Enhance the game’s visual appearance with CSS.
  • Add Sound Effects: Incorporate sound effects to make the game more engaging.
  • Implement Multiplayer: Allow two players to play the game on the same device or online.

FAQ

Here are some frequently asked questions about building a Tic-Tac-Toe game with TypeScript:

Q: Why use TypeScript for this project?

A: TypeScript provides type safety, which helps catch errors early in development. It also makes your code more readable and maintainable. Using TypeScript can save time and prevent bugs.

Q: How can I debug my TypeScript code?

A: You can use your browser’s developer tools to debug your JavaScript code. Set breakpoints in your compiled JavaScript files (in the dist folder) and step through the code to identify and fix issues. Most code editors also have debugging tools that integrate with the browser’s debugger.

Q: How can I deploy my game online?

A: You can deploy your game on platforms like GitHub Pages, Netlify, or Vercel. You’ll need to build your TypeScript code (tsc) and then upload the HTML, CSS, and JavaScript files to the platform of your choice.

Q: What are some good resources for learning more about TypeScript?

A: The official TypeScript documentation (https://www.typescriptlang.org/docs/) is an excellent resource. You can also find many tutorials and courses on websites like Udemy, Coursera, and freeCodeCamp.

Q: How can I make my game responsive?

A: Use CSS media queries to adjust the game’s layout and styling based on the screen size. This will ensure that your game looks good on different devices (desktops, tablets, and phones).

This tutorial provides a solid foundation for understanding how to build interactive games with TypeScript. By working through this project, you’ve gained practical experience with essential programming concepts and the benefits of using TypeScript. The skills learned here can be applied to create more complex and exciting applications. Keep practicing, experimenting, and building on what you’ve learned to expand your skillset and create even more amazing projects. The world of software development is vast, and every project you undertake brings you closer to mastering this powerful and versatile language. Keep exploring and keep coding, and you’ll find yourself capable of creating more sophisticated and engaging applications.

More posts