Hugo’s Games Features

These are different examples of games adapted from the simple game system to add different features. Look at the code of these, and you will discover some of the ways you can adapt the simple code of the tutorial into features you might want in your game. I have included comments in the JS files.

Note that I will write a full tutorial for the handling of sounds. This will be available later.

Falling Goodies

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

Points & Levels

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

Player orientation sprite sheet

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

Timer

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

Baddies & Game Over

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