Mastering TypeScript: Building a Simple Game with Classes

Written by

learnmodernjavascript

in

In the world of web development, creating interactive and engaging experiences is crucial. Games, in particular, offer a fantastic way to learn and apply programming concepts. TypeScript, with its strong typing and object-oriented features, provides an excellent foundation for building these kinds of applications. This tutorial will guide you through the process of creating a simple, yet functional, game using TypeScript. We will focus on the core principles of game development, such as game loops, object creation, and collision detection, all while leveraging the benefits of TypeScript’s type safety and code organization.

Why TypeScript for Game Development?

Why choose TypeScript over JavaScript for game development? The answer lies in the advantages TypeScript brings to the table:

  • Type Safety: TypeScript’s static typing helps catch errors early in the development process. This reduces debugging time and makes your code more reliable.
  • Code Organization: TypeScript supports object-oriented programming (OOP) principles like classes, inheritance, and polymorphism, allowing you to structure your code in a clean and maintainable way.
  • Improved Readability: Type annotations make your code easier to understand and reason about, especially when working on larger projects.
  • Tooling Support: TypeScript has excellent tooling support, including autocompletion, refactoring, and code navigation in most modern IDEs.

These benefits translate to faster development cycles, fewer bugs, and a more enjoyable coding experience. Let’s dive into creating our game!

Setting Up Your Development Environment

Before we start coding, we need to set up our development environment. Here’s what you’ll need:

  • Node.js and npm (or yarn): You’ll need Node.js and npm (Node Package Manager) or yarn installed on your system. These are essential for managing project dependencies and running TypeScript code. You can download Node.js from the official website: nodejs.org.
  • A Code Editor: Choose your preferred code editor. Popular choices include Visual Studio Code (VS Code), Sublime Text, or WebStorm.
  • TypeScript Compiler: We’ll install the TypeScript compiler globally using npm:
npm install -g typescript

This command installs the TypeScript compiler (`tsc`) globally, making it available in your terminal.

Project Setup

Let’s create a new project directory and initialize it with npm:

  1. Create a new directory for your project (e.g., `simple-game`).
  2. Navigate into the directory using your terminal.
  3. Initialize the project with npm:
npm init -y

This command creates a `package.json` file with default settings. Next, let’s set up TypeScript:

  1. Create a `tsconfig.json` file in your project root. This file configures the TypeScript compiler. You can generate a basic `tsconfig.json` using the command:
tsc --init

This command creates a `tsconfig.json` file with default settings. You can customize the settings in this file to suit your project’s needs. For our game, we’ll use the following configuration:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
  • `target`: Specifies the JavaScript version to compile to (ES5 is widely supported).
  • `module`: Specifies the module system (CommonJS is suitable for Node.js).
  • `outDir`: Specifies the output directory for compiled JavaScript files.
  • `esModuleInterop`: Enables interoperability between CommonJS and ES modules.
  • `forceConsistentCasingInFileNames`: Enforces consistent casing in file names.
  • `strict`: Enables strict type checking.
  • `skipLibCheck`: Skips type checking of declaration files.

Create a `src` directory to hold your TypeScript source files. Inside `src`, create a file named `game.ts` where we’ll write our game logic.

Creating Game Objects with Classes

In our game, we’ll have a player and some obstacles. We’ll represent these as classes:

// src/game.ts

class GameObject {
  x: number;
  y: number;
  width: number;
  height: number;

  constructor(x: number, y: number, width: number, height: number) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  }

  // Method to check for collision with another GameObject
  collidesWith(other: GameObject): boolean {
    return (
      this.x  other.x &&
      this.y  other.y
    );
  }
}

class Player extends GameObject {
  speed: number;

  constructor(x: number, y: number, width: number, height: number, speed: number) {
    super(x, y, width, height);
    this.speed = speed;
  }

  moveLeft(): void {
    this.x -= this.speed;
  }

  moveRight(): void {
    this.x += this.speed;
  }

  moveUp(): void {
    this.y -= this.speed;
  }

  moveDown(): void {
    this.y += this.speed;
  }
}

class Obstacle extends GameObject {
  // Obstacle-specific properties can be added here
}

Let’s break down this code:

  • `GameObject` Class: This is our base class. It defines common properties for all game objects, such as `x`, `y` (coordinates), `width`, and `height`. It also includes a `collidesWith` method to check for collisions.
  • `Player` Class: This class inherits from `GameObject` and represents the player character. It adds a `speed` property and methods for moving the player.
  • `Obstacle` Class: This class also inherits from `GameObject` and represents obstacles in the game. You can add obstacle-specific properties here.

This class structure promotes code reusability and makes it easy to add more game objects later.

Implementing the Game Loop

The game loop is the heart of any game. It continuously updates the game state and renders the game elements. Here’s how we can implement a basic game loop:

// src/game.ts (continued)

// Get the canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);

// Game objects
const player = new Player(50, 50, 20, 20, 5);
const obstacle = new Obstacle(200, 100, 50, 50);

// Game state
let isGameOver = false;

// Function to handle key presses
const keysPressed: { [key: string]: boolean } = {};

document.addEventListener('keydown', (e) => {
  keysPressed[e.key] = true;
});

document.addEventListener('keyup', (e) => {
  keysPressed[e.key] = false;
});

function update(): void {
  // Handle player movement based on key presses
  if (keysPressed['ArrowLeft']) {
    player.moveLeft();
  }
  if (keysPressed['ArrowRight']) {
    player.moveRight();
  }
  if (keysPressed['ArrowUp']) {
    player.moveUp();
  }
  if (keysPressed['ArrowDown']) {
    player.moveDown();
  }

  // Collision detection
  if (player.collidesWith(obstacle)) {
    isGameOver = true;
  }
}

function draw(): void {
  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw the player
  ctx.fillStyle = 'blue';
  ctx.fillRect(player.x, player.y, player.width, player.height);

  // Draw the obstacle
  ctx.fillStyle = 'red';
  ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);

  // Display game over message
  if (isGameOver) {
    ctx.fillStyle = 'black';
    ctx.font = '30px Arial';
    ctx.fillText('Game Over!', canvas.width / 2 - 75, canvas.height / 2);
  }
}

function gameLoop(): void {
  update();
  draw();

  if (!isGameOver) {
    requestAnimationFrame(gameLoop);
  }
}

// Start the game loop
gameLoop();

Key points of the game loop:

  • Canvas Setup: We create a canvas element and get its 2D rendering context.
  • Game Objects: We instantiate a `Player` and an `Obstacle`.
  • Game State: We use a `isGameOver` flag to control the game loop.
  • Input Handling: We listen for keydown and keyup events to track which keys are pressed.
  • `update()` Function: This function handles game logic, such as player movement and collision detection.
  • `draw()` Function: This function clears the canvas and draws the game elements.
  • `gameLoop()` Function: This function calls `update()` and `draw()` in a loop using `requestAnimationFrame`. This ensures smooth animation and efficient rendering.

Compiling and Running the Game

Now that we’ve written the game logic, let’s compile and run the game. Open your terminal in your project directory and run the following command:

tsc

This command will compile your TypeScript code into JavaScript, creating a `dist` directory with the compiled files. Next, create an `index.html` file in your project root with the following content:

<!DOCTYPE html>
<html>
<head>
  <title>Simple TypeScript Game</title>
</head>
<body>
  <script src="dist/game.js"></script>
</body>
</html>

Finally, open `index.html` in your web browser. You should see a blue square (the player) and a red square (the obstacle). Use the arrow keys to move the blue square. If it collides with the red square, the game over message appears.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when starting with TypeScript game development, along with solutions:

  • Incorrect File Paths: Make sure your file paths in the `index.html` and `tsconfig.json` are correct. Double-check that the JavaScript file is correctly linked in your HTML.
  • Type Errors: TypeScript’s type system can be strict. If you encounter type errors, carefully read the error messages and make sure your variables and function arguments have the correct types. Use type annotations to help the compiler.
  • Scope Issues: Be mindful of variable scope. Variables declared inside functions are only accessible within those functions. Use global variables or pass variables as arguments to share data between functions.
  • Missing Imports: If you’re using external libraries, make sure you’ve installed them using npm and imported them correctly in your TypeScript files.
  • Canvas Context Errors: Ensure that you correctly obtain the 2D rendering context from the canvas element. Check for potential null values.

By paying attention to these common pitfalls, you can avoid frustrating debugging sessions and make your game development experience smoother.

Enhancements and Next Steps

This is a basic game, but there are many ways you can enhance it:

  • Add More Obstacles: Create an array of obstacles and loop through them in the `draw()` and `update()` functions.
  • Implement Scoring: Keep track of the player’s score and display it on the screen.
  • Add Enemy AI: Create enemies that move and interact with the player.
  • Implement Sound Effects: Add sound effects for collisions and other events.
  • Improve Graphics: Use images or more sophisticated drawing techniques to create better visuals.
  • Implement Game Levels: Design different levels with increasing difficulty.
  • Add Mobile Controls: Implement touch controls for mobile devices.

These enhancements will give you more practice with TypeScript and game development concepts.

Summary / Key Takeaways

In this tutorial, we built a simple game using TypeScript, covering the essential concepts of game development. We explored the advantages of using TypeScript, including type safety and code organization. We created classes for game objects, implemented a game loop, and handled player input and collision detection. We also covered common mistakes and how to avoid them.

Here are the key takeaways:

  • TypeScript is an excellent choice for game development due to its type safety, code organization, and tooling support.
  • Classes are fundamental for representing game objects and their behavior.
  • The game loop is the core of any game, responsible for updating game state and rendering the game elements.
  • Collision detection is essential for creating interactions between game objects.
  • Always test your game frequently to catch bugs early.

FAQ

Here are some frequently asked questions about TypeScript game development:

  1. Q: What are the benefits of using TypeScript over JavaScript for game development?

    A: TypeScript offers type safety, code organization, improved readability, and better tooling support, leading to fewer bugs and a more maintainable codebase.
  2. Q: How do I handle user input in a TypeScript game?

    A: You can handle user input by listening for keyboard and mouse events and updating game objects’ properties accordingly.
  3. Q: How do I detect collisions between game objects?

    A: You can implement a collision detection algorithm, such as checking if the bounding boxes of two objects overlap.
  4. Q: How can I improve the performance of my TypeScript game?

    A: Optimize your code by avoiding unnecessary calculations, using efficient data structures, and minimizing the number of draw calls. Consider using techniques like object pooling and sprite sheets.
  5. Q: What are some good libraries for game development with TypeScript?

    A: Some popular libraries include Phaser, PixiJS, and Three.js.

By following this tutorial and experimenting with the enhancements, you can build your game development skills and create more complex and engaging games. Remember to practice regularly and experiment with different concepts to master game development with TypeScript.

Building games is a journey filled with challenges and rewards. With TypeScript as your tool, you have a powerful ally in this creative process. Embrace the learning, experiment with new ideas, and most importantly, have fun creating your own games. You’ll find that the more you build, the more you learn, and the more rewarding the experience becomes. Keep coding, keep creating, and enjoy the process of bringing your game ideas to life!

More posts