Chapter 77: Game Components
1. What are “Game Components” actually? (Very clear definition first)
Game Components are the small, reusable building blocks that make up a game — like Lego pieces that you snap together to create the full game.
Instead of writing one giant 1000-line file with everything mixed up (player code + enemy code + bullet code + score code), you break the game into small components:
- Player Component — handles movement, jumping, shooting
- Enemy Component — handles AI, health, attack
- Bullet Component — handles flying, collision, damage
- Score Component — handles points, high score, UI
- Background Component — handles scrolling stars, parallax
- Sound Component — handles music, effects
Each component is independent — it does one job well and talks to other components through simple messages (like “player shot bullet” or “enemy died +5 points”).
Why components make games 10x easier:
- Easy to add new things (new enemy type? Copy enemy component → change 2 lines)
- Easy to fix bugs (bullet goes wrong direction? Fix only bullet component)
- Easy to reuse (player component works in Game 1, Game 2, Game 3)
- Professional — big games (Candy Crush, PUBG Mobile) use thousands of components
2. Game Components vs No Components (Real Comparison)
Bad way (no components — student mistake):
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// 500 lines all mixed up let playerX = 100; let enemyX = 200; let bullets = []; let score = 0; // update() — 200 lines of mixed code function update() { // player movement playerX += speed; // enemy AI enemyX -= enemySpeed; // bullet movement for (let i = 0; i < bullets.length; i++) { bullets[i].x += 5; } // collision // score update // sound // UI // ... mixed mess } |
Good way (with components):
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 10 small files / functions const player = new Player(); const enemy = new Enemy(); const bullets = BulletSystem(); const score = ScoreManager(); // update() — clean & simple function update() { player.update(); enemy.update(); bullets.update(); score.update(); } |
3. Most Important Game Components (The Top 8 You Need)
| Component Name | What it does (one job only) | Real example game use | Code snippet example |
|---|---|---|---|
| Player | Movement, jumping, shooting, health | Your character (Mario, Pacman) | player.move(keys); player.shoot(); |
| Enemy | AI movement, attack, health, death animation | Bad guys chasing you | enemy.followPlayer(); enemy.attack(); |
| Bullet / Projectile | Fly in straight line, collision, disappear | Bullets, arrows, fireballs | bullet.move(); bullet.checkCollision(); |
| Score / UI | Show score, lives, timer, high score | Top-left numbers in every game | ui.updateScore(score); ui.drawLives(lives); |
| Background | Scrolling stars, parallax layers, animations | Space background, city skyline | bg.scroll(speed); bg.draw(); |
| Collision System | Check if things touch/hit each other | Bullet hits enemy, player hits wall | collision.check(player, enemies); |
| Sound Manager | Play music, sound effects, volume control | Jump sound, explosion, background music | sound.play(‘jump’); sound.setVolume(0.5); |
| Input Handler | Keyboard, mouse, touch, gamepad | Arrow keys, WASD, tap to jump | input.isKeyDown(‘ArrowUp’); |
4. Your First Game with Components – Organized Snake Game (Copy-Paste & Run)
Instead of one messy file, we’ll make 6 small components that work together.
Create game-components-snake.html:
HTML
|
0 1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF |
