Let’s build an HTML5 game! (Beginner Tutorial, Part 4)

Let’s build an HTML5 game! (Beginner Tutorial, Part 4)

In our final tutorial, we are going to learn about fine-tuning our game. Random numbers, number scales and some images should do the trick. We have a playable game at this point, but we need to make it fun. Let’s get started. We will pick up from where we left off in Part 3.

Spit and Polish

In order to make our game look like a game, we obviously need some decent graphics. I will rely on the awesome Daniel Cook from Lost Garden to provide some amazing retro Tyrian graphics! I have extracted two items that will will use, a ship and tower looking thing. Let’s go add these into our CSS now.

Sweet! Now it looks more like a game. Let’s go ahead and tweak our initial bullet placement to originate from the glowing white spot on our tower. We will move it half way across the width of our tower (25/2) and 5 pixels down from the top.

This gives the impression we are firing from a particular spot on our tower as opposed to just the top left-hand corner.

Randomness to the Rescue

We can make a game more realistic by adding an element of randomness.  Currently we always fire a bullet to the same relative location to a ship. Let’s create a random number generator and randomly assign those values within a certain range in order to create some realism. If you where to pick up a rifle, and fire 6 bullets into a target, you would never get the exact same spread pattern if you tried this over and over again. That is the realism we are attempting to recreate. Our tower gunner should never be that predictable.

First, a random number generator:

Don’t worry too much about the math here. This is a pseudo-random number generator (PRNG) that I found somewhere on the internet and have tweaked a bit over time. It basically uses the number of milliseconds since midnight 01 January, 1970 UTC by calling the valueOf method of a new Date object. This number of course, will always be unique in any particular single instance of our game seeing as time never stops! Deep, I know. There is some extra math there to restrict the number to exist between a min and max number.

Let’s use this now. First place to add this will be in our  createEnemy function. We are currently using global enemyX and enemyY variables so let’s change the enemyX variable to a maxEnemyX variable and use our new random function. It won’t be really obvious why we are using a maxEnemyX variable, but if we ever take this game to new platforms with variable widths, we would update this at that point and not have to change any other code.

Now our enemies will appear at random locations across the game stage! Let’s add some more randomness.

This is where we animate our bullet object. We have used our getRandom function to add a +- 40 pixel spread over which the bullet will be aimed at. Sometime our bullets will now miss their targets! Adjust this to a great value for more misses and a smaller value for more accuracy. If you are feeling really adventurous, start with a very large value and decrement as the player gets more points!

Now, we need to add a number scale. At present, we still are having a lot of trouble losing points, so we need to make the game more challenging! Let slowly increase the rate at which our enemy waves are generated.

Let’s create a few more variables:

And implement those:

Now we have a playable game which still requires a certain amount of tweaking. We should increase our number of points to a higher value and implement win/lose conditions to completely polish the game off. I will leave that for your homework.

I have you enjoyed this tutorial series and please leave a comment if you would like to say hi or head over to the forum and start a discussion or ask a technical question.



agrothe (9 Posts)

Andrew Grothe is an enterprise developer with an interest in HTML5 mobile and game development. Andrew is current working on a casual HTML5 game at http://spacecutegame.com and maintains the http://webapplist.info website.