📘 Game Development: Canvas and WebGL

🎯 Introduction

Welcome to the exciting world of game development with TypeScript! 🎮 In this tutorial, we’ll explore how to create interactive games using HTML5 Canvas and WebGL, all powered by TypeScript’s type safety.

You’ll discover how Canvas and WebGL can transform your creative ideas into playable games. Whether you’re building simple 2D puzzles 🧩, action-packed shooters 🚀, or stunning 3D experiences 🌟, understanding these technologies is essential for modern web game development.

By the end of this tutorial, you’ll be creating your own games with confidence! Let’s dive in! 🏊‍♂️

📚 Understanding Canvas and WebGL

🤔 What are Canvas and WebGL?

Think of Canvas as your digital drawing board 🎨 and WebGL as your supercharged paintbrush that can create 3D masterpieces! Canvas gives you a 2D drawing surface, while WebGL unleashes the power of your GPU for stunning graphics.

In TypeScript terms, Canvas provides a simple 2D rendering context with methods for drawing shapes, images, and text. WebGL takes it further by giving you access to the GPU for hardware-accelerated 3D graphics. This means you can:

• ✨ Create smooth 60 FPS games
• 🚀 Render thousands of objects efficiently
• 🛡️ Build type-safe game engines

💡 Why Use TypeScript for Game Development?

Here’s why game developers love TypeScript:

1. Type Safety 🔒: Catch bugs before they crash your game
2. Better IDE Support 💻: Autocomplete for game objects and methods
3. Code Documentation 📖: Types document your game architecture
4. Refactoring Confidence 🔧: Safely modify complex game systems

Real-world example: Imagine building a space shooter 🚀. With TypeScript, you can define exact types for enemies, weapons, and power-ups, preventing runtime errors when a laser collides with an asteroid!

🔧 Basic Syntax and Usage

📝 Simple Canvas Example

Let’s start with a friendly bouncing ball:

// 👋 Hello, Canvas!
interface GameConfig {
  width: number;     // 📏 Canvas width
  height: number;    // 📐 Canvas height
  fps: number;       // 🎬 Frames per second
}

// 🎨 Our bouncing ball
interface Ball {
  x: number;         // 📍 X position
  y: number;         // 📍 Y position
  vx: number;        // ➡️ X velocity
  vy: number;        // ⬇️ Y velocity
  radius: number;    // ⭕ Ball size
  color: string;     // 🎨 Ball color
}

// 🎮 Simple game class
class BounceGame {
  private canvas: HTMLCanvasElement;
  private ctx: CanvasRenderingContext2D;
  private ball: Ball;
  
  constructor(config: GameConfig) {
    // 🖼️ Create canvas
    this.canvas = document.createElement('canvas');
    this.canvas.width = config.width;
    this.canvas.height = config.height;
    
    // 🎨 Get drawing context
    this.ctx = this.canvas.getContext('2d')!;
    
    // ⚽ Initialize ball
    this.ball = {
      x: config.width / 2,
      y: config.height / 2,
      vx: 5,
      vy: 3,
      radius: 20,
      color: '#FF6B6B'
    };
  }
  
  // 🎯 Game loop
  update(): void {
    // 🔄 Update position
    this.ball.x += this.ball.vx;
    this.ball.y += this.ball.vy;
    
    // 🏓 Bounce off walls
    if (this.ball.x <= this.ball.radius || 
        this.ball.x >= this.canvas.width - this.ball.radius) {
      this.ball.vx = -this.ball.vx;
    }
    
    if (this.ball.y <= this.ball.radius || 
        this.ball.y >= this.canvas.height - this.ball.radius) {
      this.ball.vy = -this.ball.vy;
    }
  }
  
  // 🎨 Render everything
  render(): void {
    // 🧹 Clear canvas
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
    // 🎨 Draw ball
    this.ctx.beginPath();
    this.ctx.arc(this.ball.x, this.ball.y, this.ball.radius, 0, Math.PI * 2);
    this.ctx.fillStyle = this.ball.color;
    this.ctx.fill();
  }
}

💡 Explanation: Notice how TypeScript helps us define exact types for our game objects. The ! after getContext('2d') tells TypeScript we’re sure it won’t be null.

🎯 WebGL Basics

Here’s a simple WebGL triangle with types:

// 🌟 WebGL shader types
interface ShaderSource {
  vertex: string;    // 📐 Vertex shader
  fragment: string;  // 🎨 Fragment shader
}

// 🚀 WebGL game class
class WebGLGame {
  private gl: WebGLRenderingContext;
  private program: WebGLProgram;
  
  constructor(canvas: HTMLCanvasElement) {
    // 🎮 Get WebGL context
    this.gl = canvas.getContext('webgl')!;
    
    // 🎨 Shaders for a colorful triangle
    const shaders: ShaderSource = {
      vertex: `
        attribute vec2 position;
        void main() {
          gl_Position = vec4(position, 0.0, 1.0);
        }
      `,
      fragment: `
        precision mediump float;
        uniform float time;
        void main() {
          // 🌈 Rainbow colors!
          gl_FragColor = vec4(
            sin(time) * 0.5 + 0.5,
            sin(time + 2.0) * 0.5 + 0.5,
            sin(time + 4.0) * 0.5 + 0.5,
            1.0
          );
        }
      `
    };
    
    // 🏗️ Build shader program
    this.program = this.createShaderProgram(shaders);
  }
  
  // 🔧 Helper to create shaders
  private createShaderProgram(source: ShaderSource): WebGLProgram {
    // Implementation details...
    return this.gl.createProgram()!;
  }
}

💡 Practical Examples

🛒 Example 1: Particle System

Let’s build a fun particle explosion effect:

// 🎆 Particle definition
interface Particle {
  x: number;          // 📍 Position X
  y: number;          // 📍 Position Y
  vx: number;         // ➡️ Velocity X
  vy: number;         // ⬇️ Velocity Y
  life: number;       // ⏰ Lifetime (0-1)
  size: number;       // 📏 Particle size
  color: string;      // 🎨 Particle color
  emoji?: string;     // 😊 Optional emoji particle!
}

// 🎆 Particle system manager
class ParticleSystem {
  private particles: Particle[] = [];
  private canvas: HTMLCanvasElement;
  private ctx: CanvasRenderingContext2D;
  
  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d')!;
  }
  
  // 💥 Create explosion
  explode(x: number, y: number, count: number = 50): void {
    const emojis = ['✨', '⭐', '💫', '🌟', '⚡'];
    
    for (let i = 0; i < count; i++) {
      const angle = (Math.PI * 2 * i) / count;
      const speed = 2 + Math.random() * 4;
      
      this.particles.push({
        x,
        y,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed,
        life: 1.0,
        size: 3 + Math.random() * 5,
        color: `hsl(${Math.random() * 360}, 100%, 50%)`,
        emoji: Math.random() > 0.7 ? emojis[Math.floor(Math.random() * emojis.length)] : undefined
      });
    }
    
    console.log(`💥 Boom! Created ${count} particles!`);
  }
  
  // 🔄 Update all particles
  update(deltaTime: number): void {
    this.particles = this.particles.filter(particle => {
      // 🌠 Apply gravity
      particle.vy += 0.2;
      
      // 🚀 Update position
      particle.x += particle.vx;
      particle.y += particle.vy;
      
      // ⏰ Reduce lifetime
      particle.life -= deltaTime * 0.02;
      
      // 🗑️ Remove dead particles
      return particle.life > 0;
    });
  }
  
  // 🎨 Draw particles
  render(): void {
    this.particles.forEach(particle => {
      this.ctx.save();
      this.ctx.globalAlpha = particle.life;
      
      if (particle.emoji) {
        // 😊 Draw emoji particle
        this.ctx.font = `${particle.size * 2}px Arial`;
        this.ctx.fillText(particle.emoji, particle.x, particle.y);
      } else {
        // 🎨 Draw colored circle
        this.ctx.beginPath();
        this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
        this.ctx.fillStyle = particle.color;
        this.ctx.fill();
      }
      
      this.ctx.restore();
    });
  }
}

// 🎮 Usage
const particleCanvas = document.getElementById('game') as HTMLCanvasElement;
const particleSystem = new ParticleSystem(particleCanvas);

// 🖱️ Click to explode!
particleCanvas.addEventListener('click', (e) => {
  const rect = particleCanvas.getBoundingClientRect();
  particleSystem.explode(e.clientX - rect.left, e.clientY - rect.top);
});

🎯 Try it yourself: Add different particle shapes, gravity wells, or color gradients!

🎮 Example 2: Simple Game Engine

Let’s create a basic game engine structure:

// 🎮 Game object interface
interface GameObject {
  id: string;
  x: number;
  y: number;
  width: number;
  height: number;
  update(deltaTime: number): void;
  render(ctx: CanvasRenderingContext2D): void;
}

// 🏃‍♂️ Player character
class Player implements GameObject {
  id = 'player';
  x = 100;
  y = 100;
  width = 32;
  height = 32;
  speed = 200; // 🚀 Pixels per second
  emoji = '🚀';
  
  private keys: Set<string> = new Set();
  
  constructor() {
    // ⌨️ Setup input handling
    window.addEventListener('keydown', (e) => this.keys.add(e.key));
    window.addEventListener('keyup', (e) => this.keys.delete(e.key));
  }
  
  update(deltaTime: number): void {
    const distance = this.speed * (deltaTime / 1000);
    
    // 🎮 WASD controls
    if (this.keys.has('w')) this.y -= distance;
    if (this.keys.has('s')) this.y += distance;
    if (this.keys.has('a')) this.x -= distance;
    if (this.keys.has('d')) this.x += distance;
  }
  
  render(ctx: CanvasRenderingContext2D): void {
    // 🚀 Draw player emoji
    ctx.font = '32px Arial';
    ctx.fillText(this.emoji, this.x, this.y);
  }
}

// 🌟 Collectible item
class Star implements GameObject {
  id: string;
  x: number;
  y: number;
  width = 24;
  height = 24;
  collected = false;
  
  constructor(x: number, y: number) {
    this.id = `star-${Date.now()}-${Math.random()}`;
    this.x = x;
    this.y = y;
  }
  
  update(deltaTime: number): void {
    // ✨ Sparkle effect
    this.width = 24 + Math.sin(Date.now() * 0.005) * 4;
    this.height = this.width;
  }
  
  render(ctx: CanvasRenderingContext2D): void {
    if (!this.collected) {
      ctx.font = `${this.width}px Arial`;
      ctx.fillText('⭐', this.x, this.y);
    }
  }
}

// 🎮 Game engine
class GameEngine {
  private objects: Map<string, GameObject> = new Map();
  private canvas: HTMLCanvasElement;
  private ctx: CanvasRenderingContext2D;
  private lastTime = 0;
  
  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d')!;
  }
  
  // ➕ Add game object
  addObject(obj: GameObject): void {
    this.objects.set(obj.id, obj);
    console.log(`✅ Added ${obj.id} to game!`);
  }
  
  // 🔄 Main game loop
  gameLoop = (timestamp: number): void => {
    const deltaTime = timestamp - this.lastTime;
    this.lastTime = timestamp;
    
    // 🧹 Clear screen
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
    // 🔄 Update and render all objects
    this.objects.forEach(obj => {
      obj.update(deltaTime);
      obj.render(this.ctx);
    });
    
    // 🎬 Next frame
    requestAnimationFrame(this.gameLoop);
  };
  
  // 🚀 Start the engine!
  start(): void {
    console.log('🎮 Game engine started!');
    requestAnimationFrame(this.gameLoop);
  }
}

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Sprite Animation System

When you’re ready to level up, try this sprite animation system:

// 🎯 Advanced sprite animation
interface AnimationFrame {
  x: number;      // 📍 X position in sprite sheet
  y: number;      // 📍 Y position in sprite sheet
  width: number;  // 📏 Frame width
  height: number; // 📐 Frame height
  duration: number; // ⏰ Frame duration in ms
}

interface Animation {
  name: string;
  frames: AnimationFrame[];
  loop: boolean;
}

// 🪄 Sprite animator
class SpriteAnimator {
  private animations: Map<string, Animation> = new Map();
  private currentAnimation: string = 'idle';
  private currentFrame = 0;
  private frameTime = 0;
  
  // ✨ Add animation
  addAnimation(animation: Animation): void {
    this.animations.set(animation.name, animation);
    console.log(`🎬 Added animation: ${animation.name}`);
  }
  
  // 🎮 Play animation
  play(name: string): void {
    if (this.currentAnimation !== name) {
      this.currentAnimation = name;
      this.currentFrame = 0;
      this.frameTime = 0;
      console.log(`▶️ Playing: ${name}`);
    }
  }
  
  // 🔄 Update animation
  update(deltaTime: number): AnimationFrame | null {
    const animation = this.animations.get(this.currentAnimation);
    if (!animation) return null;
    
    this.frameTime += deltaTime;
    const currentFrameData = animation.frames[this.currentFrame];
    
    // ⏭️ Next frame?
    if (this.frameTime >= currentFrameData.duration) {
      this.frameTime = 0;
      this.currentFrame++;
      
      // 🔁 Loop or stop
      if (this.currentFrame >= animation.frames.length) {
        if (animation.loop) {
          this.currentFrame = 0;
        } else {
          this.currentFrame = animation.frames.length - 1;
        }
      }
    }
    
    return currentFrameData;
  }
}

🏗️ Advanced Topic 2: WebGL Shader Effects

For the brave developers, here’s a WebGL post-processing effect:

// 🚀 Post-processing effects
type ShaderEffect = 'normal' | 'blur' | 'pixelate' | 'wave';

interface PostProcessor {
  applyEffect(effect: ShaderEffect, time: number): void;
}

// 🌈 Shader effect manager
class WebGLEffects implements PostProcessor {
  private gl: WebGLRenderingContext;
  private shaders: Map<ShaderEffect, WebGLProgram> = new Map();
  
  constructor(gl: WebGLRenderingContext) {
    this.gl = gl;
    this.initializeShaders();
  }
  
  // 🎨 Wave effect shader
  private getWaveShader(): string {
    return `
      precision mediump float;
      uniform sampler2D texture;
      uniform float time;
      varying vec2 vTexCoord;
      
      void main() {
        vec2 uv = vTexCoord;
        // 🌊 Wave distortion
        uv.x += sin(uv.y * 10.0 + time) * 0.02;
        uv.y += sin(uv.x * 10.0 + time) * 0.02;
        
        gl_FragColor = texture2D(texture, uv);
      }
    `;
  }
  
  // ✨ Apply selected effect
  applyEffect(effect: ShaderEffect, time: number): void {
    const program = this.shaders.get(effect);
    if (program) {
      this.gl.useProgram(program);
      const timeLocation = this.gl.getUniformLocation(program, 'time');
      this.gl.uniform1f(timeLocation, time);
      console.log(`✨ Applied ${effect} effect!`);
    }
  }
  
  private initializeShaders(): void {
    // Initialize all shader effects
    console.log('🎨 Initializing shader effects...');
  }
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Forgetting RequestAnimationFrame

// ❌ Wrong way - burns CPU and looks choppy!
class BadGame {
  gameLoop(): void {
    while (true) {
      this.update();
      this.render();
    }
  }
}

// ✅ Correct way - smooth 60 FPS!
class GoodGame {
  private lastTime = 0;
  
  gameLoop = (timestamp: number): void => {
    const deltaTime = timestamp - this.lastTime;
    this.lastTime = timestamp;
    
    this.update(deltaTime);
    this.render();
    
    requestAnimationFrame(this.gameLoop); // 🎬 Smooth animation!
  };
}

🤯 Pitfall 2: Not Handling Canvas Resize

// ❌ Dangerous - stretched graphics!
const canvas = document.getElementById('game') as HTMLCanvasElement;
canvas.style.width = '100%';
canvas.style.height = '100%';

// ✅ Safe - proper resolution!
function resizeCanvas(canvas: HTMLCanvasElement): void {
  const rect = canvas.getBoundingClientRect();
  canvas.width = rect.width * window.devicePixelRatio;
  canvas.height = rect.height * window.devicePixelRatio;
  
  const ctx = canvas.getContext('2d')!;
  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
  
  console.log('📐 Canvas resized properly!');
}

window.addEventListener('resize', () => resizeCanvas(canvas));

🛠️ Best Practices

1. 🎯 Use TypeScript Interfaces: Define types for all game objects
2. 📝 Separate Logic and Rendering: Keep update() and render() methods distinct
3. 🛡️ Handle Edge Cases: Always check canvas context exists
4. 🎨 Optimize Drawing: Batch similar draw calls together
5. ✨ Use Object Pools: Reuse objects instead of creating new ones

🧪 Hands-On Exercise

🎯 Challenge: Build a Space Invaders Clone

Create a simple space shooter game:

📋 Requirements:

• ✅ Player spaceship that moves left/right
• 🏷️ Enemy invaders that move in formation
• 👤 Shooting mechanics with collision detection
• 📅 Score tracking and lives system
• 🎨 Each enemy type needs a unique emoji!

🚀 Bonus Points:

• Add power-ups with special effects
• Implement particle explosions
• Create multiple levels with increasing difficulty

💡 Solution

// 🎯 Space Invaders in TypeScript!
interface SpaceObject {
  x: number;
  y: number;
  width: number;
  height: number;
  emoji: string;
  alive: boolean;
}

interface Bullet extends SpaceObject {
  vy: number;
}

class SpaceInvaders {
  private canvas: HTMLCanvasElement;
  private ctx: CanvasRenderingContext2D;
  private player: SpaceObject;
  private enemies: SpaceObject[][] = [];
  private bullets: Bullet[] = [];
  private score = 0;
  private lives = 3;
  private enemyDirection = 1;
  
  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d')!;
    
    // 🚀 Initialize player
    this.player = {
      x: canvas.width / 2 - 16,
      y: canvas.height - 60,
      width: 32,
      height: 32,
      emoji: '🚀',
      alive: true
    };
    
    // 👾 Create enemy grid
    this.createEnemies();
    
    // 🎮 Controls
    this.setupControls();
  }
  
  // 👾 Create enemy formation
  private createEnemies(): void {
    const enemyEmojis = ['👾', '👽', '🛸'];
    
    for (let row = 0; row < 5; row++) {
      this.enemies[row] = [];
      for (let col = 0; col < 11; col++) {
        this.enemies[row][col] = {
          x: col * 50 + 50,
          y: row * 40 + 50,
          width: 30,
          height: 30,
          emoji: enemyEmojis[Math.floor(row / 2)],
          alive: true
        };
      }
    }
    console.log('👾 Enemy formation ready!');
  }
  
  // 🎮 Setup keyboard controls
  private setupControls(): void {
    window.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowLeft' && this.player.x > 0) {
        this.player.x -= 20;
      }
      if (e.key === 'ArrowRight' && this.player.x < this.canvas.width - this.player.width) {
        this.player.x += 20;
      }
      if (e.key === ' ') {
        this.shoot();
      }
    });
  }
  
  // 🔫 Fire bullet
  private shoot(): void {
    this.bullets.push({
      x: this.player.x + this.player.width / 2 - 4,
      y: this.player.y,
      width: 8,
      height: 16,
      emoji: '🔥',
      vy: -10,
      alive: true
    });
    console.log('🔫 Pew pew!');
  }
  
  // 🔄 Update game state
  update(): void {
    // 🚀 Update bullets
    this.bullets = this.bullets.filter(bullet => {
      bullet.y += bullet.vy;
      
      // 💥 Check enemy collisions
      for (const row of this.enemies) {
        for (const enemy of row) {
          if (enemy.alive && this.checkCollision(bullet, enemy)) {
            enemy.alive = false;
            bullet.alive = false;
            this.score += 10;
            console.log(`💥 Hit! Score: ${this.score}`);
          }
        }
      }
      
      return bullet.alive && bullet.y > 0;
    });
    
    // 👾 Move enemies
    this.moveEnemies();
  }
  
  // 👾 Enemy movement
  private moveEnemies(): void {
    let shouldDescend = false;
    
    // Check boundaries
    for (const row of this.enemies) {
      for (const enemy of row) {
        if (enemy.alive) {
          if ((enemy.x <= 0 && this.enemyDirection < 0) ||
              (enemy.x >= this.canvas.width - enemy.width && this.enemyDirection > 0)) {
            shouldDescend = true;
          }
        }
      }
    }
    
    // Move enemies
    for (const row of this.enemies) {
      for (const enemy of row) {
        if (shouldDescend) {
          enemy.y += 20;
        } else {
          enemy.x += this.enemyDirection * 2;
        }
      }
    }
    
    if (shouldDescend) {
      this.enemyDirection *= -1;
    }
  }
  
  // 💥 Collision detection
  private checkCollision(a: SpaceObject, b: SpaceObject): boolean {
    return a.x < b.x + b.width &&
           a.x + a.width > b.x &&
           a.y < b.y + b.height &&
           a.y + a.height > b.y;
  }
  
  // 🎨 Render everything
  render(): void {
    // 🧹 Clear screen
    this.ctx.fillStyle = '#000033';
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    
    // 🚀 Draw player
    this.ctx.font = '32px Arial';
    this.ctx.fillText(this.player.emoji, this.player.x, this.player.y);
    
    // 👾 Draw enemies
    for (const row of this.enemies) {
      for (const enemy of row) {
        if (enemy.alive) {
          this.ctx.font = '30px Arial';
          this.ctx.fillText(enemy.emoji, enemy.x, enemy.y);
        }
      }
    }
    
    // 🔥 Draw bullets
    this.ctx.font = '16px Arial';
    for (const bullet of this.bullets) {
      this.ctx.fillText(bullet.emoji, bullet.x, bullet.y);
    }
    
    // 📊 Draw UI
    this.ctx.fillStyle = 'white';
    this.ctx.font = '20px Arial';
    this.ctx.fillText(`Score: ${this.score} 🏆`, 10, 30);
    this.ctx.fillText(`Lives: ${'❤️'.repeat(this.lives)}`, this.canvas.width - 100, 30);
  }
}

// 🎮 Start the game!
const gameCanvas = document.getElementById('game') as HTMLCanvasElement;
const game = new SpaceInvaders(gameCanvas);

function gameLoop(): void {
  game.update();
  game.render();
  requestAnimationFrame(gameLoop);
}

gameLoop();
console.log('🎮 Space Invaders started! Use arrow keys and space to play!');

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

• ✅ Create Canvas games with smooth animations 💪
• ✅ Use WebGL for advanced graphics effects 🛡️
• ✅ Build game engines with TypeScript’s type safety 🎯
• ✅ Handle input and collisions like a pro 🐛
• ✅ Optimize performance for 60 FPS gameplay! 🚀

Remember: Game development is about experimentation and fun! Don’t be afraid to try wild ideas. 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered game development with Canvas and WebGL!

Here’s what to do next:

1. 💻 Build your own game using the concepts learned
2. 🏗️ Explore game physics libraries like Matter.js
3. 📚 Learn about game design patterns and architectures
4. 🌟 Share your games with the world!

Remember: Every great game started with a simple prototype. Keep creating, keep learning, and most importantly, have fun! 🚀

Happy gaming! 🎮🚀✨