Hugo’s Games Features

In this version, the goodies start at the top of the canvas, and they fall down. Of course, this motion can be in any direction, they could start on the left and move right.

This version also has a function to spawn new goodies. Randomly, new goodies are generated, and they appear at the top and fall like the initial ones.

Note that this version of the game also has code that changes the font used for the labels. If you want to paint text using custom fonts in your game, you can load them in the CSS (or using Google Fonts, like I do in this example), and see the code of this game sample for how to handle the fonts on the canvas.

Falling goodies

In this version, I have added baddies. When you hit a baddie, you lose the game and a Game Over frame is shown.

Baddies are like goodies. So everything you do to create the goodies, you apply the same stuff to the baddies. What is different is what happens when the player has a collision with a baddie.

Baddies

In this version, instead of winning when you collect the three initial goodies, you move to the next level. At each level, three new goodies are spanwed, and the speed of the player increases. There is no winning in this version.

You will notice that when the player starts to go fast, it often gets stuck on the sides of the canvas. This is normal. It is a bug of the system. Keep in mind that this is simple code. It does not fix all the problems, but that’s okay.

Levels

In this version, the player has a direction, it’s a triangle. And the player looks differently whether you are going left, right, up or down. This is done with a sprite sheet.

This version is a simple application of the sprite sheet concept to the game. This can be applied to many different elements of the game, not just the player. I have also added a simple animation on the wind screen based on the sprite sheet.

So, with a bit of imagination, you can easily use this code to make all sorts of changes to the images being rendered in different situations in your game.

Player orientation

In this version, a timer counts the time elapsed since the start of the game. Time is displayed in seconds as well as in minutes and seconds, like a clock.

This is a very simple solution to handle time. Since there are many different things you might want to do with time, I cannot give you all the possibilities. But I tried to show you with this code how to handle a JS timer in such aan application.

This timer starts at 0 zero, and goes up. If you’d like a timer that starts at 60sec, let’s say, and goes down, you would have to adapt this code. But the timer element and the variables would be the same.

Note that this version of the game also has code that changes the font used for the labels. If you want to paint text using custom fonts in your game, you can load them in the CSS (or using Google Fonts, like I do in this example), and see the code of this game sample for how to handle the fonts on the canvas.

Timer

Here we have baddies that move following the player. Every tick, the baddies calculate their next position so they get closer to the player.

You have to be careful when you do a thing like this that the player always moves faster than the baddies, and that the baddies appear far from the player on init. Otherwise, it is not possible to play.

Chase

This is a very simple example of a game that paints an illustration behind the game play. This works by first painting the background a plain flat colour, as on the game system. Then you can paint an illustration, like a landscape or a room, where the game happens. But make sure the edges of the image you add match the plain flat colour of the rest of the background.

Remember that you do not know the size of the canvas where users will play. So you should make an illustration that can work in different contexts.

Background Illustration

In this example, there are HTML “screens” that flash at different moments. This is meant to show you how to handle making HTML element appear on top of the game canvas. In the example, there is a screen at the start of the game, and a new screen flashes whenever you reach a new level. Notice how the level number is also painted on the screen. So there is interaction between the game and the HTML elements in the page.

Flashing screens

This is a game where the player and the goodies are animated. Both player and goodies images are spritesheets with 3 frames eahc. The animations are made using two techniques. The player uses the already available requestAnimationFrame upon which the whole game is based. This is much more complicated, but is doable. The goodies use a timer, a setTimeout. It is easier. If you need to turn the animation on and off, for some reason, this method is much better.

Animated player and goodies