TypeScript Tutorial: Building a Simple Interactive Web-Based Game

Written by

learnmodernjavascript

in

Ever found yourself staring at a blank screen, yearning to build something interactive but feeling overwhelmed by the complexity of modern web development? You’re not alone! Many developers, especially those just starting out, face this challenge. Building interactive web applications can seem daunting, but with the right tools and a structured approach, it’s entirely achievable. In this tutorial, we’ll dive into TypeScript and create a simple yet engaging web-based game. This tutorial is designed for beginners to intermediate developers, offering a practical, hands-on learning experience. We’ll break down the concepts into manageable chunks, providing clear explanations, real-world examples, and step-by-step instructions. By the end, you’ll not only have a working game but also a solid understanding of TypeScript fundamentals.

Why TypeScript for Game Development?

Before we jump into the code, let’s address the elephant in the room: why TypeScript? TypeScript is a superset of JavaScript that adds static typing. This means you define the types of variables, function parameters, and return values. This seemingly small addition brings significant benefits:

  • Improved Code Readability: Types make your code easier to understand and maintain.
  • Early Error Detection: TypeScript catches errors during development, before you even run your code, saving you time and headaches.
  • Enhanced Code Completion: Your IDE can provide better suggestions and autocompletion.
  • Refactoring Safety: Refactoring becomes safer as TypeScript helps you track down dependencies and potential issues.

While you could build our game in plain JavaScript, TypeScript’s advantages become increasingly valuable as your projects grow in size and complexity. For a simple game like ours, the benefits are clear: cleaner, more maintainable code that’s less prone to errors.

Setting Up Your Development Environment

Let’s get our environment ready. You’ll need:

  • Node.js and npm (or yarn): These are essential for managing packages and running our TypeScript code. Download them from nodejs.org.
  • A Code Editor: VS Code, Sublime Text, or any editor that supports TypeScript will work. VS Code is highly recommended.

Once you have Node.js and npm installed, open your terminal or command prompt and create a new project directory:

mkdir web-game-tutorial
cd web-game-tutorial

Now, initialize a new npm project:

npm init -y

This creates a package.json file, which will track our project dependencies. Next, install TypeScript:

npm install typescript --save-dev

The --save-dev flag indicates that this is a development dependency. Now, let’s create a tsconfig.json file. This file configures the TypeScript compiler. Run the following command:

npx tsc --init

This generates a tsconfig.json file with many options. We’ll customize it for our project. Open tsconfig.json and make the following changes:

{
  "compilerOptions": {
    "target": "es5",  // Or "es6", "esnext" - depends on your target environment
    "module": "commonjs", // Or "esnext", "amd", etc.
    "outDir": "./dist",  // Where compiled JavaScript files will be placed
    "strict": true,       // Enables strict type checking
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Here’s what each of these options means:

  • target: Specifies the JavaScript version to compile to. es5 is widely compatible.
  • module: Specifies the module system to use (e.g., CommonJS for Node.js).
  • outDir: The directory where compiled JavaScript files will be placed.
  • strict: Enables strict type checking, which is highly recommended.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: Skips type checking of declaration files (helps speed up compilation).
  • forceConsistentCasingInFileNames: Enforces consistent casing in filenames.

Finally, create a src directory and a file called index.ts inside it. This is where we’ll write our TypeScript code.

Building the Game: A Simple Number Guessing Game

We’ll create a classic number guessing game. The computer will pick a random number, and the player will try to guess it. Let’s break down the components:

  • Generate a Random Number: The game needs a secret number.
  • Get Player Input: The player needs a way to enter their guess.
  • Compare the Guess: The game checks if the guess is correct, too high, or too low.
  • Provide Feedback: The game gives the player hints.
  • Track Attempts: The game keeps track of how many guesses the player has made.

Let’s start with the code. Open src/index.ts and add the following:


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

// Keep track of the number of attempts
let attempts: number = 0;

// Function to handle the player's guess
function guessNumber() {
  // Get the player's guess from the prompt
  const guessStr: string | null = prompt("Guess a number between 1 and 100:");

  // Check if the player canceled the prompt or entered nothing
  if (guessStr === null || guessStr.trim() === "") {
    alert("You cancelled the game or entered nothing. Goodbye!");
    return;
  }

  // Parse the guess to a number
  const guess: number = parseInt(guessStr, 10);

  // Validate the input
  if (isNaN(guess) || guess  100) {
    alert("Invalid input. Please enter a number between 1 and 100.");
    return guessNumber(); // Recursive call to re-prompt
  }

  attempts++;

  // Compare the guess to the secret number
  if (guess === secretNumber) {
    alert(`Congratulations! You guessed the number ${secretNumber} in ${attempts} attempts.`);
    return;
  } else if (guess < secretNumber) {
    alert("Too low! Try again.");
  } else {
    alert("Too high! Try again.");
  }

  // Recursively call the function until the user guesses correctly
  guessNumber();
}

// Start the game
guessNumber();

Let’s break down this code:

  • secretNumber: This variable stores the random number the player needs to guess. We use Math.random() to generate a random number between 0 and 1, then multiply by 100 and use Math.floor() to get a whole number. Finally, we add 1 to get a number between 1 and 100. The type annotation : number tells TypeScript that this variable will hold a number.
  • attempts: This variable keeps track of the number of guesses the player has made.
  • guessNumber(): This function handles the core game logic.
  • prompt(): This function displays a prompt box to the player, asking them to enter their guess. We check if the user cancels or enters nothing.
  • parseInt(): This function converts the player’s input (which is a string) into a number. We use parseInt(guessStr, 10) to parse the string with base 10 (decimal).
  • Input Validation: We validate the input to ensure it’s a number between 1 and 100. If not, we alert the user and call guessNumber() again to re-prompt.
  • Comparison and Feedback: We compare the player’s guess to the secret number and provide feedback (too high, too low, or correct).
  • Recursion: If the guess is incorrect, we recursively call guessNumber() to continue the game.

Compiling and Running the Game

Now, let’s compile and run our game. Open your terminal and navigate to your project directory. Run the following command:

tsc

This command tells the TypeScript compiler to compile your .ts files into .js files in the dist directory. If everything goes well, you should see a index.js file created in the dist directory. To run the game, you’ll need to use a tool that can execute JavaScript in a browser environment, like a simple HTML file. Create an index.html file in the root of your project directory 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>Number Guessing Game</title>
</head>
<body>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML file includes a script tag that loads the compiled JavaScript file (dist/index.js). Now, open index.html in your web browser. You should see a prompt asking you to guess a number. Play the game! Test different guesses and see how the game responds.

Adding More Features and Enhancements

Our number guessing game is functional, but we can enhance it further. Here are some ideas:

  • Limit the Number of Attempts: Add a maximum number of guesses.
  • Provide Hints: Give hints like “close” or “far” based on the difference between the guess and the secret number.
  • Implement a Scoreboard: Keep track of the player’s scores and display them.
  • Add Difficulty Levels: Allow the player to choose the difficulty (e.g., easy: 1-100, medium: 1-500, hard: 1-1000).
  • Use a User Interface: Instead of using prompt() and alert(), create a visually appealing user interface with HTML and CSS.

Let’s add a limit to the number of attempts. Modify your src/index.ts file as follows:


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

// Keep track of the number of attempts
let attempts: number = 0;
const maxAttempts: number = 7; // Set maximum attempts

// Function to handle the player's guess
function guessNumber() {
  // Get the player's guess from the prompt
  const guessStr: string | null = prompt("Guess a number between 1 and 100 (Attempts left: " + (maxAttempts - attempts) + "):");

  // Check if the player canceled the prompt or entered nothing
  if (guessStr === null || guessStr.trim() === "") {
    alert("You cancelled the game or entered nothing. Goodbye!");
    return;
  }

  // Parse the guess to a number
  const guess: number = parseInt(guessStr, 10);

  // Validate the input
  if (isNaN(guess) || guess  100) {
    alert("Invalid input. Please enter a number between 1 and 100.");
    return guessNumber(); // Recursive call to re-prompt
  }

  attempts++;

  // Check if the player has exceeded the maximum attempts
  if (attempts > maxAttempts) {
    alert(`Game over! You ran out of attempts. The number was ${secretNumber}.`);
    return;
  }

  // Compare the guess to the secret number
  if (guess === secretNumber) {
    alert(`Congratulations! You guessed the number ${secretNumber} in ${attempts} attempts.`);
    return;
  } else if (guess < secretNumber) {
    alert("Too low! Try again.");
  } else {
    alert("Too high! Try again.");
  }

  // Recursively call the function until the user guesses correctly
  guessNumber();
}

// Start the game
guessNumber();

We’ve added a maxAttempts variable and modified the guessNumber() function to check if the player has exceeded the maximum attempts. We’ve also updated the prompt to show the player how many attempts they have left. Compile and run the code again to see the changes.

Common Mistakes and How to Fix Them

Let’s look at some common mistakes beginners make when working with TypeScript and how to avoid them:

  • Ignoring Type Errors: TypeScript’s primary benefit is catching errors. Don’t ignore the error messages in your editor or terminal. Read them carefully and understand what’s wrong. Fix the type mismatches.
  • Using any Too Much: While any can be convenient, it defeats the purpose of TypeScript. Try to avoid it. If you’re unsure of a type, use a more specific type or create a custom type/interface.
  • Incorrect Module Imports: Make sure you’re importing modules correctly. Use relative paths for local files (e.g., import { MyClass } from './my-module';) and install packages with npm before importing them.
  • Forgetting to Compile: Always compile your TypeScript code before running it. Double-check that your build process (e.g., tsc) is working correctly.
  • Not Using Strict Mode: Enable strict mode in your tsconfig.json file to catch more errors. This includes enabling options like strictNullChecks, noImplicitAny, and strictBindCallApply.

Key Takeaways and Best Practices

Here’s a summary of what we’ve covered and some best practices to keep in mind:

  • TypeScript Fundamentals: We’ve used type annotations, variables, functions, and control flow.
  • Project Setup: We set up a basic TypeScript project with npm and a tsconfig.json file.
  • Game Logic: We implemented the core logic for a number guessing game.
  • Error Handling: We validated user input and handled potential errors.
  • Code Readability: TypeScript enhances code readability and maintainability.
  • Type Safety: TypeScript helps catch errors during development.
  • Incremental Adoption: You can start using TypeScript incrementally in your existing JavaScript projects.

Best Practices:

  • Write Clean Code: Follow consistent coding style guidelines.
  • Use Meaningful Variable Names: Make your code easier to understand.
  • Comment Your Code: Explain what your code does.
  • Test Your Code: Write unit tests to ensure your code works as expected.
  • Refactor Regularly: Improve your code over time.

FAQ

Let’s address some frequently asked questions:

  1. What if I don’t want to use prompts? You can easily adapt the game to use HTML elements like input fields and buttons. This would provide a more user-friendly interface.
  2. Can I use this game in a real-world project? Yes, you can adapt the game logic and integrate it into a larger web application. Consider using a framework like React, Angular, or Vue.js for more complex user interfaces.
  3. Where can I learn more about TypeScript? The official TypeScript documentation (typescriptlang.org/docs/) is an excellent resource. You can also find many online courses and tutorials.
  4. How do I debug my TypeScript code? You can use your browser’s developer tools (e.g., Chrome DevTools) to debug your compiled JavaScript code. Set breakpoints and inspect variables.
  5. What are some good IDEs for TypeScript development? Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support, extensions, and debugging capabilities. Other popular options include WebStorm and Sublime Text with TypeScript plugins.

This tutorial has provided a foundational understanding of TypeScript and its application in building a simple interactive game. You’ve learned how to set up a TypeScript project, write basic game logic, and handle user input. You’ve also seen how TypeScript can improve code quality and prevent errors. Building a game is a fun and engaging way to learn the language’s core concepts. By starting with a small project like this, you can gradually build your skills and tackle more complex challenges.

More posts