Hi, and welcome back to the HTML5 game programming tutorial series. In this tutorial we will continue on the previous tutorial, so if you havent done so yet, now is the time!🙂
Note: This was written on the plane to Las Vegas in a tired condition. Will fix typos at a later stage.
Last time, we got the main menu up and running. Now we are going to make the main menu screen wait for a touch input, and when that happens, it will start the game and a player is rendered.
The first thing we need is a boolean that tells if we are going to show the main menu or not.
Define the newGame global variable:
The newGame variable will be used to let our stage know what elements it should display. When we are in the main menu, we hide the game elements and only show the main menu screen.
This will be handled in the update() function (remeber, this is where the game logic is handled). You can use the visible-property of the Bitmap you want to control to make it visible or invisible:
New, the last thing we need in order to acctually change the scene is to wait for the user to touch the screen so the game can start:
In the initialize() function, after the context = canvas.getContext(“2d”); line of code, add the following line:
This function creates an event listener that will trigger when the user lifts up his finger (or release the mouse pointer). When this triggers, the function pointerUp is executed.
Let’s take a look at the pointerUp function:
This function sets the newGame boolean to false when it triggers a new release of the funger/mouse pointer.
Now it’s time to add the player character and the ghost house floor. To do this, we need a few global variables and a class that contains the player logic.
Add the following global variables:
We also need a variable that will help us keep track of scaling. When the game is deployed to various devices, it’s important that we scale the playfield to make sure it works on all devices.
All the games GFX is made with the 1366 x 768 resolution as the basis. If the resolution changes, we also want to make sure to scale everything. To do this we create two variables :
Now, let’s make sure that the main menu screen scales.
Add the lines with the scale properties to your loadContent() function, where you define and load the mainMenuBitmap:
Also, load the floor texture and the playerIdle texture:
We load the needed graphics, and also set the visibility properties to invisible, making sure we don’t draw them on the main menu.
Also, update the update() function so it hides/shows player and floor:
If you run the game now, you will see the main screen showing. Tapping this will make the main screen go away and you will get in to the playfield.
The player needs a position where it will be rendered, and a target to where he is heading. Also, we need to keep track of the bitmap size in order to calculate collision detection later:
Let’s make sure we can move our guy. We want to make him move to the last location the user eiter touched or moved the finger (mousepointer).
In the prepareStage function we create a new instance of the player, add this line above the Ticker.setInterval line of code:
player = new Player();
To make the player move you could either create a function in the player class that moves it based on his target, or put the logic in the update function. I will do both, the player class will get updated directly in the update() function, and the ghosts will be moved with a function on the ghost class level.
At every frame, we check if we should move our guy. It his position is different than the target, move it towards the target. One way to do this is to use a vector, or by directly checking the X and Y values of the position. I will do the latter:
Now, we add a few more event listeners that will make our character move:
Let’s start by updating the pointerUp function. We need it to take in a parameter that will contain the touch position, and set the players target to this:
Also, lets add the two others as well:
The last thing we need to do is to update the player image to be rendered at the player positon. Add the following lines in the update function, below the code that makes the player move:
We want the center of the guy to move towards the location of the finger, not the top-left. thats why we subtract half of the height and width of the character.
The update() function should look like this:
If you run the app now, you should be able to move the guy!
Below is the entire source for this game:
In the next tutorial, we will finish the game. This includes handling all the ghosts and keeping track of the score, and a game over function.
Download the source of the game here: