Welcome back to my HTML5 game programming series. In this part of the tutorial we are going to finish our first HTML5 game for Windows 8.
Note: This tutorial was written on the plane to Las Vegas, will fix typos at a later time.
If you havent completed my previous tutorials, now is the time 🙂
Anyhow. Last time we were left of with a playfield where you could move the hero around the screen, a main menu where you had to tap the screen to start the game, but no enemies. This is what we are going to implement today.
First of all, we need a few global variables for the ghost.
The first variable is an array including all the ghosts thats currently alive, and the 2nd one is the speed the ghosts will have when moving towards you.
We also need a global variable for the image and the bitmap of the ghost:
var ghostImage, ghostBitmap;
Next, we need a class for the ghost:
This class looks a bit like the player class – it got a variable for the current position of one ghost and the target. But this class also contains a function that moved the ghost towards the target, and a function that checks if the ghost is colliding with the player sprite.
The position of a new ghost will be randomly selected – but if it spawns in the middle of the playscreen, we move it outside so he wont spawn on top of the player making it impossible to avoid it. All ghosts must spawn outside the playfield, and move towards the player at all time.
Now, we load the image for the ghost like we did with the player in loadContent() – but we only load the image from the preload object:
Spawning a ghost
We will use a timer to spawn a ghost, so go ahead and create a new global variable that will contain the spawntime untill a new ghost is spawned:
var timeToAddNewGhost = 0;
In the update loop, just below the code that moves the player towards the target, we add the code that will add a new ghost to the ghosts array:
Every frame, we subtract one from the timeToAddNewGhost variable. If this is below 0, we set the timer to 1000 and add a new ghost to the array using the ghostImage we loaded earlier. We also make sure that the start position isn’t on the visible playfield.
For every 1000 frame, a new ghost is spawned and the game gets a bit harder. But an array wont do us much good without updating the position of the image file (or else the ghost will be invisible). So for each active ghost in the array, we set the image position, move the ghost towards the player and check for collision:
Just to make sure you got everything right, below is a listing of the entire source this far:
If you run the game now, the game will start, you can move around and more and more ghosts will try to attack you.
Implementing Game Over
The ghosts aren’t really dangerous right now, if the ghost hit you – nothing happens. Yes, we are checking for collision, but haven’t yet created any rules that will happen when the collision is true.
To do this we need to define a new global variable:
In the loop where we go through each of the ghosts, replace this line:
ghosts[i].isCollision(player.positionX, player.positionY, player.width, player.height);
Also, add this code below so when a collision is happening, we break the for-loop:
In the top of the update() function, inside the else statement of if(newGame), add the following code:
Just to make sure you are in thr right place, the update function looks like this:
What we do in this code is to check if it’s game over. If this is true (a collision is happened), we set the gameOver flag to false again, clear all the active ghosts in the array and remove everything from the gameState (because its filled with ghosts). We then add back the logoScreen, the floor and the player and restart the game.
If you run the game again, you can see that we have a working game! 🙂
Adding a score
But, something is missing – a score!
The longer you stay alive, the more score you will get.
To add a score, define a new global variable called playerScore and a a new global variable called scoreText:
scoreText will contain the font and position of the text.
In the game over “routine”, add a line that sets the playerScore to 0 – when it’s game over, we want to reset the score:
Back in loadContent(): We create a new font object using CreateJS containing the text we want to display, the position (we want it to be on the top center of the screen) and add it to the gameStage:
The function getMeasuredWidth() simply returns how wide the string that we want to render is – making it simple to calculate where to render it based on how long the text is.
Back again to the gameOver rules: Add a new line that adds the scoreText object back to the stage:
Still in the update() function, just below the code that moves the player – add these two lines of code:
This increases the score for each frame and updates the text in scoreText.
We also must make sure that the score text is visible or invisible based on if we are in game or not.
And thats it, we got a working game! If something isn’t working, you can check your solution with the code below, it contains all the code for the game:
Thanks for following! In the next tutorial, we are going to look at other important aspects of game programming on Windows 8 like storeing data and so on.
Download the source of the game here: