18 KiB

Raw Blame History

Build a Space Game Part 5: Scoring and Lives

journey
    title Your Game Design Journey
    section Player Feedback
      Understand scoring psychology: 3: Student
      Learn visual communication: 4: Student
      Design reward systems: 4: Student
    section Technical Implementation
      Canvas text rendering: 4: Student
      State management: 5: Student
      Event-driven updates: 5: Student
    section Game Polish
      User experience design: 5: Student
      Balance challenge and reward: 5: Student
      Create engaging gameplay: 5: Student

Pre-Lecture Quiz

Pre-lecture quiz

Ready to make your space game feel like a real game? Let's add scoring points and managing lives - the core mechanics that transformed early arcade games like Space Invaders from simple demonstrations into addictive entertainment. This is where your game becomes truly playable.

mindmap
  root((Game Feedback Systems))
    Visual Communication
      Text Rendering
      Icon Display
      Color Psychology
      Layout Design
    Scoring Mechanics
      Point Values
      Reward Timing
      Progress Tracking
      Achievement Systems
    Life Management
      Risk vs Reward
      Player Agency
      Difficulty Balance
      Recovery Mechanics
    User Experience
      Immediate Feedback
      Clear Information
      Emotional Response
      Engagement Loops
    Implementation
      Canvas API
      State Management
      Event Systems
      Performance

Drawing Text on Screen - Your Game's Voice

To display your score, we need to learn how to render text on the canvas. The fillText() method is your primary tool for this - it's the same technique used in classic arcade games to show scores and status information.

flowchart LR
    A["📝 Text Content"] --> B["🎨 Styling"]
    B --> C["📍 Positioning"]
    C --> D["🖼️ Canvas Render"]
    
    E["Font Family"] --> B
    F["Font Size"] --> B
    G["Color"] --> B
    H["Alignment"] --> B
    
    I["X Coordinate"] --> C
    J["Y Coordinate"] --> C
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5

You have complete control over the text appearance:

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Dive deeper into adding text to a canvas - you might be surprised at how creative you can get with fonts and styling!

Lives - More Than Just a Number

In game design, a "life" represents the player's margin for error. This concept dates back to pinball machines, where you'd get multiple balls to play with. In early video games like Asteroids, lives gave players permission to take risks and learn from mistakes.

flowchart TD
    A["🎮 Player Action"] --> B{"Risk Assessment"}
    
    B --> C["High Risk, High Reward"]
    B --> D["Safe Strategy"]
    
    C --> E{"Outcome"}
    D --> F["Steady Progress"]
    
    E -->|Success| G["🏆 Big Points"]
    E -->|Failure| H["💔 Lose Life"]
    
    H --> I{"Lives Remaining?"}
    I -->|Yes| J["🔄 Try Again"]
    I -->|No| K["💀 Game Over"]
    
    J --> B
    G --> B
    F --> B
    
    style C fill:#ffebee
    style D fill:#e8f5e8
    style G fill:#e3f2fd
    style H fill:#fff3e0

Visual representation matters significantly - displaying ship icons instead of just "Lives: 3" creates immediate visual recognition, similar to how early arcade cabinets used iconography to communicate across language barriers.

Building Your Game's Reward System

Now we'll implement the core feedback systems that keep players engaged:

sequenceDiagram
    participant Player
    participant GameEngine
    participant ScoreSystem
    participant LifeSystem
    participant Display
    
    Player->>GameEngine: Shoots Enemy
    GameEngine->>ScoreSystem: Award Points
    ScoreSystem->>ScoreSystem: +100 points
    ScoreSystem->>Display: Update Score
    
    Player->>GameEngine: Collides with Enemy
    GameEngine->>LifeSystem: Lose Life
    LifeSystem->>LifeSystem: -1 life
    LifeSystem->>Display: Update Lives
    
    alt Lives > 0
        LifeSystem->>Player: Continue Playing
    else Lives = 0
        LifeSystem->>GameEngine: Game Over
    end

Scoring system: Each destroyed enemy ship awards 100 points (round numbers are easier for players to calculate mentally). The score displays in the bottom left corner.
Life counter: Your hero starts with three lives - a standard established by early arcade games to balance challenge with playability. Each collision with an enemy costs one life. We'll display remaining lives in the bottom right using ship icons .

Let's Get Building!

First, set up your workspace. Navigate to the files in your your-work sub folder. You should see these files:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

To test your game, start the development server from the your_work folder:

cd your-work
npm start

This runs a local server at http://localhost:5000. Open this address in your browser to see your game. Test the controls with arrow keys and try shooting enemies to verify everything works.

flowchart TD
    A["1. Asset Loading"] --> B["2. Game Variables"]
    B --> C["3. Collision Detection"]
    C --> D["4. Hero Enhancement"]
    D --> E["5. Display Functions"]
    E --> F["6. Event Handlers"]
    
    G["Life Icon Image"] --> A
    H["Score & Lives Tracking"] --> B
    I["Hero-Enemy Intersections"] --> C
    J["Points & Life Methods"] --> D
    K["Text & Icon Rendering"] --> E
    L["Reward & Penalty Logic"] --> F
    
    F --> M["🎮 Complete Game"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec
    style M fill:#e1f5fe

Time to Code!

Grab the visual assets you'll need. Copy the life.png asset from the solution/assets/ folder into your your-work folder. Then add the lifeImg to your window.onload function:
```
lifeImg = await loadTexture("assets/life.png");
```

Don't forget to add the lifeImg to your assets list:

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

Set up your game variables. Add some code to track your total score (starting at 0) and remaining lives (starting at 3). We'll display these on screen so players always know where they stand.

Implement collision detection. Extend your updateGameObjects() function to detect when enemies collide with your hero:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

Add life and point tracking to your Hero.

Initialize the counters. Under this.cooldown = 0 in your Hero class, set up life and points:
```
this.life = 3;
this.points = 0;
```

Show these values to the player. Create functions to draw these values on screen:

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

Hook everything into your game loop. Add these functions to your window.onload function right after updateGameObjects():
```
drawPoints();
drawLife();
```

🔄 Pedagogical Check-in

Game Design Understanding: Before implementing consequences, ensure you understand:

✅ How visual feedback communicates game state to players
✅ Why consistent placement of UI elements improves usability
✅ The psychology behind point values and life management
✅ How canvas text rendering differs from HTML text

Quick Self-Test: Why do arcade games typically use round numbers for point values? Answer: Round numbers are easier for players to calculate mentally and create satisfying psychological rewards

User Experience Principles: You're now applying:

Visual Hierarchy: Important information positioned prominently
Immediate Feedback: Real-time updates to player actions
Cognitive Load: Simple, clear information presentation
Emotional Design: Icons and colors that create player connection

Implement game consequences and rewards. Now we'll add the feedback systems that make player actions meaningful:

Collisions cost lives. Every time your hero crashes into an enemy, you should lose a life.

Add this method to your Hero class:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Shooting enemies earns points. Each successful hit awards 100 points, providing immediate positive feedback for accurate shooting.

Extend your Hero class with this increment method:

  incrementPoints() {
    this.points += 100;
  }

Now connect these functions to your collision events:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ Curious about other games built with JavaScript and Canvas? Do some exploring - you might be amazed at what's possible!

After implementing these features, test your game to see the complete feedback system in action. You should see life icons in the bottom right, your score in the bottom left, and watch as collisions reduce lives while successful shots increase your score.

Your game now has the essential mechanics that made early arcade games so compelling - clear goals, immediate feedback, and meaningful consequences for player actions.

🔄 Pedagogical Check-in

Complete Game Design System: Verify your mastery of player feedback systems:

✅ How do scoring mechanics create player motivation and engagement?
✅ Why is visual consistency important for user interface design?
✅ How does the life system balance challenge with player retention?
✅ What role does immediate feedback play in creating satisfying gameplay?

System Integration: Your feedback system demonstrates:

User Experience Design: Clear visual communication and information hierarchy
Event-Driven Architecture: Responsive updates to player actions
State Management: Tracking and displaying dynamic game data
Canvas Mastery: Text rendering and sprite positioning
Game Psychology: Understanding player motivation and engagement

Professional Patterns: You've implemented:

MVC Architecture: Separation of game logic, data, and presentation
Observer Pattern: Event-driven updates for game state changes
Component Design: Reusable functions for rendering and logic
Performance Optimization: Efficient rendering in game loops

⚡ What You Can Do in the Next 5 Minutes

Experiment with different font sizes and colors for the score display
Try changing the point values and see how it affects gameplay feel
Add console.log statements to track when points and lives change
Test edge cases like running out of lives or achieving high scores

🎯 What You Can Accomplish This Hour

Complete the post-lesson quiz and understand game design psychology
Add sound effects for scoring and losing lives
Implement a high score system using localStorage
Create different point values for different enemy types
Add visual effects like screen shake when losing a life

📅 Your Week-Long Game Design Journey

Complete the full space game with polished feedback systems
Implement advanced scoring mechanics like combo multipliers
Add achievements and unlockable content
Create difficulty progression and balancing systems
Design user interfaces for menus and game over screens
Study other games to understand engagement mechanisms

🌟 Your Month-Long Game Development Mastery

Build complete games with sophisticated progression systems
Learn game analytics and player behavior measurement
Contribute to open source game development projects
Master advanced game design patterns and monetization
Create educational content about game design and user experience
Build a portfolio showcasing game design and development skills

🎯 Your Game Design Mastery Timeline

timeline
    title Game Design & Player Feedback Learning Progression
    
    section Foundation (10 minutes)
        Visual Communication: Text rendering
                           : Icon design
                           : Layout principles
                           : Color psychology
        
    section Player Psychology (20 minutes)
        Motivation Systems: Point values
                          : Risk vs reward
                          : Progress feedback
                          : Achievement design
        
    section Technical Implementation (30 minutes)
        Canvas Mastery: Text positioning
                      : Sprite rendering
                      : State management
                      : Performance optimization
        
    section Game Balance (40 minutes)
        Difficulty Design: Life management
                         : Scoring curves
                         : Player retention
                         : Accessibility
        
    section User Experience (50 minutes)
        Interface Design: Information hierarchy
                        : Responsive feedback
                        : Emotional design
                        : Usability testing
        
    section Advanced Systems (1 week)
        Game Mechanics: Progression systems
                      : Analytics integration
                      : Monetization design
                      : Community features
        
    section Industry Skills (1 month)
        Professional Development: Team collaboration
                                : Design documentation
                                : Player research
                                : Platform optimization

🛠️ Your Game Design Toolkit Summary

After completing this lesson, you now have mastered:

Player Psychology: Understanding motivation, risk/reward, and engagement loops
Visual Communication: Effective UI design using text, icons, and layout
Feedback Systems: Real-time response to player actions and game events
State Management: Tracking and displaying dynamic game data efficiently
Canvas Text Rendering: Professional text display with styling and positioning
Event Integration: Connecting user actions to meaningful game consequences
Game Balance: Designing difficulty curves and player progression systems

Real-World Applications: Your game design skills apply directly to:

User Interface Design: Creating engaging and intuitive interfaces
Product Development: Understanding user motivation and feedback loops
Educational Technology: Gamification and learning engagement systems
Data Visualization: Making complex information accessible and engaging
Mobile App Development: Retention mechanics and user experience design
Marketing Technology: Understanding user behavior and conversion optimization

Professional Skills Gained: You can now:

Design user experiences that motivate and engage users
Implement feedback systems that guide user behavior effectively
Balance challenge and accessibility in interactive systems
Create visual communication that works across different user groups
Analyze user behavior and iterate on design improvements

Game Development Concepts Mastered:

Player Motivation: Understanding what drives engagement and retention
Visual Design: Creating clear, attractive, and functional interfaces
System Integration: Connecting multiple game systems for cohesive experience
Performance Optimization: Efficient rendering and state management
Accessibility: Designing for different skill levels and player needs

Next Level: You're ready to explore advanced game design patterns, implement analytics systems, or study game monetization and player retention strategies!

🌟 Achievement Unlocked: You've built a complete player feedback system with professional game design principles!

GitHub Copilot Agent Challenge 🚀

Use the Agent mode to complete the following challenge:

Description: Enhance the space game's scoring system by implementing a high score feature with persistent storage and bonus scoring mechanics.

Prompt: Create a high score system that saves the player's best score to localStorage. Add bonus points for consecutive enemy kills (combo system) and implement different point values for different enemy types. Include a visual indicator when the player achieves a new high score and display the current high score on the game screen.

🚀 Challenge

You now have a functional game with scoring and lives. Consider what additional features might enhance the player experience.

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

Want to explore more? Research different approaches to game scoring and life systems. There are fascinating game engines out there like PlayFab that handle scoring, leaderboards, and player progression. How might integrating something like that take your game to the next level?

Assignment

Build a Scoring Game

18 KiB Raw Blame History

Build a Space Game Part 5: Scoring and Lives

Pre-Lecture Quiz

Drawing Text on Screen - Your Game's Voice

Lives - More Than Just a Number

Building Your Game's Reward System

Let's Get Building!

Time to Code!

🔄 Pedagogical Check-in

🔄 Pedagogical Check-in

⚡ What You Can Do in the Next 5 Minutes

🎯 What You Can Accomplish This Hour

📅 Your Week-Long Game Design Journey

🌟 Your Month-Long Game Development Mastery

🎯 Your Game Design Mastery Timeline

🛠️ Your Game Design Toolkit Summary

GitHub Copilot Agent Challenge 🚀

🚀 Challenge

Post-Lecture Quiz

Review & Self Study

Assignment

18 KiB

Raw Blame History