TypeScript Tutorial: Building a Simple Interactive Game of Battleship

Written by

learnmodernjavascript

in

Ahoy, mateys! Ever wanted to build your own digital armada and sink your opponent’s ships? In this tutorial, we’ll dive into the world of TypeScript and create a classic game of Battleship. We’ll build a simple, interactive version that you can play in your browser, learning valuable programming concepts along the way. This isn’t just about coding; it’s about strategic thinking, problem-solving, and the satisfaction of a well-placed torpedo.

Why Battleship? Why TypeScript?

Battleship is a fantastic project for learning because it encapsulates several core programming principles in a fun and engaging way. You’ll work with:

  • Arrays and Data Structures: Representing the game board and ship locations.
  • Functions and Logic: Handling player turns, checking for hits, and determining the winner.
  • User Interface (UI) Interaction: Responding to user input and updating the game display.
  • Object-Oriented Programming (OOP): (Optional, but highly encouraged!) Organizing your code into reusable components.

TypeScript, a superset of JavaScript, adds static typing to the mix. This means the code becomes more predictable, easier to debug, and more maintainable. It helps catch errors early in the development process, saving you time and frustration. Plus, it’s a great skill to have in today’s web development landscape.

Setting Up Your Project

Before we start, you’ll need a few things:

  • Node.js and npm (or yarn): These are essential for managing project dependencies and running TypeScript code. Download them from nodejs.org.
  • A Code Editor: VS Code (code.visualstudio.com) is highly recommended, but any editor will do.
  • Basic HTML, CSS, and JavaScript knowledge: This tutorial will focus on TypeScript, but you’ll need a basic understanding of HTML for the structure and CSS for styling.

Let’s get started:

  1. Create a Project Directory: Open your terminal or command prompt and create a new directory for your Battleship game. For example: mkdir battleship-ts && cd battleship-ts
  2. Initialize npm: Inside your project directory, run: npm init -y (This creates a `package.json` file.)
  3. Install TypeScript: Run: npm install typescript --save-dev (This installs TypeScript as a development dependency.)
  4. Create a TypeScript Configuration File: Run: npx tsc --init (This creates a `tsconfig.json` file. This file configures how TypeScript compiles your code.)
  5. Create Project Files: Create an `index.html`, `style.css`, and `src/index.ts` file in your project directory. The `src` directory will hold our TypeScript code.

Coding the Game Logic (src/index.ts)

Now, let’s write some code! We’ll start with the core game logic. We’ll break this down into smaller, manageable chunks.

1. Defining Data Structures

First, let’s define the data structures that will represent our game. We’ll need a way to represent the game board, the ships, and the player’s guesses.

// Define the size of the board
const BOARD_SIZE = 10;

// Define ship types and their lengths
const SHIP_TYPES = {
    carrier: 5,
    battleship: 4,
    cruiser: 3,
    submarine: 3,
    destroyer: 2,
};

// Represents a single cell on the board
interface Cell {
    row: number;
    col: number;
    isHit: boolean;
}

// Represents a ship
interface Ship {
    type: keyof typeof SHIP_TYPES; // Use keyof to ensure ship type exists in SHIP_TYPES
    length: number;
    locations: Cell[]; // Array of cells occupied by the ship
    isSunk: boolean;
}

// Represents the game board
interface Board {
    grid: (Ship | null)[][]; // 2D array of ships or null
    ships: Ship[];
}

Explanation:

  • BOARD_SIZE: Defines the size of the board (e.g., 10×10).
  • SHIP_TYPES: An object containing the ship types and their lengths. Using an object like this makes it easy to add or modify ship types. The `keyof typeof SHIP_TYPES` type is a crucial part of type safety, ensuring that you can only use valid ship types.
  • Cell: An interface for each cell on the board, storing the row, column, and a boolean indicating if it has been hit.
  • Ship: An interface that holds the ship’s details (type, length, locations, and sunk status). The `locations` property stores an array of `Cell` objects, representing where the ship is on the board.
  • Board: An interface to represent the entire game board. The `grid` is a 2D array. Each element of the array can be either a `Ship` object (if a ship occupies that cell) or `null` (if the cell is empty). The board also keeps track of all the ships on the board.

2. Creating the Game Board

Next, let’s create a function to generate the game board. We’ll initialize it with empty cells.


function createBoard(): Board {
    const grid: (Ship | null)[][] = [];
    for (let row = 0; row < BOARD_SIZE; row++) {
        grid[row] = [];
        for (let col = 0; col < BOARD_SIZE; col++) {
            grid[row][col] = null; // Initialize each cell as empty
        }
    }
    return {
        grid,
        ships: [],
    };
}

Explanation:

  • The createBoard function creates a 2D array (the grid) with dimensions BOARD_SIZE x BOARD_SIZE.
  • Each cell in the grid is initially set to null, indicating that it’s empty.
  • The function returns a Board object.

3. Placing Ships

Now, let’s add the functionality to place the ships on the board. This is where things get a bit more complex, as we need to ensure ships don’t overlap and stay within the board boundaries.


function placeShips(board: Board): Board {
    const shipsToPlace = Object.keys(SHIP_TYPES) as (keyof typeof SHIP_TYPES)[]; // Get ship types as an array
    shipsToPlace.forEach(shipType => {
        const shipLength = SHIP_TYPES[shipType];
        let placed = false;

        while (!placed) {
            const orientation = Math.random() < 0.5 ? 'horizontal' : 'vertical'; // Randomly choose orientation
            const row = Math.floor(Math.random() * BOARD_SIZE);
            const col = Math.floor(Math.random() * BOARD_SIZE);
            const ship: Ship = {
                type: shipType,
                length: shipLength,
                locations: [],
                isSunk: false,
            };

            // Calculate ship locations based on orientation
            const locations: Cell[] = [];
            let isValidPlacement = true;

            for (let i = 0; i < shipLength; i++) {
                let currentRow = row;
                let currentCol = col;

                if (orientation === 'horizontal') {
                    currentCol += i;
                } else {
                    currentRow += i;
                }

                // Check if placement is within bounds
                if (currentRow >= BOARD_SIZE || currentCol >= BOARD_SIZE) {
                    isValidPlacement = false;
                    break; // Exit the loop if out of bounds
                }

                const cell: Cell = {
                    row: currentRow,
                    col: currentCol,
                    isHit: false,
                };
                locations.push(cell);

                // Check for ship overlap
                if (board.grid[currentRow][currentCol] !== null) {
                    isValidPlacement = false;
                    break; // Exit the loop if overlapping
                }
            }

            if (isValidPlacement) {
                ship.locations = locations;
                locations.forEach(location => {
                    board.grid[location.row][location.col] = ship;
                });
                board.ships.push(ship);
                placed = true;
            }
        }
    });
    return board;
}

Explanation:

  • The placeShips function iterates through each ship type.
  • It randomly chooses an orientation (horizontal or vertical) and a starting row and column for the ship.
  • It calculates the ship’s locations based on the orientation and length.
  • It checks if the placement is valid:
    • Bounds Check: Ensures the ship doesn’t go off the board.
    • Overlap Check: Ensures the ship doesn’t overlap with any existing ships.
  • If the placement is valid, it updates the board’s grid with the ship and adds the ship to the ships array.
  • The function repeats the process until each ship is successfully placed.

4. Taking a Turn

Now, let’s create the function that handles a player’s turn. This involves taking a guess (row and column), checking if it’s a hit or a miss, and updating the game state.


function takeTurn(board: Board, row: number, col: number): 'hit' | 'miss' | 'sunk' | 'alreadyGuessed' | 'invalid' {
    // Validate input
    if (row < 0 || row >= BOARD_SIZE || col < 0 || col >= BOARD_SIZE) {
        return 'invalid';
    }

    const cell = board.grid[row][col];

    if (cell === null) {
        // Miss
        board.grid[row][col] = { row, col, isHit: true }; // Mark as hit (miss)
        return 'miss';
    } else if (typeof cell === 'object' && 'type' in cell) {
        // Hit
        if (cell.locations.some(loc => loc.row === row && loc.col === col && !loc.isHit)) {
            // Mark hit on the ship location
            cell.locations.forEach(loc => {
                if (loc.row === row && loc.col === col) {
                    loc.isHit = true;
                }
            });
            // Check if the ship is sunk
            const isSunk = cell.locations.every(loc => loc.isHit);
            if (isSunk) {
                cell.isSunk = true;
                return 'sunk';
            } else {
                return 'hit';
            }
        }
    } else if (typeof cell === 'object' && 'isHit' in cell && cell.isHit) {
        // Already guessed
        return 'alreadyGuessed';
    }

    return 'invalid'; // Should not reach here, but good for safety
}

Explanation:

  • Validates the input (row and column) to ensure it’s within the board boundaries.
  • Checks if the cell has already been guessed.
  • If the cell is empty (null), it’s a miss. The cell is marked as hit (miss) to prevent future guesses.
  • If the cell contains a ship (an object with a type property), it’s a hit.
    • Marks the correct location of the ship as hit.
    • Checks if the ship is sunk (all locations hit).
  • Returns a string indicating the result: ‘hit’, ‘miss’, ‘sunk’, ‘alreadyGuessed’, or ‘invalid’.

5. Checking if the Game is Over

We need a function to determine if the game has ended (all ships sunk).


function isGameOver(board: Board): boolean {
    return board.ships.every(ship => ship.isSunk);
}

Explanation:

  • The isGameOver function checks if all ships in the ships array are sunk.
  • It uses the every method to iterate through the ships and returns true only if all ships are sunk.

6. Putting it All Together: The Game Loop

Now, let’s create the game loop. This is the main part of the game that handles the flow of turns, user input, and game state updates. This example uses a very basic command-line style interface. We will enhance it later with HTML and CSS.


import * as readline from 'readline';

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
});

async function playGame() {
    let board = createBoard();
    board = placeShips(board);

    console.log("Welcome to Battleship!");

    while (!isGameOver(board)) {
        // Display the board (simplified for now)
        console.log("  0 1 2 3 4 5 6 7 8 9");
        board.grid.forEach((row, rowIndex) => {
            console.log(rowIndex + " " + row.map(cell => cell ? (cell.isSunk ? 'X' : 'S') : '.').join(' '));
        });

        const answer = await new Promise<string>((resolve) => {
            rl.question("Enter coordinates (row,col): ", resolve);
        });

        const [row, col] = answer.split(',').map(Number);

        const result = takeTurn(board, row, col);
        console.log(result);

        if (result === 'sunk') {
            console.log("You sunk a ship!");
        } else if (result === 'hit') {
            console.log("Hit!");
        } else if (result === 'miss') {
            console.log("Miss!");
        } else if (result === 'alreadyGuessed') {
            console.log("Already guessed that spot.");
        } else if (result === 'invalid') {
            console.log("Invalid coordinates. Try again.");
        }
    }

    console.log("Congratulations! You won!");
    rl.close();
}

playGame();

Explanation:

  • Imports the readline module to handle user input from the command line.
  • Initializes the board and places the ships.
  • The while loop continues until the game is over.
  • Inside the loop:
    • Displays the current state of the board. (Simplified for now – it shows ‘S’ for ship, ‘X’ for sunk ship, and ‘.’ for empty.)
    • Prompts the user to enter coordinates.
    • Calls takeTurn to process the guess.
    • Provides feedback to the user based on the result.
  • Once the game is over, it congratulates the player and closes the input interface.

7. Compiling and Running

To compile and run your code, open your terminal and navigate to your project directory. Then, run the following commands:

  1. Compile: npx tsc (This compiles your TypeScript code into JavaScript.)
  2. Run: node src/index.js (This executes the compiled JavaScript code.)

You should now be able to play the game in your terminal!

Adding a User Interface (index.html & style.css)

While the command-line interface works, it’s not very user-friendly. Let’s create a basic HTML and CSS interface to make the game more visually appealing and interactive.

1. The HTML Structure (index.html)

Create an index.html file with the following content:


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

Explanation:

  • Basic HTML structure with a title and a link to your CSS file.
  • #game-container: A container for the entire game.
  • #board-container: Where the game board will be displayed.
  • #message-container: Where messages (e.g., “Hit!”, “Miss!”) will be displayed.
  • Includes the compiled JavaScript file (src/index.js).

2. Basic CSS Styling (style.css)

Create a style.css file with the following content:


body {
    font-family: sans-serif;
    text-align: center;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

#board-container {
    display: grid;
    grid-template-columns: repeat(10, 30px);
    grid-template-rows: repeat(10, 30px);
    border: 1px solid #ccc;
}

.cell {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
}

.hit {
    background-color: red;
}

.miss {
    background-color: lightblue;
}

#message-container {
    margin-top: 10px;
    font-weight: bold;
}

Explanation:

  • Basic styling for the body, headings, and game container.
  • Styles for the board container using CSS Grid.
  • Styles for the cells, including borders, size, and cursor.
  • Styles for the .hit and .miss classes (which we’ll add dynamically).
  • Styles for the message container.

3. Updating the Game Logic (src/index.ts)

We need to modify our TypeScript code to interact with the HTML elements.

Add these lines at the beginning of your src/index.ts file:


const boardContainer = document.getElementById('board-container') as HTMLDivElement | null;
const messageContainer = document.getElementById('message-container') as HTMLDivElement | null;

Modify the playGame function to reflect the changes:


async function playGame() {
    let board = createBoard();
    board = placeShips(board);

    if (!boardContainer || !messageContainer) {
        console.error('Board container or message container not found.');
        return;
    }

    // Function to render the board
    function renderBoard() {
        boardContainer.innerHTML = ''; // Clear the board
        for (let row = 0; row < BOARD_SIZE; row++) {
            for (let col = 0; col < BOARD_SIZE; col++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.dataset.row = String(row);
                cell.dataset.col = String(col);

                if (board.grid[row][col] !== null && board.grid[row][col]?.isSunk) {
                    cell.classList.add('hit');
                    cell.textContent = 'X';
                } else if (board.grid[row][col] !== null && board.grid[row][col]?.locations.some(loc => loc.row === row && loc.col === col && loc.isHit)) {
                    cell.classList.add('hit');
                    cell.textContent = 'H';
                } else if (board.grid[row][col] !== null && typeof board.grid[row][col] === 'object' && 'isHit' in board.grid[row][col] && board.grid[row][col].isHit) {
                    cell.classList.add('miss');
                    cell.textContent = 'M';
                }

                cell.addEventListener('click', () => {
                    const row = parseInt(cell.dataset.row || '0');
                    const col = parseInt(cell.dataset.col || '0');
                    if (row !== null && col !== null) {
                        takeTurnAndUpdate(row, col);
                    }
                });
                boardContainer.appendChild(cell);
            }
        }
    }

    // Function to handle a turn and update the UI
    async function takeTurnAndUpdate(row: number, col: number) {
        const result = takeTurn(board, row, col);

        if (result === 'sunk') {
            setMessage('You sunk a ship!');
        } else if (result === 'hit') {
            setMessage('Hit!');
        } else if (result === 'miss') {
            setMessage('Miss!');
        } else if (result === 'alreadyGuessed') {
            setMessage('Already guessed that spot.');
        } else if (result === 'invalid') {
            setMessage('Invalid coordinates. Try again.');
        }

        renderBoard(); // Re-render the board to reflect the changes

        if (isGameOver(board)) {
            setMessage('Congratulations! You won!');
        }
    }

    // Function to set the message
    function setMessage(message: string) {
        if (messageContainer) {
            messageContainer.textContent = message;
        }
    }

    renderBoard(); // Initial render
}

Explanation:

  • Gets references to the board-container and message-container elements from the HTML.
  • renderBoard():
    • Clears the existing board content.
    • Iterates through the board grid.
    • For each cell:
      • Creates a <div> element for the cell.
      • Adds the cell class.
      • Sets data attributes (data-row and data-col) for the row and column.
      • Adds the hit class if the cell is part of a sunk ship or has been hit.
      • Adds the miss class if the cell has been missed.
      • Adds an event listener for clicks, and calls the takeTurnAndUpdate function.
      • Appends the cell to the board-container.
  • takeTurnAndUpdate(row, col):
    • Calls the takeTurn function to process the guess.
    • Sets the message based on the result.
    • Re-renders the board to reflect the changes.
    • Checks if the game is over and displays a win message.
  • setMessage(message): Sets the content of the message container.
  • Calls renderBoard() initially to display the empty board.

4. Compile and Run

Recompile your TypeScript code (npx tsc) and open index.html in your browser. You should now see a visual representation of the game board, and you can click on the cells to make guesses. The messages will appear below the board.

Advanced Features and Enhancements

This is a basic Battleship game. You can enhance it with many features:

  • AI Opponent: Implement an AI opponent that makes random or strategic guesses.
  • Ship Placement UI: Allow the user to place their ships on the board before the game starts.
  • More Ship Types: Add more ship types with different lengths.
  • Game Difficulty: Offer different difficulty levels (e.g., smaller board size, fewer ships).
  • Sound Effects: Add sound effects for hits, misses, and sinking ships.
  • Scorekeeping: Track the number of turns it takes to win.
  • Multiplayer: Implement a multiplayer mode where two players can play against each other.
  • Error Handling: Improve error handling and provide more informative messages to the user.

Common Mistakes and How to Fix Them

Here are some common mistakes you might encounter and how to address them:

  • Typo Errors: TypeScript helps prevent typos, but they can still happen. Double-check your variable names, function names, and property names. The TypeScript compiler will usually flag these errors.
  • Incorrect Data Types: Make sure you’re using the correct data types for your variables and function parameters. TypeScript will catch type errors during compilation. Read the error messages carefully; they often pinpoint the exact location of the error.
  • Incorrect Array Indexing: Array indices start at 0. Make sure you’re not trying to access an element outside the bounds of the array (e.g., trying to access index 10 of an array with a length of 10).
  • Uninitialized Variables: Always initialize your variables before you use them. If a variable is not initialized, it will have a default value of undefined, which can lead to unexpected behavior.
  • Incorrect DOM Element Selection: When working with HTML, make sure you’re selecting the correct DOM elements using document.getElementById() or other methods. Double-check your element IDs in your HTML.
  • Event Listener Issues: Make sure your event listeners are correctly attached to the elements you want to interact with. Debugging event listeners can be tricky. Use console.log() statements to check if the event listener is being triggered.

Key Takeaways

  • TypeScript for Type Safety: TypeScript significantly improves code quality, readability, and maintainability by adding static typing.
  • Game Logic Fundamentals: You’ve learned how to represent a game board, handle user input, and implement core game mechanics.
  • UI Development Basics: You’ve gained experience in creating a basic HTML and CSS interface and interacting with it using JavaScript.
  • Problem-Solving: You’ve applied problem-solving skills to break down a complex task into smaller, manageable steps.

FAQ

Here are some frequently asked questions:

  1. Why use TypeScript instead of JavaScript? TypeScript offers several advantages, including static typing, better tooling, improved code organization, and easier debugging. It helps you write more robust and maintainable code.
  2. How can I debug my TypeScript code? You can use your browser’s developer tools (e.g., Chrome DevTools) to debug your JavaScript code. TypeScript code is compiled into JavaScript, so you can set breakpoints and step through the code as you would with regular JavaScript. VS Code also offers excellent debugging support for TypeScript.
  3. How can I make the game more visually appealing? You can use CSS to style the game board, add images, and create animations. Consider using a CSS framework like Bootstrap or Tailwind CSS to speed up the styling process.
  4. Can I add sound effects to the game? Yes! You can use the HTML <audio> element and the JavaScript Audio API to play sound effects when ships are hit, sunk, or when the game ends.

By building this Battleship game, you’ve not only created a fun and engaging project but also solidified your understanding of TypeScript fundamentals, game development principles, and web UI interaction. Remember, the best way to learn is by doing. Keep experimenting, keep coding, and keep building! You’ve successfully navigated the waters of this tutorial, and are now ready to set sail on your own coding adventures. The skills you’ve gained here will serve you well as you explore more complex and exciting projects in the future. The journey of a thousand lines of code begins with a single commit.

More posts