TypeScript Tutorial: Building a Simple Interactive Web-Based Chess Game

Written by

learnmodernjavascript

in

Chess, the game of kings and queens, has captivated minds for centuries. But have you ever considered building your own chess game? In this tutorial, we’ll dive into the world of TypeScript and create a simple, interactive web-based chess game. This project is perfect for beginners and intermediate developers looking to expand their knowledge of TypeScript, object-oriented programming, and front-end development. We’ll break down the process step-by-step, explaining concepts clearly with real-world examples, and providing well-formatted code blocks with comments. Let’s get started and bring the strategy and excitement of chess to life in your browser!

Why Build a Chess Game?

Building a chess game offers a fantastic opportunity to:

  • Learn TypeScript Fundamentals: You’ll practice using types, interfaces, classes, and more.
  • Understand Object-Oriented Programming (OOP): Chess pieces are ideal for modeling with classes and inheritance.
  • Develop Front-End Skills: You’ll interact with HTML, CSS, and JavaScript to create the user interface.
  • Enhance Problem-Solving Abilities: You’ll need to think strategically about game logic and user interaction.

Creating a chess game from scratch may seem daunting, but by breaking it down into manageable steps, you’ll find it’s an incredibly rewarding experience. This tutorial is designed to guide you through each phase, making the learning process both accessible and enjoyable.

Project Setup

Before we start coding, let’s set up our project environment. You’ll need:

  • Node.js and npm (Node Package Manager): These are essential for managing dependencies and running our TypeScript code.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended, but you can use any editor you prefer.
  • Basic HTML, CSS, and JavaScript Knowledge: A foundational understanding of these technologies will be helpful, but not strictly required as we’ll focus on TypeScript.

Step 1: Create a Project Directory

Create a new directory for your project. For example, you could name it “chess-game”.

mkdir chess-game
cd chess-game

Step 2: Initialize npm

Inside your project directory, initialize an npm project. This will create a `package.json` file to manage your project’s dependencies.

npm init -y

Step 3: Install TypeScript

Install TypeScript as a development dependency:

npm install --save-dev typescript

Step 4: Create a `tsconfig.json` file

This file configures the TypeScript compiler. You can generate a basic one using the TypeScript compiler:

npx tsc --init

This will create a `tsconfig.json` file in your project directory. You can customize this file based on your project’s needs. For this tutorial, we will use the default settings, but you can modify them later as you become more familiar with TypeScript. For example, you might want to specify the output directory for compiled JavaScript files.

Step 5: Create your HTML file (index.html)

Create an `index.html` file in your project directory. This will be the main page of your chess game. Add basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chess Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="board"></div>
    <script src="./dist/main.js"></script>
</body>
</html>

Step 6: Create your CSS file (style.css)

Create a `style.css` file in your project directory. Add basic CSS styles to the board:

#board {
    display: grid;
    grid-template-columns: repeat(8, 50px);
    grid-template-rows: repeat(8, 50px);
    width: 400px;
    height: 400px;
    border: 2px solid black;
}

.square {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

.white {
    background-color: #f0d9b5;
}

.black {
    background-color: #b58863;
}

Step 7: Create your TypeScript file (main.ts)

Create a `main.ts` file in your project directory. This is where we’ll write our TypeScript code. Initially, we can start with a simple console log to ensure everything is set up correctly.

console.log("Chess game is starting!");

Step 8: Compile the TypeScript code

In your terminal, run the following command to compile your TypeScript code into JavaScript:

npx tsc

This command will generate a `main.js` file and a `main.js.map` file in a `dist` folder (or whatever output directory you configured in `tsconfig.json`). The `.map` file is for debugging.

Step 9: Run your code

Open `index.html` in your browser. Open the developer console in your browser (usually by right-clicking and selecting “Inspect” or “Inspect Element”) and you should see “Chess game is starting!” printed in the console.

Now that our project is set up, we can move on to the more interesting parts of the chess game.

Modeling Chess Pieces with Classes

In TypeScript, classes provide a blueprint for creating objects. We’ll use classes to represent the chess pieces (Pawn, Rook, Knight, Bishop, Queen, and King). Each piece will have properties like color (white or black) and a way to determine its valid moves.

Step 1: Create a Piece Interface

Let’s start by defining an interface for our chess pieces. This interface will define the common properties and methods that all pieces will have.

interface Piece {
    color: 'white' | 'black';
    position: [number, number]; // [row, column]
    getValidMoves(): [number, number][]; // Returns an array of valid move coordinates
    symbol: string; // e.g., '♜' for black rook
}

Step 2: Create Piece Classes

Now, let’s create the classes for each piece, implementing the `Piece` interface. We’ll start with the `Pawn` class:

class Pawn implements Piece {
    color: 'white' | 'black';
    position: [number, number];
    symbol: string;

    constructor(color: 'white' | 'black', position: [number, number]) {
        this.color = color;
        this.position = position;
        this.symbol = this.color === 'white' ? '♙' : '♟';
    }

    getValidMoves(): [number, number][] {
        const moves: [number, number][] = [];
        const [row, col] = this.position;
        const direction = this.color === 'white' ? -1 : 1; // White pawns move up, black pawns move down

        // Move one square forward
        if (row + direction >= 0 && row + direction < 8) {
            moves.push([row + direction, col]);
        }

        // Add logic for capturing and double-step on the first move

        return moves;
    }
}

Next, let’s look at the `Rook` class:

class Rook implements Piece {
    color: 'white' | 'black';
    position: [number, number];
    symbol: string;

    constructor(color: 'white' | 'black', position: [number, number]) {
        this.color = color;
        this.position = position;
        this.symbol = this.color === 'white' ? '♖' : '♜';
    }

    getValidMoves(): [number, number][] {
        const moves: [number, number][] = [];
        const [row, col] = this.position;

        // Add logic for moving along rows and columns
        // The implementation here will depend on the board state and other pieces

        return moves;
    }
}

Similarly, create the `Knight`, `Bishop`, `Queen`, and `King` classes, each with its own `getValidMoves()` method. The `getValidMoves()` method is the core of the game logic for each piece. It should calculate all possible moves for the piece based on its current position and the rules of chess. For the other pieces, implement the getValidMoves() method to return valid moves, considering the rules of chess.

Common Mistakes:

  • Incorrect Move Logic: Ensure that each piece’s `getValidMoves()` method correctly implements the piece’s movement rules. Test thoroughly.
  • Ignoring Board Boundaries: Make sure your move calculations stay within the bounds of the 8×8 chessboard (rows and columns 0-7).
  • Ignoring Piece Collisions: The code, as it is, does not account for other pieces on the board. You need to handle collisions with other pieces. For example, a pawn can only move one square forward if the square is empty, and it can capture a piece diagonally.

Creating the Chessboard

Now, let’s create the chessboard and populate it with pieces. We’ll need a way to represent the board, render the pieces, and handle user interaction.

Step 1: Board Representation

We’ll use a 2D array to represent the chessboard. Each element of the array will either be a `Piece` object or `null` if the square is empty.

type Board = (Piece | null)[][];

Step 2: Initialize the Board

Create a function to initialize the chessboard with the starting pieces. This function will create instances of each piece and place them in their starting positions.

function initializeBoard(): Board {
    const board: Board = Array(8).fill(null).map(() => Array(8).fill(null));

    // White pieces
    board[7][0] = new Rook('white', [7, 0]);
    board[7][1] = new Knight('white', [7, 1]);
    board[7][2] = new Bishop('white', [7, 2]);
    board[7][3] = new Queen('white', [7, 3]);
    board[7][4] = new King('white', [7, 4]);
    board[7][5] = new Bishop('white', [7, 5]);
    board[7][6] = new Knight('white', [7, 6]);
    board[7][7] = new Rook('white', [7, 7]);
    for (let i = 0; i < 8; i++) {
        board[6][i] = new Pawn('white', [6, i]);
    }

    // Black pieces (mirrored)
    board[0][0] = new Rook('black', [0, 0]);
    board[0][1] = new Knight('black', [0, 1]);
    board[0][2] = new Bishop('black', [0, 2]);
    board[0][3] = new Queen('black', [0, 3]);
    board[0][4] = new King('black', [0, 4]);
    board[0][5] = new Bishop('black', [0, 5]);
    board[0][6] = new Knight('black', [0, 6]);
    board[0][7] = new Rook('black', [0, 7]);
    for (let i = 0; i < 8; i++) {
        board[1][i] = new Pawn('black', [1, i]);
    }

    return board;
}

Step 3: Render the Board in HTML

Create a function to render the board in the HTML. This function will iterate over the `board` array and create the corresponding HTML elements (squares and pieces) and append them to the `#board` div in your HTML.

function renderBoard(board: Board): void {
    const boardElement = document.getElementById('board') as HTMLElement;
    if (!boardElement) return;

    boardElement.innerHTML = ''; // Clear the board

    for (let row = 0; row < 8; row++) {
        for (let col = 0; col < 8; col++) {
            const square = document.createElement('div');
            square.classList.add('square');
            square.classList.add((row + col) % 2 === 0 ? 'white' : 'black');
            square.dataset.row = row.toString();
            square.dataset.col = col.toString();

            const piece = board[row][col];
            if (piece) {
                square.textContent = piece.symbol;
            }

            boardElement.appendChild(square);
        }
    }
}

Step 4: Add Event Listeners for User Interaction

Implement click handlers to allow users to select pieces and move them. You’ll need to keep track of the currently selected piece and highlight possible moves.

let selectedPiece: Piece | null = null;
let selectedPiecePosition: [number, number] | null = null;

function handleSquareClick(row: number, col: number, board: Board): void {
    const clickedPiece = board[row][col];

    if (selectedPiece && selectedPiecePosition) {
        // Attempt to move the piece
        const validMoves = selectedPiece.getValidMoves();
        const isValidMove = validMoves.some(move => move[0] === row && move[1] === col);

        if (isValidMove) {
            // Move the piece
            board[row][col] = selectedPiece;
            board[selectedPiecePosition[0]][selectedPiecePosition[1]] = null;
            selectedPiece = null;
            selectedPiecePosition = null;
            renderBoard(board);
        } else {
            // Deselect the piece
            selectedPiece = null;
            selectedPiecePosition = null;
            renderBoard(board);
        }
    } else if (clickedPiece) {
        // Select the piece
        selectedPiece = clickedPiece;
        selectedPiecePosition = [row, col];
        // Highlight the selected square and valid moves (implementation below)
        highlightPossibleMoves(row, col, board);
    }
}

function highlightPossibleMoves(row: number, col: number, board: Board): void {
    const boardElement = document.getElementById('board') as HTMLElement;
    if (!boardElement) return;

    // Remove any existing highlights
    const squares = boardElement.querySelectorAll('.square');
    squares.forEach(square => square.classList.remove('highlight'));

    const piece = board[row][col];
    if (!piece) return;

    const validMoves = piece.getValidMoves();

    validMoves.forEach(move => {
        const [moveRow, moveCol] = move;
        const square = boardElement.querySelector(`.square[data-row="${moveRow}"][data-col="${moveCol}"]`);
        if (square) {
            square.classList.add('highlight');
        }
    });

    const selectedSquare = boardElement.querySelector(`.square[data-row="${row}"][data-col="${col}"]`);
    if (selectedSquare) {
        selectedSquare.classList.add('highlight-selected');
    }
}

// Add click listeners to the squares
function addEventListeners(board: Board): void {
    const boardElement = document.getElementById('board') as HTMLElement;
    if (!boardElement) return;

    boardElement.addEventListener('click', (event: MouseEvent) => {
        const target = event.target as HTMLElement;
        if (target.classList.contains('square')) {
            const row = parseInt(target.dataset.row || '', 10);
            const col = parseInt(target.dataset.col || '', 10);
            if (!isNaN(row) && !isNaN(col)) {
                handleSquareClick(row, col, board);
            }
        }
    });
}

Step 5: Putting it all together in main.ts

Finally, let’s bring everything together in your `main.ts` file. This is where you’ll initialize the board, render it, and add the event listeners.

// main.ts
// Import Piece and Board types and classes (Pawn, Rook, etc.)

// ... (Piece, Pawn, Rook, etc. class definitions from above)

// ... (initializeBoard, renderBoard, handleSquareClick, addEventListeners functions from above)

// Initialize the game
const board = initializeBoard();
renderBoard(board);
addEventListeners(board);

Common Mistakes:

  • Incorrect Board Rendering: Double-check that your HTML structure and CSS are correctly set up to render the chessboard. Ensure that each square has the correct color and that the pieces are displayed properly.
  • Event Listener Issues: Make sure your event listeners are correctly attached to the squares and that they are correctly capturing click events.
  • Incorrect Data Attributes: Ensure you’re correctly using `dataset.row` and `dataset.col` to store the row and column information for each square.

Adding Game Logic and Advanced Features

Once you have the basic board and piece movement working, you can enhance your chess game with more advanced features. Here are some ideas:

  • Piece Movement Logic: Implement the complete movement logic for each piece, including capturing, castling, and en passant.
  • Game State Management: Keep track of the game’s state (turn, check, checkmate, stalemate).
  • User Interface Enhancements: Add features like:
    • A visual representation of the current turn (White or Black).
    • Highlighting the last move made.
    • A way to indicate when a piece is selected.
    • A “reset” button to start a new game.
  • AI Opponent: Implement a simple AI opponent to play against. This could range from a random move generator to a more sophisticated algorithm like the minimax algorithm.
  • Check and Checkmate Detection: Implement the logic to detect if a player is in check or checkmate. Display appropriate messages to the user.
  • Game Over Conditions: Detect checkmate, stalemate, and other game-over conditions and display the result.
  • Undo/Redo Functionality: Allow players to undo and redo moves.
  • Timer: Add a timer to track each player’s time.

Implementing Pawn Promotion

Pawn promotion is a crucial rule in chess. When a pawn reaches the opposite end of the board, it must be promoted to another piece (Queen, Rook, Bishop, or Knight).

Step 1: Detect Pawn Promotion

In your `handleSquareClick` function, after a move is made, check if a pawn has reached the promotion rank (row 0 for white, row 7 for black).

if (isValidMove) {
    // Move the piece
    board[row][col] = selectedPiece;
    board[selectedPiecePosition[0]][selectedPiecePosition[1]] = null;

    // Check for pawn promotion
    if (selectedPiece instanceof Pawn) {
        if ((selectedPiece.color === 'white' && row === 0) || (selectedPiece.color === 'black' && row === 7)) {
            // Implement the promotion logic (see below)
            promotePawn(row, col, selectedPiece.color, board);
        }
    }

    selectedPiece = null;
    selectedPiecePosition = null;
    renderBoard(board);
}

Step 2: Create a `promotePawn` function

This function will handle the pawn promotion. It should:

  1. Prompt the player to choose a piece to promote to (e.g., using a modal or a dropdown).
  2. Replace the pawn on the board with the chosen piece.
function promotePawn(row: number, col: number, color: 'white' | 'black', board: Board): void {
    // Prompt the user to choose a piece (e.g., using a prompt or a modal)
    const pieceType = prompt("Promote pawn to (Q, R, B, or N):")?.toUpperCase();

    if (!pieceType) return; // User cancelled

    let promotedPiece: Piece | null = null;
    switch (pieceType) {
        case 'Q':
            promotedPiece = new Queen(color, [row, col]);
            break;
        case 'R':
            promotedPiece = new Rook(color, [row, col]);
            break;
        case 'B':
            promotedPiece = new Bishop(color, [row, col]);
            break;
        case 'N':
            promotedPiece = new Knight(color, [row, col]);
            break;
        default:
            alert("Invalid piece type.");
            return;
    }

    if (promotedPiece) {
        board[row][col] = promotedPiece;
        renderBoard(board);
    }
}

Implementing Castling

Castling is a special move in chess involving the king and one of the rooks. It allows the king to move two squares towards a rook, and the rook then jumps over the king to the adjacent square.

Step 1: Check Castling Conditions

Before allowing castling, check the following conditions:

  • The king and the chosen rook must not have moved previously in the game.
  • There must be no pieces between the king and the chosen rook.
  • The king must not be in check.
  • The king must not pass through a square that is under attack.

Step 2: Add Castling Logic

In your `getValidMoves()` method for the `King` class, include the castling logic. This involves checking the conditions above, and if they are met, adding the castling move to the list of valid moves.

Step 3: Implement the Move

When the user clicks on the castling move, update the board by moving both the king and the rook to their new positions.

Implementing Check and Checkmate Detection

Detecting check and checkmate is more complex and involves several steps:

  1. Check Detection: After each move, determine if the current player’s king is under attack. Iterate through the opponent’s pieces and check if any of their valid moves can capture the king.
  2. Checkmate Detection: If the king is in check, determine if the player has any valid moves to escape the check. If the king is in check and has no valid moves, it’s checkmate.

To implement this, you’ll need to create functions like `isKingInCheck()`, `getLegalMoves()`, and `isCheckmate()`. These functions will require iterating through the board, analyzing piece positions, and simulating potential moves.

Testing and Debugging

Testing your chess game is crucial to ensure that all the rules are correctly implemented and that the game functions as expected. Here are some testing strategies:

  • Unit Tests: Write unit tests for your piece classes. Test that each piece’s `getValidMoves()` method returns the correct moves for different scenarios.
  • Integration Tests: Test the interaction between different parts of your code (e.g., moving pieces, capturing pieces, and detecting check).
  • Manual Testing: Play the game manually and test different scenarios to identify any bugs.
  • Use the Browser’s Debugger: Use your browser’s developer tools to set breakpoints, inspect variables, and step through your code to find and fix bugs.
  • Console Logging: Use `console.log()` statements to output the values of variables, the results of function calls, and the state of the board. This can help you track down where errors are occurring.

Common Debugging Tips

  • Use the Console: The browser’s console is your best friend. Use `console.log()` to print the values of variables and the results of function calls.
  • Set Breakpoints: Set breakpoints in your code to pause execution and inspect the state of your variables.
  • Read Error Messages: Carefully read the error messages in the console. They often provide valuable clues about what went wrong.
  • Simplify the Problem: If you encounter a bug, try to simplify the problem by removing unnecessary code or isolating the problematic part.
  • Rubber Duck Debugging: Explain your code line by line to a rubber duck (or a friend). The act of explaining your code can often help you identify the bug.

SEO Best Practices for Your Chess Game Tutorial

To help your tutorial rank well on search engines like Google and Bing, follow these SEO best practices:

  • Keyword Research: Identify relevant keywords that people search for (e.g., “build chess game with TypeScript”, “TypeScript chess tutorial”, “web-based chess game”).
  • Title Optimization: Use your primary keyword in the title of your article. Keep the title concise and engaging. (Example: “TypeScript Tutorial: Build a Chess Game”)
  • Meta Description: Write a compelling meta description (under 160 characters) that summarizes your tutorial and includes your primary keyword.
  • Heading Tags: Use heading tags (H2, H3, H4) to structure your content and make it easy to read.
  • Content Quality: Write high-quality, original content that is informative, well-structured, and easy to understand.
  • Internal Linking: Link to other relevant articles on your blog.
  • Image Optimization: Use descriptive alt text for your images.
  • Mobile-Friendliness: Ensure your tutorial is responsive and looks good on all devices.
  • Keep Content Updated: Regularly review and update your tutorial to ensure its accuracy and relevance.

Key Takeaways

  • You’ve learned how to set up a TypeScript project and compile TypeScript code.
  • You’ve modeled chess pieces using classes and interfaces.
  • You’ve created a chessboard representation and rendered it in HTML.
  • You’ve implemented basic user interaction to select and move pieces.
  • You’ve been introduced to advanced features like pawn promotion and castling.
  • You’ve gained insights into testing, debugging, and SEO best practices.

FAQ

Q: What are the main advantages of using TypeScript for this project?

A: TypeScript provides static typing, which helps catch errors during development, improves code readability, and makes your code more maintainable. It also offers features like object-oriented programming (OOP) that make modeling complex entities like chess pieces much easier.

Q: How can I add an AI opponent to my chess game?

A: You can implement an AI opponent using various algorithms. A simple approach is to use a random move generator. For a more challenging opponent, you can use algorithms like the minimax algorithm or the alpha-beta pruning algorithm, which analyze possible moves and choose the best one based on a scoring system.

Q: What are some common mistakes to avoid when building a chess game?

A: Common mistakes include incorrect move logic, ignoring board boundaries, neglecting piece collisions, and not handling game state correctly (check, checkmate, stalemate). Thorough testing is crucial to catch these types of errors.

Q: How can I improve the user interface of my chess game?

A: You can improve the user interface by adding visual cues (e.g., highlighting the last move made), providing information about the current turn, and adding features like a reset button and an undo/redo option. Consider using CSS for styling and making the game responsive.

Q: Where can I find more resources to learn about chess game development?

A: You can find more resources online through tutorials, documentation, and open-source chess game projects. Websites like GitHub, Stack Overflow, and online coding platforms are great resources for learning and finding code examples.

Building a chess game in TypeScript is a challenging but rewarding project. It allows you to delve into object-oriented programming, front-end development, and game logic. While this tutorial provides a foundation, the journey of building a complete chess game is ongoing. As you continue to refine your game, you’ll gain a deeper understanding of TypeScript, game development principles, and the intricacies of chess itself. Embrace the learning process, experiment with different features, and enjoy the satisfaction of creating your own digital chess world. The skills you gain from this project will be invaluable as you tackle more complex software development endeavors. Keep coding, keep learning, and your chess game will evolve into a testament to your skills and perseverance.

More posts