Back to Home
Home / javascript-games / Build a Space Game Part 5: Scoring and Lives

Build a Space Game Part 5: Scoring and Lives

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.

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. You have complete control over the text appearance: ✅ 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. 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: - 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: To test your game, start the development server from the your_work folder: 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.

Time to Code!

  1. 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");
  1. Don’t forget to add the lifeImg to your assets list:
let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();
  1. 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.
  2. 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 });
  1. Add life and point tracking to your Hero.
  2. Initialize the counters. Under this.cooldown = 0 in your Hero class, set up life and points:
this.life = 3;
this.points = 0;
  1. 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);
  1. 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 1. Implement game consequences and rewards. Now we’ll add the feedback systems that make player actions meaningful: 1. 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;
  1. 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

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
Example:

Follow the lesson from Microsoft Web-Dev-For-Beginners course

Tags: web,development
Back to javascript-games Back to Home