TypeScript Tutorial: Build a Simple Interactive Number Guessing Game

Written by

learnmodernjavascript

in

Are you ready to dive into the world of TypeScript and build something fun and engaging? This tutorial will guide you through creating a simple, interactive number guessing game. It’s a fantastic way to learn the fundamentals of TypeScript, including variables, data types, control flow, and user interaction. The best part? You’ll have a working game to show off at the end!

Why Build a Number Guessing Game?

Building a number guessing game is more than just a fun project; it’s a practical exercise in applying core programming concepts. It allows you to:

  • Practice fundamental TypeScript syntax: You’ll work with variables, functions, conditional statements, and loops.
  • Understand user input and output: You’ll learn how to get input from the user and provide feedback.
  • Develop problem-solving skills: You’ll break down a larger problem into smaller, manageable parts.
  • See immediate results: You’ll create a working game that you can play and share.

This tutorial is designed for beginners to intermediate developers. If you’re new to TypeScript, don’t worry! We’ll explain everything step-by-step. If you have some experience, this will be a great refresher and a chance to solidify your understanding.

Getting Started: Setting Up Your Environment

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

  • Node.js and npm (Node Package Manager): These are essential for running TypeScript and managing project dependencies. You can download them from nodejs.org.
  • A code editor: Choose your favorite! Popular options include Visual Studio Code (VS Code), Sublime Text, and Atom. VS Code is highly recommended due to its excellent TypeScript support.
  • TypeScript compiler: We’ll install this using npm.

Step-by-step setup:

  1. Create a project directory: Open your terminal or command prompt and create a new directory for your project. For example, you can name it “number-guessing-game”: 
    mkdir number-guessing-game
cd number-guessing-game
  2. Initialize a Node.js project: Inside your project directory, run the following command to initialize a Node.js project. This will create a `package.json` file. 
    npm init -y
  3. Install TypeScript globally: Install the TypeScript compiler globally using npm: 
    npm install -g typescript

    This allows you to use the `tsc` command from your terminal. However, for this project, we’ll install it locally as a dev dependency.

  4. Install TypeScript locally as a dev dependency: 
    npm install --save-dev typescript
  5. Create a `tsconfig.json` file: This file configures the TypeScript compiler. Run the following command in your project directory: 
    tsc --init

    This will create a `tsconfig.json` file with default settings. You can customize these settings later if needed.

  6. Create your TypeScript file: Create a file named `game.ts` (or any name you prefer with the `.ts` extension) in your project directory. This is where we’ll write our game logic.

Writing the Game Logic

Now, let’s write the code for our number guessing game. We’ll break it down into smaller, manageable parts.

1. Generate a Random Number

First, we need to generate a random number that the user will try to guess. We’ll use the `Math.random()` function to generate a random number between 0 and 1, and then scale it to our desired range (e.g., 1 to 100).

// game.ts

// Generate a random number between 1 and 100
const secretNumber: number = Math.floor(Math.random() * 100) + 1;

Explanation:

  • `const secretNumber: number`: This declares a constant variable named `secretNumber` and specifies its data type as `number`. Using `const` means the value of `secretNumber` cannot be changed after it is initialized.
  • `Math.random() * 100`: This generates a random floating-point number between 0 (inclusive) and 100 (exclusive).
  • `Math.floor(…)`: This rounds the random number down to the nearest integer.
  • `+ 1`: This adds 1 to the result, ensuring the random number is between 1 and 100 (inclusive).

2. Get User Input

Next, we need to get the user’s guess. We’ll use the `prompt()` function, which displays a dialog box to ask the user for input. Keep in mind that `prompt()` returns a string, so we’ll need to convert it to a number.


// Get user input
function getUserGuess(): number {
  const guessString: string | null = prompt("Guess a number between 1 and 100:");

  // Handle null or empty input
  if (guessString === null || guessString.trim() === "") {
    return NaN; // Or handle the error differently, e.g., throw an error.
  }

  const guess: number = parseInt(guessString, 10);

  // Check if the input is a valid number
  if (isNaN(guess)) {
    return NaN; // Or handle the error differently
  }

  return guess;
}

Explanation:

  • `function getUserGuess(): number`: This defines a function named `getUserGuess` that returns a `number`.
  • `prompt(“Guess a number between 1 and 100:”)`: This displays a prompt box asking the user to enter their guess. The return type of `prompt` is `string | null` in TypeScript. We must handle the `null` case if the user cancels the prompt.
  • `if (guessString === null || guessString.trim() === “”)`: This checks if the user cancelled the prompt (`null`) or entered an empty string. If so, it returns `NaN` (Not a Number) to indicate invalid input. `trim()` removes leading/trailing whitespace.
  • `parseInt(guessString, 10)`: This converts the user’s input (a string) to an integer (base 10).
  • `isNaN(guess)`: This checks if the converted input is a valid number. If the user enters something that can’t be converted to a number, `parseInt` will return `NaN`.
  • The function returns the parsed number or `NaN` if the input is invalid.

3. Compare the Guess with the Secret Number

Now, we’ll compare the user’s guess with the secret number and provide feedback.


// game.ts (continued)

function checkGuess(guess: number, secretNumber: number): string {
  if (isNaN(guess)) {
    return "Invalid input. Please enter a number.";
  }

  if (guess === secretNumber) {
    return "Congratulations! You guessed the number!";
  } else if (guess < secretNumber) {
    return "Too low! Try again.";
  } else {
    return "Too high! Try again.";
  }
}

Explanation:

  • `function checkGuess(guess: number, secretNumber: number): string`: This function takes the user’s guess and the secret number as input and returns a string indicating the result.
  • `if (isNaN(guess))`: Checks if the guess is a valid number.
  • `if (guess === secretNumber)`: Compares the guess with the secret number.
  • `else if (guess < secretNumber)`: Checks if the guess is too low.
  • `else`: If the guess is not equal to the secret number and not too low, it must be too high.

4. Implement the Game Loop

We’ll now create the main game loop that allows the user to make multiple guesses until they guess the correct number.


// game.ts (continued)

function playGame() {
  let attempts: number = 0;
  const maxAttempts: number = 7; // Or any number you want

  while (attempts < maxAttempts) {
    const guess: number = getUserGuess();
    const feedback: string = checkGuess(guess, secretNumber);

    alert(feedback);

    if (feedback.includes("Congratulations")) {
      break; // Exit the loop if the user guessed correctly
    }

    attempts++;
  }

  if (attempts === maxAttempts) {
    alert(`You ran out of attempts. The number was ${secretNumber}.`);
  }
}

Explanation:

  • `function playGame()`: This function encapsulates the game’s logic.
  • `let attempts: number = 0`: Initializes a variable to keep track of the number of attempts. We use `let` because the value of `attempts` will change.
  • `const maxAttempts: number = 7`: Sets the maximum number of attempts allowed.
  • `while (attempts < maxAttempts)`: This loop continues as long as the user has attempts remaining.
  • `const guess: number = getUserGuess()`: Gets the user’s guess.
  • `const feedback: string = checkGuess(guess, secretNumber)`: Checks the guess and gets feedback.
  • `alert(feedback)`: Displays the feedback to the user.
  • `if (feedback.includes(“Congratulations”))`: Checks if the user guessed correctly. If so, the `break` statement exits the loop.
  • `attempts++`: Increments the attempt counter.
  • The final `if` statement checks if the user ran out of attempts and reveals the secret number.

5. Run the Game

Finally, we need to call the `playGame()` function to start the game.


// game.ts (continued)

playGame();

Putting it all together: Complete code for `game.ts`


// game.ts

// Generate a random number between 1 and 100
const secretNumber: number = Math.floor(Math.random() * 100) + 1;

// Get user input
function getUserGuess(): number {
  const guessString: string | null = prompt("Guess a number between 1 and 100:");

  // Handle null or empty input
  if (guessString === null || guessString.trim() === "") {
    return NaN; // Or handle the error differently, e.g., throw an error.
  }

  const guess: number = parseInt(guessString, 10);

  // Check if the input is a valid number
  if (isNaN(guess)) {
    return NaN; // Or handle the error differently
  }

  return guess;
}

// Check the guess
function checkGuess(guess: number, secretNumber: number): string {
  if (isNaN(guess)) {
    return "Invalid input. Please enter a number.";
  }

  if (guess === secretNumber) {
    return "Congratulations! You guessed the number!";
  } else if (guess < secretNumber) {
    return "Too low! Try again.";
  } else {
    return "Too high! Try again.";
  }
}

// Play the game
function playGame() {
  let attempts: number = 0;
  const maxAttempts: number = 7; // Or any number you want

  while (attempts < maxAttempts) {
    const guess: number = getUserGuess();
    const feedback: string = checkGuess(guess, secretNumber);

    alert(feedback);

    if (feedback.includes("Congratulations")) {
      break; // Exit the loop if the user guessed correctly
    }

    attempts++;
  }

  if (attempts === maxAttempts) {
    alert(`You ran out of attempts. The number was ${secretNumber}.`);
  }
}

playGame();

Compiling and Running Your Game

Now that we’ve written the code, let’s compile and run the game.

  1. Compile the TypeScript code: Open your terminal or command prompt, navigate to your project directory, and run the following command: 
    tsc game.ts

    This will create a `game.js` file, which is the compiled JavaScript version of your TypeScript code.

  2. Run the JavaScript code: You can run the `game.js` file using Node.js. In your terminal, type: 
    node game.js

    This will start the game in your terminal. You’ll be prompted to enter your guesses.

Enhancements and Further Learning

You’ve successfully created a basic number guessing game! Now, let’s explore some ways to enhance it and learn more about TypeScript.

1. Add Difficulty Levels

Let the user choose a difficulty level (e.g., easy, medium, hard) that determines the range of numbers and/or the number of attempts. This involves adding more user interaction and conditional logic.

2. Implement a Scoreboard

Keep track of the user’s score (e.g., number of attempts) and display it after each game. You could store the scores using local storage in the browser if you wanted a persistent scoreboard.

3. Improve User Interface

Instead of using `prompt()` and `alert()`, consider using HTML, CSS, and JavaScript to create a more visually appealing and interactive game interface within a web browser. This would involve creating an HTML file with input fields, buttons, and display areas, and writing JavaScript code to handle user interactions and update the display.

4. Use Classes

Refactor your code to use TypeScript classes. For example, you could create a `Game` class to encapsulate the game logic and state.


// Example of a Game class (Conceptual)
class Game {
  private secretNumber: number;
  private attempts: number = 0;
  private maxAttempts: number;

  constructor(maxAttempts: number) {
    this.maxAttempts = maxAttempts;
    this.secretNumber = Math.floor(Math.random() * 100) + 1;
  }

  getUserGuess(): number {
    // ... (same as before)
  }

  checkGuess(guess: number): string {
    // ... (same as before, but using this.secretNumber)
  }

  playRound(): void {
    // ... (game loop logic, using this.getUserGuess(), this.checkGuess(), and this.attempts)
  }

  playGame(): void {
    // ... (calls playRound() in a loop until game over)
  }
}

// To use the class:
const game = new Game(7);
game.playGame();

5. Handle Errors More Gracefully

Instead of just displaying “Invalid input,” provide more specific and user-friendly error messages. For example, tell the user the input must be a number, or that the number must be within a specific range.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when writing a number guessing game in TypeScript, along with how to avoid them:

1. Not Handling Invalid Input

Mistake: Failing to handle cases where the user enters non-numeric input (e.g., text, special characters) in the `prompt()`. This can cause errors or unexpected behavior.

Fix: Always validate user input. Use `parseInt()` to convert the input to a number and check if the result is `NaN` (Not a Number). If it is `NaN`, display an error message and prompt the user to enter a valid number.

2. Forgetting to Convert Input to a Number

Mistake: Treating the user’s input from `prompt()` as a string without converting it to a number. This can lead to incorrect comparisons (e.g., “10” being considered less than “2”).

Fix: Use `parseInt()` or `parseFloat()` to convert the input string to a number before comparing it with the secret number.

3. Incorrect Loop Conditions

Mistake: Using an incorrect condition in the `while` loop that controls the number of attempts. For example, using `attempts <= maxAttempts` instead of `attempts < maxAttempts`, which leads to one extra attempt.

Fix: Carefully consider the loop condition. Make sure it accurately reflects the intended behavior (e.g., limiting the number of attempts). Double-check the logic to ensure the loop terminates correctly.

4. Not Providing Clear Feedback

Mistake: Providing vague feedback to the user, making it difficult for them to guess the number.

Fix: Give clear and concise feedback. Indicate whether the guess is too high or too low. You might even provide hints (e.g., “The number is between 1 and 50”).

5. Not Initializing Variables Correctly

Mistake: Not initializing variables before using them, especially the `attempts` counter.

Fix: Always initialize variables before using them. This prevents unexpected behavior. Initialize `attempts` to 0.

Key Takeaways

  • TypeScript Fundamentals: You’ve used variables, data types, functions, conditional statements, and loops – essential building blocks of any TypeScript program.
  • User Input and Output: You’ve learned how to get input from the user (using `prompt()`) and provide feedback (using `alert()`).
  • Problem Decomposition: You’ve broken down a larger problem (the game) into smaller, more manageable parts (generating a number, getting input, checking the guess, etc.).
  • Error Handling: You’ve learned the importance of validating user input to prevent errors and ensure your program behaves as expected.
  • Code Structure: You’ve seen how to organize your code into functions to improve readability and maintainability.

Frequently Asked Questions (FAQ)

  1. Why use TypeScript instead of JavaScript for this game?

    TypeScript adds static typing, which helps catch errors early in development and improves code maintainability. It also provides features like autocompletion and refactoring, making development more efficient. While this game is simple, the benefits of TypeScript become more pronounced as projects grow in complexity.

  2. How can I run this game in a web browser instead of the terminal?

    To run the game in a web browser, you’d need to modify the code to use HTML, CSS, and JavaScript. You’d replace the `prompt()` and `alert()` functions with HTML input fields, buttons, and display areas. You’d also need to compile your TypeScript code to JavaScript, and then include the JavaScript file in your HTML page.

  3. What are the benefits of using a code editor like VS Code?

    Code editors like VS Code provide features such as syntax highlighting, autocompletion, code formatting, debugging tools, and integration with version control systems (e.g., Git). These features significantly improve your coding experience and productivity.

  4. How can I deploy this game online?

    You can deploy your game online by hosting the HTML, CSS, and JavaScript files on a web server. Services like Netlify, Vercel, and GitHub Pages provide free hosting options. If you’ve enhanced the game with a backend (e.g., for a leaderboard), you’d need to deploy the backend code separately.

  5. What are some good resources for learning more about TypeScript?

    The official TypeScript documentation (typescriptlang.org/docs/) is an excellent resource. You can also find many online tutorials, courses, and books on platforms like Udemy, Coursera, and freeCodeCamp.

Building this number guessing game is just the beginning. The concepts you’ve learned – from handling user input and output to managing program flow – form the foundation for more complex applications. Keep experimenting, keep learning, and don’t be afraid to try new things. The more you practice, the more confident and proficient you’ll become in TypeScript and software development in general. Now, go forth and build something amazing!

More posts