TypeScript Tutorial: Creating a Simple Game with Classes and Inheritance

Written by

learnmodernjavascript

in

Ever wanted to create your own game? Whether it’s a simple puzzle, a classic arcade game, or something completely new, game development offers a fantastic way to learn programming concepts. This tutorial will guide you through creating a basic game in TypeScript, focusing on object-oriented programming principles like classes and inheritance. We’ll build a simplified version of a classic game, using TypeScript to make our code organized, readable, and maintainable. This tutorial is designed for beginners to intermediate developers, assuming you have some familiarity with TypeScript fundamentals. Let’s dive in!

Why TypeScript for Game Development?

TypeScript, a superset of JavaScript, brings several advantages to game development:

  • Static Typing: TypeScript’s static typing helps catch errors early in the development process. This reduces debugging time and makes your code more robust.
  • Object-Oriented Programming (OOP): TypeScript fully supports OOP concepts like classes, inheritance, and polymorphism. This allows you to structure your game code logically, making it easier to manage complex game elements.
  • Code Readability and Maintainability: TypeScript’s features, such as interfaces and type annotations, improve code readability. Well-structured code is easier to understand, modify, and debug.
  • Tooling and IDE Support: TypeScript has excellent support in popular IDEs (like VS Code), offering features like code completion, refactoring, and error checking, which boosts productivity.

While JavaScript can also be used for game development, TypeScript’s added features can significantly improve the development experience, especially for larger projects.

Setting Up Your Development Environment

Before we start, ensure you have the following installed:

  • Node.js and npm (Node Package Manager): TypeScript requires Node.js and npm to compile and manage dependencies. You can download these from the official Node.js website (nodejs.org).
  • A Code Editor: A code editor like Visual Studio Code (VS Code) is highly recommended. It provides excellent support for TypeScript, including code completion, debugging, and more.

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

npm init -y

This command creates a package.json file, which will store your project’s metadata and dependencies. Next, install TypeScript as a development dependency:

npm install typescript --save-dev

Now, create a tsconfig.json file in your project directory. This file configures the TypeScript compiler. You can generate a basic one using the following command:

npx tsc --init

Open tsconfig.json in your code editor and customize it. Here’s a basic configuration that’s good for most projects:

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

This configuration compiles TypeScript to ES5 JavaScript, uses CommonJS modules, outputs the compiled files to a dist directory, and assumes your source code is in the src directory. The strict: true option enables strict type checking, which is highly recommended for catching errors early.

Creating the Game Structure

Let’s plan the structure of our game. We’ll create a simple game with these elements:

  • Game Object: The main class that controls the game logic, rendering, and updates.
  • Player: Represents the player character.
  • Enemy: Represents the enemy characters.
  • Game Loop: A function that runs repeatedly to update the game state and render the game.

Create a src directory in your project root, and within it, create the following files:

  • game.ts: Contains the Game class and game loop.
  • player.ts: Contains the Player class.
  • enemy.ts: Contains the Enemy class.
  • index.ts: The entry point of our application.

Implementing the Game Classes

The Player Class (player.ts)

Let’s create the Player class. This class will represent our player character. It will have properties like position, size, and methods to move.

// src/player.ts

export class Player {
  x: number;
  y: number;
  width: number;
  height: number;
  color: string;
  speed: number;

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

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

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

  draw(ctx: CanvasRenderingContext2D) {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

This class defines the player’s properties and methods. The draw method will render the player on the game canvas.

The Enemy Class (enemy.ts)

Next, let’s create the Enemy class. This class will represent our enemy characters. It will have similar properties to the player and methods to move or behave in some way.

// src/enemy.ts

export class Enemy {
  x: number;
  y: number;
  width: number;
  height: number;
  color: string;
  speed: number;

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

  update() {
    this.y += this.speed; // Move the enemy downwards
  }

  draw(ctx: CanvasRenderingContext2D) {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

The Enemy class is similar to the Player class, but it might have different behaviors or movements, such as moving downwards. The update method handles the enemy’s movement.

The Game Class (game.ts)

Now, let’s create the Game class, which will manage the overall game logic, including the player, enemies, and the game loop.

// src/game.ts
import { Player } from './player';
import { Enemy } from './enemy';

export class Game {
  canvas: HTMLCanvasElement;
  ctx: CanvasRenderingContext2D;
  player: Player;
  enemies: Enemy[];
  gameWidth: number;
  gameHeight: number;
  enemySpawnInterval: number;
  lastEnemySpawnTime: number;

  constructor(canvasId: string) {
    this.canvas = document.getElementById(canvasId) as HTMLCanvasElement;
    if (!this.canvas) {
      throw new Error("Canvas not found!");
    }
    this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
    this.gameWidth = this.canvas.width;
    this.gameHeight = this.canvas.height;
    this.player = new Player(this.gameWidth / 2 - 25, this.gameHeight - 50, 50, 20, 'blue', 5);
    this.enemies = [];
    this.enemySpawnInterval = 2000; // milliseconds
    this.lastEnemySpawnTime = 0;

    // Event listeners for player movement
    document.addEventListener('keydown', this.handleKeyDown.bind(this));
  }

  handleKeyDown(e: KeyboardEvent) {
    if (e.key === 'ArrowLeft') {
      this.player.moveLeft();
    } else if (e.key === 'ArrowRight') {
      this.player.moveRight();
    }
  }

  spawnEnemy() {
    const enemyWidth = 30;
    const enemyHeight = 15;
    const enemySpeed = 1;
    const x = Math.random() * (this.gameWidth - enemyWidth);
    this.enemies.push(new Enemy(x, 0, enemyWidth, enemyHeight, 'red', enemySpeed));
  }

  update(deltaTime: number) {
    // Update enemy positions
    this.enemies.forEach(enemy => enemy.update());

    // Remove enemies that have gone off-screen
    this.enemies = this.enemies.filter(enemy => enemy.y  this.enemySpawnInterval) {
      this.spawnEnemy();
      this.lastEnemySpawnTime = now;
    }

    // Keep player within bounds
    this.player.x = Math.max(0, Math.min(this.player.x, this.gameWidth - this.player.width));
  }

  draw() {
    this.ctx.clearRect(0, 0, this.gameWidth, this.gameHeight);
    this.player.draw(this.ctx);
    this.enemies.forEach(enemy => enemy.draw(this.ctx));
  }

  gameLoop(currentTime: number) {
    const deltaTime = currentTime - this.lastFrameTime;
    this.lastFrameTime = currentTime;
    this.update(deltaTime);
    this.draw();
    requestAnimationFrame(this.gameLoop.bind(this));
  }

  start() {
    this.lastFrameTime = 0;
    requestAnimationFrame(this.gameLoop.bind(this));
  }
}

This class handles the core game logic:

  • Constructor: Initializes the canvas, player, enemies, and event listeners.
  • handleKeyDown: Handles player movement based on key presses.
  • spawnEnemy: Creates a new enemy at a random x-position.
  • update: Updates the game state (player and enemy positions, enemy spawning, and collision detection).
  • draw: Clears the canvas and redraws all game elements.
  • gameLoop: The main game loop that calls update and draw repeatedly using requestAnimationFrame.
  • start: Starts the game loop.

The Entry Point (index.ts)

Finally, create the entry point for your application. This file will initialize the game and start the game loop.

// src/index.ts
import { Game } from './game';

const game = new Game('gameCanvas');
game.start();

This code creates a new instance of the Game class and calls the start method to begin the game loop. Now, we need to create the HTML file to contain the canvas element.

Creating the HTML File

Create an index.html file in the root directory of your project 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>TypeScript Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden; /* Hide scrollbars */
    }
    canvas {
      display: block;
      background-color: #eee;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
  <script src="dist/index.js"></script>
</body>
</html>

This HTML file sets up a basic HTML structure with a canvas element where the game will be rendered. It also includes a script tag that loads the compiled JavaScript file (dist/index.js). The `style` tag is important for removing default margins and scrollbars.

Compiling and Running the Game

Now that you’ve written the TypeScript code and created the HTML file, you need to compile the TypeScript code into JavaScript. Open your terminal and run the following command in your project directory:

tsc

This command will compile all the TypeScript files in the src directory and output the JavaScript files into the dist directory, based on your tsconfig.json configuration. After successful compilation, open index.html in your web browser. You should see a blue rectangle (the player) and red rectangles (enemies) moving on the canvas. Use the left and right arrow keys to move the player.

Enhancements and Further Development

This is a basic game. Here are some ideas to enhance it:

  • Collision Detection: Implement collision detection between the player and enemies to end the game.
  • Scoring: Add a scoring system to track the player’s progress.
  • More Enemy Types: Introduce different enemy types with varying behaviors.
  • Game Over Screen: Create a game-over screen with a score display and an option to restart the game.
  • User Interface (UI): Add a UI with a score display and other game information.
  • Sound Effects and Music: Integrate sound effects and background music to enhance the gaming experience.
  • Levels: Implement different levels with increasing difficulty.

Common Mistakes and How to Fix Them

  • Canvas Not Found: Make sure the canvasId in your Game constructor matches the id attribute of the <canvas> element in your HTML.
  • Type Errors: TypeScript’s compiler will highlight type errors. Read the error messages carefully and fix them. Common issues include incorrect data types, missing properties, or incorrect function signatures.
  • Incorrect Paths: Double-check the import paths in your TypeScript files to make sure they are correct.
  • Incorrect Event Listeners: Ensure your event listeners (e.g., keydown) are correctly attached to the document or the appropriate element.
  • Game Loop Issues: Ensure your game loop uses requestAnimationFrame for smooth and efficient rendering.

Summary / Key Takeaways

This tutorial has shown you how to create a simple game using TypeScript, classes, and inheritance. We covered setting up your development environment, structuring the game, implementing classes for game objects, and creating a game loop. You’ve learned how to use TypeScript’s features to write organized and maintainable game code. The example provided is a foundation; you can expand upon it by adding more features. Remember, practice is key. The more you experiment with TypeScript and game development, the better you’ll become. By applying the principles of OOP and understanding the basic game loop, you’re well on your way to creating more complex and engaging games.

FAQ

  1. Can I use this code in a commercial game? Yes, you can. This code is provided as a learning resource, and you are free to use and modify it for any purpose, including commercial projects.
  2. What if I get stuck? There are numerous resources available to help. You can search online for specific errors, consult the TypeScript documentation, or ask for help on forums like Stack Overflow or Reddit.
  3. How can I improve performance? Consider optimizing your game by using techniques like object pooling, minimizing the number of draw calls, and using efficient algorithms.
  4. Can I use a game engine? Absolutely! Game engines like Phaser or PixiJS can simplify game development, especially for more complex games. This tutorial focuses on the fundamentals, but game engines can provide pre-built functionality and tools.

This tutorial offers a foundational understanding of game development with TypeScript, empowering you to build more advanced projects. By understanding the basics, you can apply these principles to more complex game designs. With the concepts presented here, you are equipped to build a wide variety of games, from simple arcade games to more sophisticated projects. The world of game development is vast and offers exciting opportunities for creativity and technical challenges. Embrace the learning process, experiment with new ideas, and enjoy the journey of creating your own games!

More posts