TypeScript Tutorial: Building a Simple Number Guessing Game

Written by

learnmodernjavascript

in

Ever wanted to create your own game? How about a number guessing game? It’s a classic for a reason: simple to understand, fun to play, and a great way to learn the fundamentals of programming. In this tutorial, we’ll build a number guessing game using TypeScript, a superset of JavaScript that adds static typing. We’ll walk through each step, from setting up your project to adding game logic and handling user input. This tutorial is designed for beginners to intermediate developers, so whether you’re new to TypeScript or just looking to sharpen your skills, you’ll find something valuable here.

Why TypeScript?

Before we dive in, let’s briefly discuss why we’re using TypeScript. TypeScript offers several advantages over plain JavaScript, especially for larger projects:

  • Type Safety: TypeScript allows you to define the types of variables, function parameters, and return values. This helps catch errors early in the development process, reducing the likelihood of runtime bugs.
  • Improved Code Readability: Type annotations make your code easier to understand and maintain, as they clearly indicate the expected data types.
  • Enhanced Developer Experience: TypeScript provides better autocompletion, refactoring, and error checking in your IDE, leading to increased productivity.
  • Modern JavaScript Features: TypeScript supports the latest JavaScript features, allowing you to write cleaner and more concise code.

While this game is simple, the principles and practices we’ll use are applicable to more complex projects. By using TypeScript, we’ll build a more robust and maintainable game.

Setting Up Your Project

First, let’s set up our development environment. You’ll need Node.js and npm (Node Package Manager) installed. If you don’t have them, download and install them from https://nodejs.org/.

1. Create a Project Directory: Create a new directory for your project and navigate into it using your terminal:

mkdir number-guessing-game
cd number-guessing-game

2. Initialize npm: Initialize a new npm project:

npm init -y

This creates a `package.json` file, which will manage our project dependencies.

3. Install TypeScript: Install TypeScript as a development dependency:

npm install --save-dev typescript

4. Create a `tsconfig.json` file: This file configures the TypeScript compiler. Run the following command to generate a basic `tsconfig.json` file:

npx tsc --init

Open `tsconfig.json` in your code editor. You can customize various settings, but for this project, we’ll keep the defaults with a few modifications. Make sure these options are set:

  • "module": "commonjs" (or “esnext” if you prefer)
  • "target": "es5" (or “es6” or later for more modern JavaScript)
  • "outDir": "./dist" (This is where the compiled JavaScript files will go)

5. Create the entry point: Create a file named `index.ts` in the root directory. This will be the main file for our game. This is where we’ll write our game logic.

Writing the Game Logic

Now, let’s write the core logic of our number guessing game. Here’s a breakdown of what we need to do:

  • Generate a random number.
  • Prompt the user to guess a number.
  • Compare the user’s guess to the random number.
  • Provide feedback to the user (too high, too low, or correct).
  • Repeat steps 2-4 until the user guesses correctly.

Here’s the code for `index.ts`:

// index.ts
import * as readline from 'readline';

// Create an interface for reading user input from the console.
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

// Generate a random number between 1 and 100.
const randomNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;

console.log('Welcome to the Number Guessing Game!');

// Function to ask the user for a guess and handle the game logic
function askForGuess() {
    attempts++;
    rl.question('Guess a number between 1 and 100: ', (userInput: string) => {
        const userGuess = parseInt(userInput, 10);

        // Input validation: check if the input is a valid number.
        if (isNaN(userGuess)) {
            console.log('Invalid input. Please enter a number.');
            askForGuess(); // Re-prompt the user.
            return;
        }

        // Compare the user's guess with the random number.
        if (userGuess  randomNumber) {
            console.log('Too high!');
            askForGuess(); // Ask again.
        } else {
            console.log(`Congratulations! You guessed the number ${randomNumber} in ${attempts} attempts.`);
            rl.close(); // Close the interface.
        }
    });
}

// Start the game.
askForGuess();

Let’s break down this code:

  • Import `readline` : We import the `readline` module to handle user input from the command line.
  • Create an Interface: We create a `readline` interface to read input from the standard input (keyboard) and write output to the standard output (console).
  • Generate a Random Number: We generate a random integer between 1 and 100 using `Math.random()` and `Math.floor()`.
  • `askForGuess()` Function: This function is the heart of the game. It prompts the user for a guess, validates the input, and provides feedback.
  • Input Validation: We use `isNaN()` to check if the user’s input is a valid number. If not, we print an error message and re-prompt the user.
  • Comparison: We compare the user’s guess to the random number and provide feedback (too low, too high, or correct).
  • Closing the Interface: When the user guesses correctly, we close the `readline` interface using `rl.close()`.
  • Starting the Game: We call `askForGuess()` to start the game.

Compiling and Running the Game

Now, let’s compile and run our game:

1. Compile the TypeScript code: In your terminal, run the following command:

tsc

This command will compile your `index.ts` file and create a `index.js` file in the `dist` directory. If you encounter any errors, review the error messages and fix the code in `index.ts`.

2. Run the game: Navigate to the `dist` folder and run the compiled JavaScript file using Node.js:

cd dist
node index.js

You should see the game prompt in your terminal. Enter your guesses and play the game!

Adding Features and Enhancements

Now that we have a working game, let’s add some features and enhancements to make it more user-friendly and interesting.

1. Limiting Attempts

Let’s limit the number of attempts the user has. We can add a `maxAttempts` variable and track the number of attempts made. Modify `index.ts` as follows:

// index.ts
import * as readline from 'readline';

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

const randomNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
const maxAttempts = 10; // Set the maximum number of attempts.

console.log('Welcome to the Number Guessing Game!');

function askForGuess() {
    attempts++;

    if (attempts > maxAttempts) {
        console.log(`You ran out of attempts! The number was ${randomNumber}.`);
        rl.close();
        return;
    }

    rl.question(`Guess a number between 1 and 100 (Attempt ${attempts}/${maxAttempts}): `, (userInput: string) => {
        const userGuess = parseInt(userInput, 10);

        if (isNaN(userGuess)) {
            console.log('Invalid input. Please enter a number.');
            askForGuess();
            return;
        }

        if (userGuess  randomNumber) {
            console.log('Too high!');
            askForGuess();
        } else {
            console.log(`Congratulations! You guessed the number ${randomNumber} in ${attempts} attempts.`);
            rl.close();
        }
    });
}

askForGuess();

In this updated code, we added `maxAttempts`, and check if the player has exceeded the allowed attempts. If the player runs out of attempts, the game reveals the number and ends.

2. Providing Hints

To make the game more engaging, let’s provide hints. We can tell the user if their guess is close to the correct number. Modify the `askForGuess` function in `index.ts`:

// index.ts
import * as readline from 'readline';

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

const randomNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
const maxAttempts = 10;

console.log('Welcome to the Number Guessing Game!');

function askForGuess() {
    attempts++;

    if (attempts > maxAttempts) {
        console.log(`You ran out of attempts! The number was ${randomNumber}.`);
        rl.close();
        return;
    }

    rl.question(`Guess a number between 1 and 100 (Attempt ${attempts}/${maxAttempts}): `, (userInput: string) => {
        const userGuess = parseInt(userInput, 10);

        if (isNaN(userGuess)) {
            console.log('Invalid input. Please enter a number.');
            askForGuess();
            return;
        }

        const difference = Math.abs(userGuess - randomNumber);

        if (userGuess < randomNumber) {
            console.log('Too low!');
            if (difference  randomNumber) {
            console.log('Too high!');
            if (difference <= 5) {
                console.log('You're getting warmer!');
            }
            askForGuess();
        } else {
            console.log(`Congratulations! You guessed the number ${randomNumber} in ${attempts} attempts.`);
            rl.close();
        }
    });
}

askForGuess();

In the updated code, we calculate the difference between the user’s guess and the random number. If the difference is 5 or less, we provide a “You’re getting warmer!” hint.

3. Adding Difficulty Levels

Let’s add difficulty levels to make the game more customizable. We can offer easy, medium, and hard modes, each with a different number range and number of attempts. Modify `index.ts`:

// index.ts
import * as readline from 'readline';

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

// Define difficulty levels.
interface Difficulty {
    range: [number, number];
    maxAttempts: number;
}

const difficulties: { [key: string]: Difficulty } = {
    easy: { range: [1, 100], maxAttempts: 10 },
    medium: { range: [1, 500], maxAttempts: 15 },
    hard: { range: [1, 1000], maxAttempts: 20 },
};

let difficulty: Difficulty;
let randomNumber: number;
let attempts = 0;

function startGame() {
    rl.question('Choose a difficulty (easy, medium, hard): ', (difficultyChoice: string) => {
        const selectedDifficulty = difficulties[difficultyChoice.toLowerCase()];

        if (!selectedDifficulty) {
            console.log('Invalid difficulty. Please choose easy, medium, or hard.');
            startGame(); // Restart the difficulty selection.
            return;
        }

        difficulty = selectedDifficulty;
        randomNumber = Math.floor(Math.random() * (difficulty.range[1] - difficulty.range[0] + 1)) + difficulty.range[0];
        attempts = 0;

        console.log(`Welcome to the Number Guessing Game (Difficulty: ${difficultyChoice})!`);
        askForGuess();
    });
}

function askForGuess() {
    attempts++;

    if (attempts > difficulty.maxAttempts) {
        console.log(`You ran out of attempts! The number was ${randomNumber}.`);
        rl.close();
        return;
    }

    rl.question(`Guess a number between ${difficulty.range[0]} and ${difficulty.range[1]} (Attempt ${attempts}/${difficulty.maxAttempts}): `, (userInput: string) => {
        const userGuess = parseInt(userInput, 10);

        if (isNaN(userGuess)) {
            console.log('Invalid input. Please enter a number.');
            askForGuess();
            return;
        }

        if (userGuess  randomNumber) {
            console.log('Too high!');
            askForGuess();
        } else {
            console.log(`Congratulations! You guessed the number ${randomNumber} in ${attempts} attempts.`);
            rl.close();
        }
    });
}

startGame();

In this version, we:

  • Define a `Difficulty` interface and an object `difficulties` to store the difficulty levels.
  • Prompt the user to choose a difficulty level using `startGame()`.
  • Adjust the random number generation based on the chosen difficulty.
  • Adapt the prompt message to reflect the current difficulty and range.

Common Mistakes and How to Fix Them

When building a number guessing game (or any program, for that matter), you might encounter some common mistakes. Here’s a look at some of them and how to fix them:

  • Incorrect Input Handling: One of the most common issues is not properly handling user input. For example, if the user enters text instead of a number, your program will crash or behave unexpectedly.
    • Fix: Use `parseInt()` to convert the user’s input to an integer and use `isNaN()` to check if the conversion was successful. Provide clear error messages if the input is invalid.
  • Off-by-One Errors: These errors occur when you miscalculate the range of numbers. For example, if you want a random number between 1 and 100, you might generate a number between 0 and 99.
    • Fix: Double-check the logic used to generate the random number. Ensure you’re including the correct upper and lower bounds. In our example, we use `Math.floor(Math.random() * 100) + 1` to generate a number between 1 and 100 (inclusive).
  • Infinite Loops: If your game logic has a flaw, the game might get stuck in an infinite loop. For example, if the user always enters invalid input, the game might keep prompting them without a way to escape.
    • Fix: Carefully review your code for any conditions that could lead to an infinite loop. Ensure that the loop has a clear exit condition. In our example, the user can escape the loop by entering a valid number or by running out of attempts.
  • Scope Issues: Variables declared inside functions have local scope. If you try to access them outside the function, you’ll get an error.
    • Fix: Declare variables in the correct scope. If you need a variable to be accessible throughout the game, declare it outside of the function where it is used.
  • Incorrect Comparison Operators: Using the wrong comparison operators (e.g., using `=` instead of `==` or `===`) can lead to unexpected behavior.
    • Fix: Carefully review your comparison operators to ensure they are correct. In TypeScript, it’s generally recommended to use `===` (strict equality) to avoid potential type coercion issues.

Key Takeaways

Let’s recap what we’ve learned:

  • We built a number guessing game using TypeScript.
  • We set up a TypeScript project, including installing TypeScript and configuring the `tsconfig.json` file.
  • We wrote the core game logic, including generating a random number, prompting the user for input, validating the input, and providing feedback.
  • We added features like limiting attempts, providing hints, and adding difficulty levels.
  • We discussed common mistakes and how to fix them.

This tutorial provides a solid foundation for building more complex games and applications using TypeScript. You can extend this game further by adding features like a score board, saving high scores, or even a graphical user interface.

FAQ

Here are some frequently asked questions about the number guessing game and TypeScript:

  1. Why use TypeScript for a simple game?
    TypeScript adds type safety, making it easier to catch errors early. It also improves code readability and maintainability. While the game is simple, the practices you learn using TypeScript can be applied to more complex projects.
  2. How do I handle user input in a real-world application?
    In a web application, you’d typically use HTML input elements and JavaScript event listeners to capture user input. Libraries like React, Angular, or Vue.js provide more sophisticated ways to handle user input and build interactive user interfaces.
  3. Can I use this game as a starting point for a larger project?
    Yes, absolutely! You can add features, integrate with databases, or create a web-based version. The core logic of the game can be adapted for various purposes.
  4. What are some other game ideas I can create with TypeScript?
    You could build a simple text-based adventure game, a hangman game, or even a basic card game. The possibilities are endless! The skills you learn here can be adapted to various game types.
  5. Where can I learn more about TypeScript?
    The official TypeScript documentation is an excellent resource: https://www.typescriptlang.org/docs/. You can also find many online tutorials and courses on platforms like Udemy, Coursera, and freeCodeCamp.

The journey of learning to code is often marked by the creation of simple projects that build a foundation of knowledge and understanding. The number guessing game, though seemingly simple, encapsulates several fundamental concepts of programming: user input, conditional logic, random number generation, and iterative processes. The ability to break down a problem, like building this game, into smaller, manageable parts is a core skill for any developer. Each line of code, from setting up the project to implementing the game’s core features, contributes to a greater understanding of how software is built. As you continue to explore TypeScript and other programming languages, remember that every project, no matter its size, is a valuable opportunity to learn, experiment, and grow. Embrace the challenges, celebrate the successes, and keep coding.

More posts