Add a Health Bar

Learn how to make a super cool zombie game

1. In room.js Create an attachTo() function inside the onJoin() function to add a health bar

	g.attachTo('players', client.sessionId, {  
		name: 'healthBar',
		x: -50,
		y: 40,
		width: 100,
		height: 10,
		type: 'bar',
		filled: 100

2. In room.js, Create a handleCollision() function inside the onUpdate() function so that our health bar will update when we collide with zombies.

	g.handleCollision('players', 'zombies', (player) => {
		if (player.healthBar.filled > 0) {
			player.healthBar.filled -= 0.1;

Download your zip, and upload it to, and you should have a background!

Add Zombies
Setup Bullets

Need Help?

Proofread your code, check with your team and classmates, and if you’re still stuck!

Click Here for Help