Learn JavaScript with Phaser
Game Mechanic: Player Health
The game mechanic of having a health meter which is depleted when you come into contact with enemies and their projectiles can be very welcome if you have a challenging layout of levels. This can stop your game from being too hard.
Check the Code: what we need to know and do
Our health mechanic is going to build on the code we are using when our player collides with a hazard. As such you may need to know about.
- Collision detection using overlap() function- see Adding a Reward
- Using game timers - see Adding Animated Game Scenes
We need to create a graphical health bar which will go down as our player hits the enemy.
One of the challenges is that we also need to move our player to the side of the enemy and stop their health from draining too much all the time the player is overlapping with the enemy.
The code for a minimal example of the Player Health Bar game mechanic is shown here - https://player-health-meter.glitch.me/
Going over the code:
In create we can set the health of our player to be a value of 100;
player.health = 100;
Health is actually a built in property of Phaser and when that reaches zero our player will dissapear automatically.
Next we need to build and display the graphical health bar and this is done by calling the following function one at the end of the create function.
playState.createHealthBar = function () {
meters = game.add.group();
// create a plain black rectangle to use as the background of a health meter
var meterBackgroundBitmap = game.add.bitmapData(20, 100);
meterBackgroundBitmap.ctx.beginPath();
meterBackgroundBitmap.ctx.rect(0, 0, meterBackgroundBitmap.width, meterBackgroundBitmap.height);
meterBackgroundBitmap.ctx.fillStyle = '#000000';
meterBackgroundBitmap.ctx.fill();
// create a Sprite using the background bitmap data
var healthMeterBG = game.add.sprite(10, 10, meterBackgroundBitmap);
healthMeterBG.fixedToCamera = true;
meters.add(healthMeterBG);
// create a red rectangle to use as the health meter itself
var healthBitmap = game.add.bitmapData(12, 92);
healthBitmap.ctx.beginPath();
healthBitmap.ctx.rect(0, 0, healthBitmap.width, healthBitmap.height);
healthBitmap.ctx.fillStyle = '#FF0000';
healthBitmap.ctx.fill();
// create the health Sprite using the red rectangle bitmap data
health = game.add.sprite(14, 14, healthBitmap);
meters.add(health);
health.fixedToCamera = true;
};
The code above creates a black box to act as the background and then a red box to act as the health meter.
Now have a look at the updated hitHazard part of our code;
playState.hitHazard = function (player, hazard) {
if (!player.immune) {
player.damage(10);
playState.updateHealthBar();
player.immune = true;
game.time.events.add(200, function () {player.immune = false;}, this);
}
if (player.body.position.x < enemy1.body.position.x) {
player.body.velocity.x = -200;
}
else {
player.body.velocity.x = 200;
}
};
We can see here that if the player isn't already immune then we zap the players' health by 10 points and make a call to a function to update the health bar, e.g. to reduce the value a bit. We also add code to say that the player is now immune and will stay that way for 200 miliseconds.
This time is enough to prevent this section of code running again until we can run the next code which checks to see if the player is more to the right or to the left of the enemy and then changes their velocity value to bump them out of the way of the enemy. Doing this then stops the hitHazard function from being called as the player and the enemy are no longer overlapping.
That's it. We hope you enjoy adding this game dynamic to your game
Links to find out more
In this book:
Follow the links to resources in this book find out about;
- Collision detection using overlap() function- see Adding a Reward
- Using game timers - see Adding Animated Game Scenes
Follow up Resources:
If you want find out more about the code for doing the maths and the process to update the health meter then there is a more in depth look at this dynamic at the website where the code was originally found - https://thoughts.amphibian.com/2015/12/putting-health-meter-in-my-phaser-game.html