2.2.8 Cycle 8 - Add Health Pickups

Design

Objectives

In this cycle I'm going to add the ability to gain health, through health packs or items that will allow the player to play for longer, and make the game less fustrating when playing. This should make it more enjoyable, and adds another element of reward, other than just completing the game, as you're being rewarded with extra health. They should come frequently, but not so much so that it's easy to complete each level.

Usability Features

Key Variables

Variable Name
Use

healthPickup

This is the sprite that moves down the screen.

health

This is the variable that stores the player's health.

healthSound

This is the sound that is output when the health is picked up.

Pseudocode

procedure healthAppear
    random X = random between 0, window width 
    healthPickup = sprite @ random X
    add physics to healthPickup
    
    healthPickup Y velocity = 200
    healthPickup X velocity = 20
end procedure

procedure increaseHealth
    health + 50
    play sound healthSound
    add text health
    wait 800 ms
    remove text health
end procedure

Development

Outcome

Game.js
function healthAppear() {
  let randomX = Math.floor(Math.random() * 600);
  healthPickup = game.add.sprite(randomX, 20, 'healthPickup');
  healthPickup.enableBody = true;
  game.physics.arcade.enable(healthPickup, Phaser.Physics.ARCADE);
  healthPickup.anchor.set(0.5, 1);

  healthPickup.body.immovable = false;
  healthPickup.body.velocity.x = 20;
  healthPickup.body.velocity.y = 200;
  healthPickup.game.outOfBoundsKill = false;
}

function increaseHealth(healthPickup) {
  healthPickup.kill();
  health += 50;
  let healthSound = game.add.sound('healthGet');
  healthSound.play();
  healthText.innerHTML = `Health: ${health}`;
  healthText.classList.add('glowText');
  setInterval(function() {
    healthText.classList.remove('glowText');
  }, 800);
}

Challenges

The challenge of this was making the health be shown on screen, as it kept saying that the health was a null value, when it was actually a number and being changed when hit by a ship, or when picking up health. Other than that it was pretty easy to implement, and worked well in the game as expected.

Testing

Evidence for testing

Tests

Test
Instructions
What I expect
What actually happens
Pass/Fail

1

Run code, and make it far enough into game

Health to be added and shown on screen

Health gets added but nothing shows up on screen

Fail

2

Run code, and make it far enough into game

Health to be added and shown on screen

As expected

Pass

Evidence

A health block at the top of the screen, as well as the pattern of the enemy ships on the left.

What next?

  • I'm going to add the ability to see the high score and current score

  • I also want to add the health on the screen to make it more obvious when you're on low health

Last updated