TypeScript Tutorial: Building a Simple Interactive Number Guessing Game

Written by

learnmodernjavascript

in

Ever found yourself staring at a blank screen, yearning to build something more engaging than a ‘Hello, World!’ application? Perhaps you’re a beginner developer eager to solidify your TypeScript skills, or an intermediate coder looking for a fun project to sharpen your abilities. Look no further! This tutorial will guide you through creating a simple, interactive number-guessing game using TypeScript. We’ll break down the concepts in easy-to-understand terms, provide step-by-step instructions, and highlight common pitfalls to avoid. By the end, you’ll have a working game, a deeper understanding of TypeScript, and the satisfaction of building something from scratch.

Why Build a Number Guessing Game?

The number-guessing game is more than just a fun pastime; it’s an excellent learning tool. It allows you to practice fundamental programming concepts like:

  • Variables and data types (numbers, strings)
  • Conditional statements (if/else)
  • Loops (for/while)
  • Functions
  • User input and output
  • Event handling (if you choose to make it interactive in a browser)

Building this game is a fantastic way to reinforce your understanding of these concepts in a practical, engaging way. It also provides a solid foundation for more complex projects.

Setting Up Your Development Environment

Before we dive into the code, let’s ensure you have everything you need. You’ll need:

  • Node.js and npm (Node Package Manager): TypeScript compiles to JavaScript, and Node.js allows you to run JavaScript code on your computer. npm is used to manage project dependencies. You can download them from https://nodejs.org/.
  • TypeScript Compiler: Install it globally using npm: npm install -g typescript
  • A Code Editor: Visual Studio Code, Sublime Text, Atom, or any editor you prefer.

Once you have these installed, create a new directory for your project and navigate into it using your terminal. Then, initialize a new npm project:

mkdir number-guessing-game
cd number-guessing-game
npm init -y

This creates a package.json file, which manages your project’s dependencies and settings.

Initializing TypeScript in Your Project

Now, let’s set up TypeScript in your project:

  1. Create a tsconfig.json file: This file configures the TypeScript compiler. Run the following command in your terminal: tsc --init. This will generate a tsconfig.json file with default settings.
  2. Modify tsconfig.json (Optional but Recommended): Open tsconfig.json in your code editor. You might want to adjust some settings. Here are some common changes:
    • "target": "es5" or "es6": Specifies the JavaScript version to compile to. es5 is widely compatible, while es6 (or newer) supports more modern JavaScript features.
    • "module": "commonjs" or "es2015": Specifies the module system to use. commonjs is common for Node.js projects, while es2015 (or esnext) is used with modern JavaScript modules.
    • "outDir": "./dist": Specifies the output directory for compiled JavaScript files.
    • "sourceMap": true: Generates source maps, which help you debug your TypeScript code in the browser or Node.js.

Here’s a sample tsconfig.json file:

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

Creating the Game Logic (Core TypeScript Code)

Let’s write the core game logic. Create a new directory called src in your project, and inside src, create a file named game.ts. This is where our TypeScript code will reside.

Here’s the code, with detailed comments to explain each part:


// Import the 'readline-sync' library for user input.  If you're using a browser, you'll need a different input method (e.g., HTML input elements).
import * as readlineSync from 'readline-sync';

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

// Initialize the number of attempts.
let attempts = 0;

// Maximum number of attempts allowed.
const maxAttempts = 10;

console.log("Welcome to the Number Guessing Game!");
console.log(`I'm thinking of a number between 1 and 100.  You have ${maxAttempts} attempts.`);

// Game loop: Continues until the player guesses correctly or runs out of attempts.
while (attempts < maxAttempts) {
  // Get the player's guess.
  const guess = parseInt(readlineSync.question("Enter your guess: "));

  // Input validation: Check if the input is a valid number.
  if (isNaN(guess)) {
    console.log("Invalid input. Please enter a number.");
    continue; // Skip to the next iteration of the loop.
  }

  attempts++;

  // Check if the guess is correct, too high, or too low.
  if (guess === secretNumber) {
    console.log(`Congratulations! You guessed the number ${secretNumber} in ${attempts} attempts.`);
    break; // Exit the loop if the guess is correct.
  } else if (guess < secretNumber) {
    console.log("Too low! Try again.");
  } else {
    console.log("Too high! Try again.");
  }

  console.log(`Attempts remaining: ${maxAttempts - attempts}`);
}

// If the player runs out of attempts.
if (attempts === maxAttempts) {
  console.log(`You ran out of attempts. The number was ${secretNumber}.`);
}

Explanation of the Code:

  • Import readline-sync: This line imports a library that allows us to get input from the user in the terminal. You will need to install it: npm install readline-sync. If you are building a browser-based game, you’ll use HTML input elements and JavaScript to get user input.
  • Generate a Random Number: Math.random() generates a random number between 0 and 1. We multiply it by 100 and use Math.floor() to get a whole number between 0 and 99. Adding 1 gives us a number between 1 and 100.
  • Initialize Variables: We declare variables to store the secret number, the number of attempts, and the maximum number of attempts.
  • Game Loop (while loop): The game continues as long as the player has attempts left (attempts < maxAttempts).
  • Get User Input: readlineSync.question() prompts the user to enter their guess and returns it as a string. We use parseInt() to convert the string to a number.
  • Input Validation: We check if the input is a valid number using isNaN(). If it’s not a number, we display an error message and use continue to skip to the next iteration of the loop.
  • Compare the Guess: We compare the player’s guess to the secret number and provide feedback (too low, too high, or correct).
  • Track Attempts: We increment the attempts counter after each guess.
  • Game Over: If the player runs out of attempts, we reveal the secret number.

Compiling and Running Your Game

Now, let’s compile and run the game:

  1. Compile the TypeScript code: Open your terminal, navigate to your project directory, and run the command: tsc. This will compile your game.ts file and generate a game.js file in the dist directory (or whatever output directory you specified in tsconfig.json).
  2. Run the JavaScript code: Use Node.js to run the compiled JavaScript file: node dist/game.js. (Adjust the path if your output directory is different).

You should see the game’s welcome message in your terminal and be prompted to enter your first guess.

Adding Features and Enhancements

Now that you have a basic working game, let’s explore some ways to enhance it:

1. Scorekeeping

Keep track of the player’s score. Award points based on how quickly they guess the number. For example, fewer attempts mean a higher score.


let score = 0;

if (guess === secretNumber) {
  score = maxAttempts - attempts + 1; // Higher score for fewer attempts
  console.log(`Congratulations! You guessed the number ${secretNumber} in ${attempts} attempts. Your score: ${score}`);
  break;
}

2. Difficulty Levels

Allow the player to choose a difficulty level (e.g., easy, medium, hard). This could involve:

  • Changing the range of numbers (1-100 for easy, 1-1000 for hard).
  • Adjusting the number of attempts.

// Example of difficulty levels
let maxNumber = 100;
let maxAttempts = 10;

const difficulty = readlineSync.question("Choose difficulty (easy, medium, hard): ").toLowerCase();

if (difficulty === "medium") {
  maxNumber = 500;
  maxAttempts = 7;
} else if (difficulty === "hard") {
  maxNumber = 1000;
  maxAttempts = 5;
}

const secretNumber = Math.floor(Math.random() * maxNumber) + 1;

3. Hints

Provide hints to the player. For example, after a guess, tell the player whether the secret number is even or odd.


if (guess !== secretNumber) {
  if (secretNumber % 2 === 0) {
    console.log("Hint: The secret number is even.");
  } else {
    console.log("Hint: The secret number is odd.");
  }
}

4. Limiting Input Range

Enhance the input validation to ensure the player’s guess is within the valid range (1-100, or whatever the difficulty level dictates). This prevents unexpected behavior.


if (isNaN(guess) || guess  maxNumber) {
  console.log(`Invalid input. Please enter a number between 1 and ${maxNumber}.`);
  continue;
}

5. Play Again Option

After the game ends, ask the player if they want to play again. Use a while loop to keep the game running until the player chooses to quit.


let playAgain = true;

while (playAgain) {
  // Game logic here...

  const answer = readlineSync.question("Do you want to play again? (yes/no): ").toLowerCase();
  playAgain = answer === "yes";
}

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make, and how to avoid them:

  • Incorrect Input Handling: Forgetting to handle invalid input (e.g., non-numeric input). Always validate user input! Use isNaN() and/or check against expected ranges.
  • Off-by-One Errors: These occur when your loops or comparisons are slightly off. For example, if you generate a random number between 1 and 100, make sure your loop conditions and comparisons correctly handle that range. Test your game thoroughly.
  • Scope Issues: Understanding variable scope (where variables are accessible) is crucial. Declare variables in the appropriate scope (e.g., inside a function if they’re only needed there).
  • Forgetting to Compile: Remember to recompile your TypeScript code (tsc) after making changes before running the game.
  • Incorrect Library Imports: Double-check your import statements. Ensure you’ve installed the necessary libraries (e.g., readline-sync) and that you’re importing them correctly.

Step-by-Step Instructions Summary

Let’s recap the steps involved in creating your number-guessing game:

  1. Set up your environment: Install Node.js, npm, the TypeScript compiler, and a code editor.
  2. Create a new project: Use npm init -y to create a package.json file.
  3. Initialize TypeScript: Use tsc --init to create a tsconfig.json file and configure it (optional).
  4. Install dependencies: Install the readline-sync package (npm install readline-sync).
  5. Create the game.ts file: Write the TypeScript code for the game logic, including generating a random number, getting user input, validating input, comparing guesses, and providing feedback.
  6. Compile the code: Run tsc in your terminal.
  7. Run the game: Run node dist/game.js in your terminal.
  8. Enhance the game: Add features like scorekeeping, difficulty levels, hints, and a play-again option.
  9. Test and Debug: Test your game thoroughly and fix any bugs.

Key Takeaways

  • TypeScript Fundamentals: You’ve used variables, data types, conditional statements, loops, and functions.
  • User Input and Output: You’ve learned how to get input from the user and display output to the console.
  • Code Structure: You’ve organized your code logically, making it easier to read, understand, and maintain.
  • Debugging: You’ve learned how to identify and fix common programming errors.
  • Problem-Solving: You’ve broken down a larger problem (the game) into smaller, manageable parts.

FAQ

  1. How do I handle user input in a browser-based game? You’ll use HTML input elements (e.g., <input type="number">) and JavaScript to get the user’s guess. You’ll also use JavaScript to update the game’s display.
  2. Why is input validation important? Input validation prevents unexpected behavior and errors. It ensures your program receives the data it expects.
  3. How can I make the game more visually appealing? You can use CSS and HTML to style the game’s interface. You can also use JavaScript to add animations and visual effects.
  4. What are some other game ideas I can build with TypeScript? Consider building a simple text-based adventure game, a hangman game, or a simple card game.
  5. Where can I learn more about TypeScript? The official TypeScript documentation (https://www.typescriptlang.org/docs/) is an excellent resource. You can also find many tutorials and courses online.

Building this number-guessing game provides a solid foundation for your TypeScript journey. The principles you’ve learned – from handling user input and validating it, to structuring your code and adding features – are transferable to a wide range of more complex projects. As you continue to practice and experiment, you’ll gain even greater confidence and proficiency in TypeScript. Don’t be afraid to try new things, explore different concepts, and most importantly, have fun while you learn. The world of software development is vast and exciting, and every project you build is a step forward in your journey.

More posts