Hugo’s Game Tutorial v3.4

Next, we will load the sprites. We need four: background, win frame, player, goody.

Because we deal with images, we need a system that will only place the picture once it is loaded. So we need a variable for each picture that is only true when the picture is ready. Those are bgReady, winReady, etc. This makes sure that we do not draw a broken image or half a sprite.

//Load sprites
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.src = "images/background.png";
bgImage.onload = function () {
    bgReady = true; 
};

// Win frame image
var winReady = false;
var winImage = new Image(); 
winImage.src = "images/win.png"; 
winImage.onload = function () {
    winReady = true; 
};

// Player image
var playerReady = false;
var playerImage = new Image(); 
playerImage.src = "images/player.png"; 
playerImage.onload = function () {
    playerReady = true; 
};

// Goodies image
var goodyReady = false;
var goodyImage = new Image(); 
goodyImage.src = "images/goody.png"; 
goodyImage.onload = function () {
    goodyReady = true; 
};

We will need a few functions to get us started.

First a loop function that will be called constantly to keep the game going. This is an important function that we will build progressively throughout the tutorial. It will contain everything that must happen while the game plays. But at this stage all it’s going to do is call the render() function to draw the elements. (We define this render() function at the next step.)

Notice that the function calls the command to loop window.requestAnimationFrame(main); and provides itself as the loop function.

// The main game loop 
var main = function () {
    render();
    window.requestAnimationFrame(main); 
};

So now we need the render() function called by main(). This is used to draw the elements.

For now, we only have the player and one goody, and we place them at a static position on the canvas. We just want to be sure our pictures load properly. This function will also draw a text label that we will use to test and track our stuff later.

Note that we check that the pictures are loaded (using bgReady, playerReady, etc.) before we draw them on the canvas. This prevents errors and issues.

// Draw everything
var render = function () {
    if (bgReady) {
        ctx.fillStyle = ctx.createPattern(bgImage, 'repeat');
        ctx.fillRect(0,0,canvas.width,canvas.height);
    }
    if (playerReady) {
        ctx.drawImage(playerImage, 100, 100);
    }
    if (goodyReady) {
        ctx.drawImage(goodyImage, 200, 200);
    }

    //Label
    ctx.fillStyle = "rgb(250, 250, 250)";
    ctx.fillText("Game on!", 32, 32);
};

The last thing we need before testing: activate the loop. This command must be written at the end of the file; it is run after everything else is loaded in memory and it starts the game.

You’ll notice that it is the same command that we wrote in main(). But here it is the first time that we call it to start the game. It will be called around 60 times per second after this. This means our game will idealy run at 60fps.

//Start the gameplay
window.requestAnimationFrame(main);

Now it’s time to test state A!

Open the index.html file in a browser to see if it works. You should see the green player and a red goody.

Instead of starting the game with the loop right away, we will add an init() function that will set the stage before the game loop starts. This will let us place the objects in the right location before the beginning of the game. We place the player in the middle and the goodies randomly.

Note the references to x and y. These are the coordinates of objects on a cartesian plane. The x is horizontal, and the y is vertical. You should be familiar with this by now.

Location: You can write this function following the objects in the previous step.

//Set initial state
var init = function () {
    //Put the player in the centre
    player.x = (canvas.width - player.width) / 2; 
    player.y = (canvas.height - player.height) / 2;

    //Place goodies at random locations 
    for (var i in goodies) {
        goodies[i].x = (Math.random() * (canvas.width - goodies[i].width));
        goodies[i].y = (Math.random() * (canvas.height - goodies[i].height));
    }
};

Now that we have determined the initial state of our game board, we need to update the render() function so it places the sprite images at the right place. This will also allow for movement later as the render() will be refreshed at every loop.

Location: Replace the playerReady and goodyReady condition blocks of your render() function with:

if (playerReady) {
    ctx.drawImage(playerImage, player.x, player.y);
}
if (goodyReady) {
    for (var i in goodies) {
        ctx.drawImage(goodyImage, goodies[i].x, goodies[i].y);
    }
}

One last thing: we must call the init() function just before we start the loop.

Location: At the bottom of the file, right above the last line, add:

init();

Test state B!

You should see the player in the centre and three goodies randomly distributed on the board. If you refresh, the goodies are going to appear at different places.

Note that this code is simple and can be a bit buggy. It is possible that you see only one or two goodies from time to time. This happens when a goody is randomly placed by init() in collision with the player triggering its removal right away. Don’t worry about this. If it happens, refresh, you should get three goodies.

Now, we can write the handlers for the keyboard.

We create an event listener that will trigger when the keyboard is pressed. The keyCode numbers refer to the code of each key: 38 is the up arrow, 40 is the down arrow, etc.

When the user presses an arrow key, the player starts moving in this direction at the speed set in the player object (5 pixels).

Note that, in this tutorial, the player starts to move when you press the key and continues to move on its own. It does not stop when you release the key. (It bounces on the edges of the canvas; we’ll do this later.) This is to make the mobile interface easier to handle. You can, in your game, change this. You can stop the player with the spacebar.

// Handle keyboard controls
addEventListener("keydown", function (e) {
    //Keystrokes
    if (e.keyCode == 38) { // UP
        vX = 0;
        vY = -player.speed;
    }
    if (e.keyCode == 40) { // DOWN
        vX = 0;
        vY = player.speed;
    }
    if (e.keyCode == 37) { // LEFT
        vX = -player.speed;
        vY = 0;
    }
    if (e.keyCode == 39) { // RIGHT
        vX = player.speed;
        vY = 0;
    }
    if (e.keyCode == 32) { // STOP spacebar
        vX = 0;
        vY = 0;
    }
}, false);

Next, we need to add the controls for the touch events in the case of mobile playing. In this case, we will refer to the ID of the buttons from the HTML code to find the touch target. (See index.html for reference.)

The target refers to the element that was touched by the user to trigger the touchstart event.

// Handle touch controls
addEventListener("touchstart", function (e) {
    if (e.target.id == "uArrow") { // UP
        vX = 0;
        vY = -player.speed;
    }
    else if (e.target.id == "dArrow") { // DOWN
        vX = 0;
        vY = player.speed;
    }
    else if (e.target.id == "lArrow") { // LEFT
        vX = -player.speed;
        vY = 0;
    }
    else if (e.target.id == "rArrow") { //RIGHT
        vX = player.speed;
        vY = 0;
    }
    else { // STOP This stops if you touch anywhere else
        vX = 0;
        vY = 0;
    }
});

Now we will update the main loop function so it handles the movement of the player object. We need to change the movement direction of the player according to the key or the button that is pressed.

You will notice that we also make sure the player does not go outside of the canvas by making it bounce back in the opposite direction when it hits an edge.

Location: Add this code before the render(); command inside your main() function.

//move player
if (player.x > 0 && player.x < canvas.width - player.width) {
    player.x += vX;
}
else {
    player.x -= vX;
    vX = -vX; //bounce horizontal
}

if (player.y > 0 && player.y < canvas.height - player.height) {
    player.y += vY
}
else {
    player.y -= vY;
    vY = -vY; //bounce vertical
}

To make sure everything is OK, we will print the coordinates of the player in the text label we created early on.

Location: Replace the line with fillText (inside the render() function) to this:

ctx.fillText(player.x+" "+player.y, 32, 32);

Test state C!

You should be able to move the player using the arrow keys or by touching the buttons at the edge of the screen on a mobile or in your browser’s developer tool.

The coordinates of the player object should appear in the label at top left of the canvas.

So let’s remove each goody when the player has touched it. In the main() function, we will add a new for loop that checks for collisions between the player and each of the 3 goodies.

When a collision is found true, we remove that goody from the array. (The splice command removes an element from the array.)

Location: This must be inside the main() function, before the render(); call.

for (var i in goodies) {
    if (checkCollision(player,goodies[i])) {
        goodies.splice(i,1);
    }
}

Again for testing purposes, we will add a counter to the text label. So, again update the fillText line with this:

ctx.fillText(player.x+" "+player.y+ " "+goodies.length, 32, 32);

Test state D!

The red goodies should disappear when you hit them with the player. Also check the counter in the text label.

We now need to add a call to this function in our main loop. In the end, the main loop has two parts:

1. what to do when you win: show win frame
2. what to do up to that: play the game

So far, the main() function has only behaved as if we had not yet won, so all the code that is there at this stage will be in the second part. The first part is the new code that runs when we win. To make it simpler for you, I have re-written the whole function below.

Location: Replace your whole main() function with this:

// The main game loop
var main = function () {
    if (checkWin()) {
        //WIN display win frame
        if (winReady) {
            ctx.drawImage(winImage, (canvas.width - winImage.width)/2, 
                (canvas.height - winImage.height)/2);
        }
    }
    else {
        //Not yet won, play game
        //move player
        if (player.x > 0 && player.x < canvas.width - player.width) {
            player.x += vX;
        }
        else {
            player.x -= vX;
            vX = -vX; //bounce
        }
        if (player.y > 0 && player.y < canvas.height - player.height) {
            player.y += vY
        }
        else {
            player.y -= vY;
            vY = -vY; //bounce
        }
        //check collisions
        for (var i in goodies) {
            if (checkCollision(player,goodies[i])) {
                goodies.splice(i,1);
            }
        }

        render();
        window.requestAnimationFrame(main);
    }
};

Finally, we will make the text label more useful to the user rather than the programmer.

Change the fillText line to this:

ctx.fillText("Goodies left: "+goodies.length, 32, 32);

Test state E!

The game should be complete, you should see the win frame when you catch all the goodies. Again, this is a bit buggy, the win frame does not completely cover the canvas, so sometimes you see the player, sometimes you don’t when you win. No worries, you will fix these little details as you complete the game.