Feb
19
2015
by eidam

My first html5 canvas game part1

In this post, I would like to present you my first attempt to code a javascript game based on canvas. As my experiences with this technology are limited, I had to improvise a bit. My goal was to create a game where a triangle shaped spaceship under the control of player tries to avoid all the asteroids around and pick randomly generated bonuses.

Canvas – part 1: Basic functions

Before I have started, I realized that canvas animations are based on infinite re-rendering. Therefore I built a canvas object with method “redraw”, that should handle all the actions needed before and after scene re-rendering. And also this method has to run itself recursively with window.setTimeout.

 

Now, I would like to write method to register a new object to this canvas. All these registered objects should be then rerendered every time, the redraw method is called. Method clear would simple fill the canvas with white rectangle and draws black borders:

 

Circles drawing

For drawing geometrical shapes, I prepared some simple functions. This one takes arguments for canvas, coordinates, radius, fill and stroke color and draws a circle. It will be used for drawing asteroids:

 

Triangle (ship) drawing

For drawing triangles, there is another simple function

 

At this point, I would like to think little ahead : I will count with another paramether – side. Side will represent the actual “azimuth” of our spaceship. We will write alternatives for 4 possible sides:

 

Asteroids

Now, the objects for controlling asteroids and spaceships will be created. First, I will look on Asteroid object:

As you can see, the object has one argument and it is canvas object. This should be done differently and also a way better, but for our purposes it is good enough. X and y are coordinates of asteroid for every moment of the game. Size and angle is generated randomly on the beginning. The purpose for restart method is to move asteroid again on the top of scene, every time it touches the bottom border.

Redraw function is, as I mentioned before, a method that is called constantly with every scene render. In this function I am calling createCircle I defined a few lines above.

 

Ship

Now, the Spaceship object:

Similar to asteroid, also the ship is represented by its coordinates, size and speed. I will also count with side variable that will be changed by move function. And then only by knowing the side of our ship, we can change the coordinates for object on scene rendering.

 

Controlling ship

Now, I finally add a keyboard event listeners, so one can control it’s ship:

The numbers are codes for corresponding keys we are touching. And every time this happens this function calls a move method on our ship with new side parameter.

 

Canvas – part 2: Collisions

Now we can control our ship but that’s pretty much all. So let’s create some interaction with items around. Firstly the collision with borders, that will be implemented to our Canvas as a method:

It says, that every time the ship reaches the bounding coordinates, it simply stops moving.  This was quite easy, there will be more problems with asteroids collisions:

 

Canvas – part 3: Redrawing

Here we iterate through all the asteroids and ask, if its bounds are not “inside the ship”. If yes, it will return alert and returns asteroids again on top of scene. So this two collision controllers should be now implemented to our canvas redraw method:

 

Canvas – part 4: Initialization of scene

And now, the last method for canvas object, that will initialize all our objects:

 

Now we are ready to merge everything and see the results. Yes, its hardly playable and funny at this point, but it’s just a basic example. In the second part, I will try to add some bonuses to pick and points to collect…

The demo of first part is here :

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

And the second part.