by eidam

My first html5 canvas game part2

This is the second part of my tutorial on building basic html5 canvas game (the firts part is here). Last time, we built some easy logic for spawning meteorits and their movement, control of ship and some collision events. Now we would like to add some counters for lives and points and some bonuses to make this game even more entertaining.


We will start with defining the counters that will show us the number of lives, number of actual points and max speed of our spaceship. At the beginning of our code, we add global variables hearts, bonus and speed and assign them in restart method of canvas object . We also choose a default number of lives and points at the beginning of the game. The restart method should now look:


Now we have to define our label objects:



Has a reference to canvas (this.c), runs a addObject function on constructor (this method registers object for rendering purposes) and has the essential redraw() method. This way, the ScoreLabel instance increases our number of points by 1 every time its renders and place this number on position [20,30] in canvas.



HeartsLabel object is defined the same way as ScoreLabel. The only difference is that we dont want to display the number of our lives by the text, but by heart symbols.



Now, the SpeedLabel object is easy to define:



Lets define the bonuses. Bonuses are objects that appear randomly on canvas and they disappear on collision with spaceship. When this collision happens, we would like to create some event or redefine some values. In our case, we will define a 4 types of bonuses: bonus points, extra life, speed upgrade and freeze.

Drawing bonuses

We will start with “frogs” and define the function for drawing this bonuses on canvas. This function seems maybe a little bit complicated and longer, but its just about adding a coordinate to line:

Now I could comment inputs. Ctx is simple the canvas object, x and y are coordinates where we would like to start drawing our symbols. And mode is a variable we are defining a type of bonus to be drawn : “points” stands for bonus points, “heart” for extra life, “speed” for speed upgrade.


Bonus Controller

As controller I mean the object, that defines the mode and position of bonus and takes care about its rendering. He it is:

The interesting thing here is the restart method. In its first part, it randomly generate coordinates for new bonus. while loop is there for avoiding the corners of canvas. In the second part of this method, we simulate the dice roll by Math.round(Math.random() * 6). According to the result of this dice, we choose a new mode for a bonus.


Bonus collision

Collision with bonus will be detected in canvas object. Here we define a new method bonusCollision:

This methods also defines events for concrete bonus types. This way, collision with speed will increment speed value by 1 and so on. Maybe the more complicated event is the collision with freeze bonus, that should hold our asteroids for a while. We also need to prevent effect of multiple freeze bonuses by asking for value of boolean type global variable freezeOn. If its false, then we store speed of all asteroid in originalSpeed array and iterate through all asteroids setting their speed to 0 and color to #22aaee (so they will look like “frozen”). After timeout set to 2000 miliseconds, we will set the speed back to original values from originalSpeed variable.

After this collision we call the restart method of bonus object to create a new bonus.


Other changes

There are also other small changes we need to do for having this example complete. We need to set default state of global variable freezeOn to false, we need to minus one life by “this.lives -= 1;” when collision with asteroid in our asteriodCollision method or we should redefine a little our redraw method of our canvas object so we can check bonusCollision state and verify that there are some lives remaining:





See the Pen meteors test game by Eidam (@eidam61) on CodePen.