TypeScript Tutorial: Building a Simple Web-Based Game

Written by

learnmodernjavascript

in

In the ever-evolving world of web development, creating interactive and engaging user experiences is paramount. Games, with their inherent ability to captivate and entertain, provide a fantastic avenue to learn and apply modern web technologies. This tutorial will guide you through the process of building a simple web-based game using TypeScript, a powerful superset of JavaScript that adds static typing. We’ll focus on creating a basic “Guess the Number” game, a classic that will allow you to grasp fundamental concepts while having fun.

Why TypeScript for Game Development?

While JavaScript is the language of the web, TypeScript offers several advantages, especially when working on projects of any significant size:

  • Improved Code Quality: Static typing helps catch errors early in the development process, reducing the likelihood of runtime bugs.
  • Enhanced Readability: Types make your code more self-documenting, improving understanding and maintainability.
  • Better Tooling: TypeScript provides excellent support for code completion, refactoring, and other IDE features, boosting developer productivity.
  • Scalability: As your game grows, TypeScript’s structure helps manage complexity effectively.

Choosing TypeScript is a proactive step toward writing cleaner, more robust, and more maintainable code.

Setting Up Your Development Environment

Before we dive into the code, let’s set up our development environment. You’ll need the following:

  • Node.js and npm (Node Package Manager): Used for managing project dependencies and running the TypeScript compiler. Download and install from nodejs.org.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support. You can download it from code.visualstudio.com.
  • Basic HTML and CSS knowledge: While this tutorial focuses on TypeScript, some familiarity with HTML and CSS will be helpful for structuring the game’s interface.

Once you have these installed, create a new project directory for your game. Open your terminal or command prompt, navigate to the project directory, and initialize a new npm project:

npm init -y

This command creates a package.json file, which will store your project’s dependencies.

Installing TypeScript and Setting Up the Configuration

Next, install TypeScript as a development dependency:

npm install --save-dev typescript

This command installs the TypeScript compiler (tsc). Now, create a tsconfig.json file in your project’s root directory. This file configures the TypeScript compiler. You can generate a basic one using the following command:

npx tsc --init

This command creates a tsconfig.json file with default settings. You can customize this file based on your project’s needs. For our game, we can modify it to include the following settings:

{
  "compilerOptions": {
    "target": "es5", // or "es6", "esnext" depending on your target environment
    "module": "commonjs", // or "esnext", "amd" depending on your module system
    "outDir": "./dist", // Output directory for compiled JavaScript files
    "rootDir": "./src", // Source directory for TypeScript files
    "strict": true, // Enable strict type checking
    "esModuleInterop": true, // Enables interoperability between CommonJS and ES Modules
    "skipLibCheck": true, // Skip type checking of declaration files
    "forceConsistentCasingInFileNames": true // Enforce consistent casing in filenames
  },
  "include": ["src/**/*"]
}

Let’s break down some of these settings:

  • target: Specifies the JavaScript version to compile to. es5 is widely supported, but you can choose a newer version if your target environment supports it.
  • module: Specifies the module system to use. commonjs is common for Node.js environments, while esnext is often used for modern JavaScript projects.
  • outDir: Specifies the directory where the compiled JavaScript files will be placed.
  • rootDir: Specifies the root directory of your TypeScript source files.
  • strict: Enables strict type checking. It’s highly recommended to enable this for better code quality.
  • esModuleInterop: Enables interoperability between CommonJS and ES Modules.
  • skipLibCheck: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: Enforces consistent casing in filenames.

Creating the Game Structure

Now, let’s create the basic structure of our game. Create a src directory in your project’s root directory. Inside the src directory, create the following files:

  • index.html: The HTML file for the game’s user interface.
  • index.ts: The main TypeScript file where we’ll write our game logic.
  • style.css: The CSS file for styling the game.

Your project structure should look something like this:

my-game/
├── package.json
├── tsconfig.json
├── src/
│   ├── index.html
│   ├── index.ts
│   └── style.css
└── dist/

Building the HTML User Interface (index.html)

Let’s create a simple HTML interface for our “Guess the Number” game. Open src/index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guess the Number</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Guess the Number</h1>
        <p>I'm thinking of a number between 1 and 100.</p>
        <input type="number" id="guessInput" placeholder="Enter your guess">
        <button id="guessButton">Guess</button>
        <p id="message"></p>
        <p id="attempts">Attempts remaining: <span id="attemptsLeft">10</span></p>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML creates the basic elements for our game:

  • A heading (<h1>) for the game title.
  • A paragraph (<p>) to provide instructions.
  • An input field (<input type="number">) for the user to enter their guess.
  • A button (<button>) to submit the guess.
  • A paragraph (<p id="message">) to display feedback to the user (e.g., “Too high!” or “Correct!”).
  • A paragraph (<p id="attempts">) to show the number of attempts remaining.

Notice the <script src="dist/index.js"></script> tag. This will include the compiled JavaScript file generated from our TypeScript code.

Styling the Game with CSS (style.css)

Let’s add some basic styling to our game. Open src/style.css and add the following CSS:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

input[type="number"] {
    padding: 8px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 150px;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #3e8e41;
}

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

This CSS provides basic styling for the game’s layout, input field, button, and messages.

Writing the Game Logic in TypeScript (index.ts)

Now, let’s write the core game logic in TypeScript. Open src/index.ts and add the following code:


// Define the game variables
let secretNumber: number;
let attemptsLeft: number;
const maxAttempts = 10;

// Get references to HTML elements
const guessInput = document.getElementById('guessInput') as HTMLInputElement;
const guessButton = document.getElementById('guessButton') as HTMLButtonElement;
const message = document.getElementById('message') as HTMLElement;
const attemptsLeftSpan = document.getElementById('attemptsLeft') as HTMLSpanElement;

// Function to generate a random number
function generateSecretNumber(): number {
  return Math.floor(Math.random() * 100) + 1;
}

// Function to start a new game
function startGame(): void {
  secretNumber = generateSecretNumber();
  attemptsLeft = maxAttempts;
  updateAttemptsDisplay();
  message.textContent = ''; // Clear any previous messages
  guessInput.value = ''; // Clear the input field
}

// Function to update the attempts display
function updateAttemptsDisplay(): void {
  attemptsLeftSpan.textContent = attemptsLeft.toString();
}

// Function to check the user's guess
function checkGuess(): void {
  const guess = parseInt(guessInput.value, 10);

  if (isNaN(guess) || guess < 1 || guess > 100) {
    message.textContent = 'Please enter a valid number between 1 and 100.';
    return;
  }

  attemptsLeft--;
  updateAttemptsDisplay();

  if (guess === secretNumber) {
    message.textContent = `Congratulations! You guessed the number ${secretNumber} in ${maxAttempts - attemptsLeft} attempts.`;
    guessButton.disabled = true; // Disable the button after winning
  } else if (attemptsLeft === 0) {
    message.textContent = `You ran out of attempts! The number was ${secretNumber}.`;
    guessButton.disabled = true; // Disable the button after losing
  } else if (guess < secretNumber) {
    message.textContent = 'Too low! Try again.';
  } else {
    message.textContent = 'Too high! Try again.';
  }
}

// Add event listener to the guess button
guessButton.addEventListener('click', checkGuess);

// Start the game when the page loads
startGame();

Let’s break down this code:

  • Variables: We declare variables to store the secret number, the number of attempts left, and references to the HTML elements. We use TypeScript’s type annotations (e.g., let secretNumber: number;) to specify the data types of our variables, which helps with code correctness and readability.
  • HTML Element References: We use document.getElementById() to get references to the HTML elements we need to interact with (input field, button, message area, and attempts display). The as HTMLInputElement, as HTMLButtonElement, and as HTMLElement are type assertions, which tell TypeScript the specific type of the element.
  • generateSecretNumber(): This function generates a random number between 1 and 100.
  • startGame(): This function initializes the game by generating a new secret number, resetting the number of attempts, clearing the message, and clearing the input field.
  • updateAttemptsDisplay(): This function updates the display of remaining attempts.
  • checkGuess(): This function is the core of the game logic. It:
    • Gets the user’s guess from the input field.
    • Validates the input to ensure it’s a valid number between 1 and 100.
    • Decrements the number of attempts.
    • Checks if the guess is correct, too high, or too low, and provides feedback to the user.
    • Disables the guess button if the game is won or lost.
  • Event Listener: We add an event listener to the guess button to call the checkGuess() function when the button is clicked.
  • Game Start: We call startGame() to initialize the game when the page loads.

Compiling and Running the Game

Now that we’ve written our TypeScript code, let’s compile it into JavaScript. Open your terminal or command prompt, navigate to your project directory, and run the following command:

tsc

This command will use the TypeScript compiler (tsc) to compile your index.ts file into index.js and place the output in the dist directory as specified in tsconfig.json. If you made any changes to your HTML or CSS, make sure to save them before compiling.

To run the game, you can simply open src/index.html in your web browser. You should now see the game interface and be able to play the game.

Common Mistakes and How to Fix Them

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

  • Incorrect File Paths: Ensure that the paths in your HTML (e.g., the link to style.css and the script tag for index.js) are correct relative to your HTML file.
  • Typos: TypeScript can help catch typos, but double-check your code for any spelling errors, especially in variable names and HTML element IDs.
  • Type Errors: If you see type errors in your editor or during compilation, carefully review your code and make sure you’re using the correct data types. TypeScript provides helpful error messages to guide you.
  • Incorrect Element References: Make sure you have the correct IDs in your HTML and that you’re referencing the correct elements in your TypeScript code using document.getElementById().
  • Not Compiling Changes: Remember to recompile your TypeScript code (using tsc) after making changes to your .ts files before refreshing your browser.

Key Takeaways and Next Steps

In this tutorial, you’ve learned the fundamentals of creating a simple web-based game using TypeScript. You’ve seen how to set up a TypeScript project, write basic game logic, and build a simple user interface. Here’s a summary of the key takeaways:

  • TypeScript offers significant advantages for web development, including improved code quality, readability, and maintainability.
  • Setting up a TypeScript project involves initializing an npm project, installing TypeScript, and configuring the tsconfig.json file.
  • You can use HTML and CSS to create the game’s user interface.
  • TypeScript allows you to write type-safe code, improving code correctness and readability.
  • The tsc command compiles your TypeScript code into JavaScript.

To expand on this game, consider these next steps:

  • Add Difficulty Levels: Allow the user to select a difficulty level (e.g., easy, medium, hard), which could affect the range of the secret number or the number of attempts.
  • Implement a Scoreboard: Store the user’s score (e.g., the number of attempts it took to guess the number) and display a scoreboard. You could use local storage to persist the scores between game sessions.
  • Add Visuals: Enhance the game with images, animations, and other visual elements using HTML and CSS.
  • Implement Sound Effects: Add sound effects to provide more feedback to the user.
  • Refactor and Improve Code Structure: As your game grows, consider refactoring your code to improve its structure and organization (e.g., using classes and modules).

Frequently Asked Questions (FAQ)

Here are some common questions about this tutorial:

  1. Why use TypeScript instead of JavaScript? TypeScript offers several benefits, including improved code quality, better tooling, and enhanced maintainability. It helps catch errors early and makes your code more readable, especially for larger projects.
  2. How do I compile TypeScript code? You compile TypeScript code using the tsc command in your terminal. This command uses the TypeScript compiler to convert your .ts files into .js files.
  3. What is a tsconfig.json file? The tsconfig.json file is a configuration file for the TypeScript compiler. It specifies how the compiler should behave, such as the target JavaScript version, the module system, and the output directory.
  4. How do I handle user input? You can handle user input using HTML input elements (e.g., <input type="number">) and event listeners in your TypeScript code. You can get the value of the input field using document.getElementById("elementId").value.
  5. Where can I learn more about TypeScript? The official TypeScript documentation (typescriptlang.org/docs/) is an excellent resource. You can also find numerous tutorials and courses online.

By building this simple “Guess the Number” game, you’ve taken your first steps into the exciting world of web game development with TypeScript. Remember that the journey of a thousand lines of code begins with a single guess. Continue to experiment, learn, and iterate on your projects, and you’ll be well on your way to creating more complex and engaging web applications. The combination of TypeScript’s power and the inherent fun of game development provides a fantastic opportunity to sharpen your coding skills while creating interactive experiences. Embrace the challenges, celebrate your successes, and enjoy the process of bringing your game ideas to life. The possibilities are as limitless as your imagination.

More posts