HTML5 Game Development for Windows 8 #3: Finishing your first game

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.

   1: var ghosts = [];
   2: var ghostSpeed = 1.0;

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:

function Ghost(gfx) {
    this.positionX = Math.random() * 5000 - 2500;
    this.positionY = Math.random() * 3000 - 1500;
  
    this.setStartPosition = function () {
        if (this.positionX >= 0 && this.positionX <= window.innerWidth) {
            this.positionX = -500;
        }
  
        if (this.positionY >= 0 && this.positionY <= window.innerHeight) {
            this.positionY = -500;
        }
    }
  
    this.targetX = 0;
    this.targetY = 0;
  
    this.move = function (tX, tY) {
        this.targetX = tX;
        this.targetY = tY;
  
        if (this.targetX > this.positionX) {
            this.positionX += ghostSpeed;
        }
        if (this.targetX < this.positionX) {
            this.positionX -= ghostSpeed;
        }
        if (this.targetY > this.positionY) {
            this.positionY += ghostSpeed;
        }
        if (this.targetY < this.positionY) {
            this.positionY -= ghostSpeed;
        }
    };
  
    this.isCollision = function (playerX, playerY, playerW, playerH) {
        var centerX = this.positionX + (this.ghostBitmap.image.width * scaleW / 2);
        var centerY = this.positionY + (this.ghostBitmap.image.height * scaleH / 2);
  
        if ((centerX >= playerX - playerW / 2) && (centerX < playerX + playerW / 2)) {
            if ((centerY >= playerY - playerH / 2) && (centerY < playerY + playerH / 2)) {
                return true;
            }
        }
  
        return false;
    }
  
    this.ghostBitmap = gfx;
}
  

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:

   1: ghostImage = preload.getResult("ghost").result

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:

timeToAddNewGhost -= 1;
if (timeToAddNewGhost < 0) {
    timeToAddNewGhost = 1000
    ghosts.push(new Ghost(new createjs.Bitmap(ghostImage)));
    ghosts[ghosts.length - 1].setStartPosition();
    gameStage.addChild(ghosts[ghosts.length - 1].ghostBitmap);
}

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:

for (var i = 0; i < ghosts.length; i++)
{
    ghosts[i].ghostBitmap.x = ghosts[i].positionX;
    ghosts[i].ghostBitmap.y = ghosts[i].positionY;
    ghosts[i].ghostBitmap.visible = true;
    ghosts[i].move(player.positionX, player.positionY);
    ghosts[i].isCollision(player.positionX, player.positionY, player.width, player.height);
}

Just to make sure you got everything right, below is a listing of the entire source this far:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";
  
    WinJS.Binding.optimizeBindingReferences = true;
  
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
  
    var canvas, context;
    var gameStage;
    var preload;
  
    var logoScreenImage, logoScreenBitmap;
    var floorImage, floorBitmap;
    var playerIdleImage, playerIdleBitmap;
    var ghostImage, ghostBitmap;
  
    var newGame = true;
  
    var player;
  
    var ghosts = [];
    var ghostSpeed = 1.0;
    var timeToAddNewGhost = 0;
  
    var scaleW = window.innerWidth / 1366;
    var scaleH = window.innerHeight / 768;
  
  
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
  
    // The player class
    function Player() {
        this.positionX = window.innerWidth / 2;
        this.positionY = window.innerHeight / 2;
  
        this.targetX = this.positionX;
        this.targetY = this.positionY;
  
        this.width = playerIdleBitmap.image.width * scaleW;
        this.height = playerIdleBitmap.image.height * scaleH;
    }
  
    // The ghost class
    function Ghost(gfx) {
        this.positionX = Math.random() * 5000 - 2500;
        this.positionY = Math.random() * 3000 - 1500;
  
        this.setStartPosition = function () {
            if (this.positionX >= 0 && this.positionX <= window.innerWidth) {
                this.positionX = -500;
            }
  
            if (this.positionY >= 0 && this.positionY <= window.innerHeight) {
                this.positionY = -500;
            }
        }
  
        this.targetX = 0;
        this.targetY = 0;
  
        this.move = function (tX, tY) {
            this.targetX = tX;
            this.targetY = tY;
  
            if (this.targetX > this.positionX) {
                this.positionX += ghostSpeed;
            }
            if (this.targetX < this.positionX) {
                this.positionX -= ghostSpeed;
            }
            if (this.targetY > this.positionY) {
                this.positionY += ghostSpeed;
            }
            if (this.targetY < this.positionY) {
                this.positionY -= ghostSpeed;
            }
        };
  
        this.isCollision = function (playerX, playerY, playerW, playerH) {
            var centerX = this.positionX + (this.ghostBitmap.image.width * scaleW / 2);
            var centerY = this.positionY + (this.ghostBitmap.image.height * scaleH / 2);
  
            if ((centerX >= playerX - playerW / 2) && (centerX < playerX + playerW / 2)) {
                if ((centerY >= playerY - playerH / 2) && (centerY < playerY + playerH / 2)) {
                    return true;
                }
            }
  
            return false;
        }
  
        this.ghostBitmap = gfx;
    }
  
  
    function pointerUp(event) {
        if (newGame) {
            newGame = false;
        }
        else {
            player.targetX = event.x;
            player.targetY = event.y;
        }
    }
  
    function pointerDown(event) {
        if (newGame) {
        }
        else {
            player.targetX = event.x;
            player.targetY = event.y;
        }
    }
  
    function pointerMove(event) {
        if (newGame) {
        }
        else {
            player.targetX = event.x;
            player.targetY = event.y;
        }
    }
  
    function initialize() {
        canvas = document.getElementById("gameCanvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        context = canvas.getContext("2d");
  
        canvas.addEventListener("MSPointerUp", pointerUp, false);
        canvas.addEventListener("MSPointerMove", pointerMove, false);
        canvas.addEventListener("MSPointerDown", pointerDown, false);
  
        gameStage = new createjs.Stage(canvas);
  
        loadContent();
    }
  
    function loadContent() {
        preload = new createjs.PreloadJS();
        preload.onComplete = prepareStage;
  
        var manifest = [
            { id: "logoScreen", src: "images/GFX/LogoScreen.png" },
            { id: "floor", src: "images/GFX/floor.png" },
            { id: "ghost", src: "images/GFX/Ghost.png" },
            { id: "playerIdle", src: "images/GFX/PlayerIdle.png" }
        ];
  
        preload.loadManifest(manifest);
    }
  
    function prepareStage() {
        logoScreenImage = preload.getResult("logoScreen").result;
        logoScreenBitmap = new createjs.Bitmap(logoScreenImage);
        logoScreenBitmap.scaleX = scaleW;
        logoScreenBitmap.scaleY = scaleH;
        gameStage.addChild(logoScreenBitmap);
  
        floorImage = preload.getResult("floor").result;
        floorBitmap = new createjs.Bitmap(floorImage);
        floorBitmap.visible = false;
        floorBitmap.scaleX = scaleW;
        floorBitmap.scaleY = scaleH;
        gameStage.addChild(floorBitmap);
  
        playerIdleImage = preload.getResult("playerIdle").result;
        playerIdleBitmap = new createjs.Bitmap(playerIdleImage);
        playerIdleBitmap.visible = false;
        playerIdleBitmap.scaleX = scaleW;
        playerIdleBitmap.scaleY = scaleH;
        gameStage.addChild(playerIdleBitmap);
  
        ghostImage = preload.getResult("ghost").result
  
        player = new Player();
  
        createjs.Ticker.setInterval(window.requestAnimationFrame);
        createjs.Ticker.addListener(gameLoop);
    }
  
    function gameLoop() {
        update();
        draw();
    }
  
    function update() {
        if (newGame) {
            logoScreenBitmap.visible = true;
            playerIdleBitmap.visible = false;
            floorBitmap.visible = false;
        }
        else {
            logoScreenBitmap.visible = false;
            playerIdleBitmap.visible = true;
            floorBitmap.visible = true;
  
            if (player.targetX > player.positionX) {
                player.positionX += 3;
            }
            if (player.targetX < player.positionX) {
                player.positionX -= 3;
            }
            if (player.targetY > player.positionY) {
                player.positionY += 3;
            }
            if (player.targetY < player.positionY) {
                player.positionY -= 3;
            }
  
            timeToAddNewGhost -= 1;
            if (timeToAddNewGhost < 0) {
                timeToAddNewGhost = 1000
                ghosts.push(new Ghost(new createjs.Bitmap(ghostImage)));
                ghosts[ghosts.length - 1].setStartPosition();
                gameStage.addChild(ghosts[ghosts.length - 1].ghostBitmap);
            }
  
            for (var i = 0; i < ghosts.length; i++) {
                ghosts[i].ghostBitmap.x = ghosts[i].positionX;
                ghosts[i].ghostBitmap.y = ghosts[i].positionY;
                ghosts[i].ghostBitmap.visible = true;
                ghosts[i].move(player.positionX, player.positionY);
                ghosts[i].isCollision(player.positionX, player.positionY, player.width, player.height);
            }
  
            playerIdleBitmap.x = player.positionX - (player.width / 2);
            playerIdleBitmap.y = player.positionY - (player.height / 2);
        }
    }
  
    function draw() {
        gameStage.update();
    }
  
    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };
  
    document.addEventListener("DOMContentLoaded", initialize, false);
  
    app.start();
})();
  
  
  

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:

   1: var isGameOver = false;

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);

with this:

   1: isGameOver = 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:

   1: if (isGameOver)   
   2:     break;

In the top of the update() function, inside the else statement of if(newGame), add the following code:

if (isGameOver) {
    isGameOver = false;
    ghosts.length = 0;
    gameStage.clear();
  
    gameStage.addChild(logoScreenBitmap);
    gameStage.addChild(floorBitmap);
    gameStage.addChild(playerIdleBitmap);
    gameStage.addChild(scoreText);
  
    gameStage.update();
}
  

Just to make sure you are in thr right place, the update function looks like this:

function update() {
    if (newGame) {
        logoScreenBitmap.visible = true;
        playerIdleBitmap.visible = false;
        floorBitmap.visible = false;
    }
    else {
        if (isGameOver) {
            isGameOver = false;
            ghosts.length = 0;
            gameStage.clear();
  
            gameStage.addChild(logoScreenBitmap);
            gameStage.addChild(floorBitmap);
            gameStage.addChild(playerIdleBitmap);
  
            gameStage.update();
        }
        logoScreenBitmap.visible = false;
        playerIdleBitmap.visible = true;
        floorBitmap.visible = true;
  
        if (player.targetX > player.positionX) {
            player.positionX += 3;
        }
        if (player.targetX < player.positionX) {
            player.positionX -= 3;
        }
        if (player.targetY > player.positionY) {
            player.positionY += 3;
        }
        if (player.targetY < player.positionY) {
            player.positionY -= 3;
        }
  
        timeToAddNewGhost -= 1;
        if (timeToAddNewGhost < 0) {
            timeToAddNewGhost = 1000
            ghosts.push(new Ghost(new createjs.Bitmap(ghostImage)));
            ghosts[ghosts.length - 1].setStartPosition();
            gameStage.addChild(ghosts[ghosts.length - 1].ghostBitmap);
        }
  
        for (var i = 0; i < ghosts.length; i++) {
            ghosts[i].ghostBitmap.x = ghosts[i].positionX;
            ghosts[i].ghostBitmap.y = ghosts[i].positionY;
            ghosts[i].ghostBitmap.visible = true;
            ghosts[i].move(player.positionX, player.positionY);
            isGameOver = ghosts[i].isCollision(player.positionX, player.positionY, player.width, player.height);
            if (isGameOver)
                break;
        }
  
        playerIdleBitmap.x = player.positionX - (player.width / 2);
        playerIdleBitmap.y = player.positionY - (player.height / 2);
    }
}
  

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:

   1: var scoreText;
   2: var playerScore = 0;

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:

   1: playerScore = 0;

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:

scoreText = new createjs.Text("Score: " + playerScore, "30px sans-serif", "yellow");
scoreText.x = canvas.width / 2 - (scoreText.getMeasuredWidth() * scaleW / 2);
scoreText.scaleX = scaleW;
scoreText.scaleY = scaleH;
scoreText.y = 30 * scaleH;
scoreText.visible = false;
gameStage.addChild(scoreText);

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:

   1: gameStage.addChild(scoreText);

Still in the update() function, just below the code that moves the player – add these two lines of code:

   1: playerScore += 1;
   2: scoreText.text = ("Score: " + playerScore);

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:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";
  
    WinJS.Binding.optimizeBindingReferences = true;
  
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
  
    var canvas, context;
    var gameStage;
    var preload;
  
    var logoScreenImage, logoScreenBitmap;
    var floorImage, floorBitmap;
    var playerIdleImage, playerIdleBitmap;
    var ghostImage, ghostBitmap;
  
    var newGame = true;
    var isGameOver = false;
  
    var player;
  
    var scoreText;
    var playerScore = 0;
  
    var ghosts = [];
    var ghostSpeed = 1.0;
    var timeToAddNewGhost = 0;
  
    var scaleW = window.innerWidth / 1366;
    var scaleH = window.innerHeight / 768;
  
  
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
  
    // The player class
    function Player() {
        this.positionX = window.innerWidth / 2;
        this.positionY = window.innerHeight / 2;
  
        this.targetX = this.positionX;
        this.targetY = this.positionY;
  
        this.width = playerIdleBitmap.image.width * scaleW;
        this.height = playerIdleBitmap.image.height * scaleH;
    }
  
    // The ghost class
    function Ghost(gfx) {
        this.positionX = Math.random() * 5000 - 2500;
        this.positionY = Math.random() * 3000 - 1500;
  
        this.setStartPosition = function () {
            if (this.positionX >= 0 && this.positionX <= window.innerWidth) {
                this.positionX = -500;
            }
  
            if (this.positionY >= 0 && this.positionY <= window.innerHeight) {
                this.positionY = -500;
            }
        }
  
        this.targetX = 0;
        this.targetY = 0;
  
        this.move = function (tX, tY) {
            this.targetX = tX;
            this.targetY = tY;
  
            if (this.targetX > this.positionX) {
                this.positionX += ghostSpeed;
            }
            if (this.targetX < this.positionX) {
                this.positionX -= ghostSpeed;
            }
            if (this.targetY > this.positionY) {
                this.positionY += ghostSpeed;
            }
            if (this.targetY < this.positionY) {
                this.positionY -= ghostSpeed;
            }
        };
  
        this.isCollision = function (playerX, playerY, playerW, playerH) {
            var centerX = this.positionX + (this.ghostBitmap.image.width * scaleW / 2);
            var centerY = this.positionY + (this.ghostBitmap.image.height * scaleH / 2);
  
            if ((centerX >= playerX - playerW / 2) && (centerX < playerX + playerW / 2)) {
                if ((centerY >= playerY - playerH / 2) && (centerY < playerY + playerH / 2)) {
                    return true;
                }
            }
  
            return false;
        }
  
        this.ghostBitmap = gfx;
    }
  
  
    function pointerUp(event) {
        if (newGame) {
            newGame = false;
        }
        else {
            player.targetX = event.x;
            player.targetY = event.y;
        }
    }
  
    function pointerDown(event) {
        if (newGame) {
        }
        else {
            player.targetX = event.x;
            player.targetY = event.y;
        }
    }
  
    function pointerMove(event) {
        if (newGame) {
        }
        else {
            player.targetX = event.x;
            player.targetY = event.y;
        }
    }
  
    function initialize() {
        canvas = document.getElementById("gameCanvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        context = canvas.getContext("2d");
  
        canvas.addEventListener("MSPointerUp", pointerUp, false);
        canvas.addEventListener("MSPointerMove", pointerMove, false);
        canvas.addEventListener("MSPointerDown", pointerDown, false);
  
        gameStage = new createjs.Stage(canvas);
  
        loadContent();
    }
  
    function loadContent() {
        preload = new createjs.PreloadJS();
        preload.onComplete = prepareStage;
  
        var manifest = [
            { id: "logoScreen", src: "images/GFX/LogoScreen.png" },
            { id: "floor", src: "images/GFX/floor.png" },
            { id: "ghost", src: "images/GFX/Ghost.png" },
            { id: "playerIdle", src: "images/GFX/PlayerIdle.png" }
        ];
  
        preload.loadManifest(manifest);
    }
  
    function prepareStage() {
        logoScreenImage = preload.getResult("logoScreen").result;
        logoScreenBitmap = new createjs.Bitmap(logoScreenImage);
        logoScreenBitmap.scaleX = scaleW;
        logoScreenBitmap.scaleY = scaleH;
        gameStage.addChild(logoScreenBitmap);
  
        floorImage = preload.getResult("floor").result;
        floorBitmap = new createjs.Bitmap(floorImage);
        floorBitmap.visible = false;
        floorBitmap.scaleX = scaleW;
        floorBitmap.scaleY = scaleH;
        gameStage.addChild(floorBitmap);
  
        playerIdleImage = preload.getResult("playerIdle").result;
        playerIdleBitmap = new createjs.Bitmap(playerIdleImage);
        playerIdleBitmap.visible = false;
        playerIdleBitmap.scaleX = scaleW;
        playerIdleBitmap.scaleY = scaleH;
        gameStage.addChild(playerIdleBitmap);
  
        scoreText = new createjs.Text("Score: " + playerScore, "30px sans-serif", "yellow");
        scoreText.x = canvas.width / 2 - (scoreText.getMeasuredWidth() * scaleW / 2);
        scoreText.scaleX = scaleW;
        scoreText.scaleY = scaleH;
        scoreText.y = 30 * scaleH;
        scoreText.visible = false;
        gameStage.addChild(scoreText);
  
  
        ghostImage = preload.getResult("ghost").result
  
        player = new Player();
  
        createjs.Ticker.setInterval(window.requestAnimationFrame);
        createjs.Ticker.addListener(gameLoop);
    }
  
    function gameLoop() {
        update();
        draw();
    }
  
    function update() {
        if (newGame) {
            logoScreenBitmap.visible = true;
            playerIdleBitmap.visible = false;
            floorBitmap.visible = false;
            scoreText.visible = false;
        }
        else {
            if (isGameOver) {
                isGameOver = false;
                ghosts.length = 0;
                playerScore = 0;
                gameStage.clear();
  
                gameStage.addChild(logoScreenBitmap);
                gameStage.addChild(floorBitmap);
                gameStage.addChild(playerIdleBitmap);
                gameStage.addChild(scoreText);
  
                gameStage.update();
            }
            logoScreenBitmap.visible = false;
            playerIdleBitmap.visible = true;
            floorBitmap.visible = true;
            scoreText.visible = true;
  
            if (player.targetX > player.positionX) {
                player.positionX += 3;
            }
            if (player.targetX < player.positionX) {
                player.positionX -= 3;
            }
            if (player.targetY > player.positionY) {
                player.positionY += 3;
            }
            if (player.targetY < player.positionY) {
                player.positionY -= 3;
            }
  
            playerScore += 1;
            scoreText.text = ("Score: " + playerScore);
  
            timeToAddNewGhost -= 1;
            if (timeToAddNewGhost < 0) {
                timeToAddNewGhost = 1000
                ghosts.push(new Ghost(new createjs.Bitmap(ghostImage)));
                ghosts[ghosts.length - 1].setStartPosition();
                gameStage.addChild(ghosts[ghosts.length - 1].ghostBitmap);
            }
  
            for (var i = 0; i < ghosts.length; i++) {
                ghosts[i].ghostBitmap.x = ghosts[i].positionX;
                ghosts[i].ghostBitmap.y = ghosts[i].positionY;
                ghosts[i].ghostBitmap.visible = true;
                ghosts[i].move(player.positionX, player.positionY);
                isGameOver = ghosts[i].isCollision(player.positionX, player.positionY, player.width, player.height);
                if (isGameOver)
                    break;
            }
  
            playerIdleBitmap.x = player.positionX - (player.width / 2);
            playerIdleBitmap.y = player.positionY - (player.height / 2);
        }
    }
  
    function draw() {
        gameStage.update();
    }
  
    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };
  
    document.addEventListener("DOMContentLoaded", initialize, false);
  
    app.start();
})();
  

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:
http://sdrv.ms/T2KTFg

10 Responses to HTML5 Game Development for Windows 8 #3: Finishing your first game

codex 5 says:

October 1, 2012 at 4:59 pm

Hi, thanks for this great tutorial! can I reuse your code for a similar game?

- digitalerr0rr says:
  
  October 2, 2012 at 8:34 am
  
  Yes, feel free to use the code. 🙂
  
  - codex 5 says:
    
    October 2, 2012 at 11:52 am
    
    Wow thanks so much! 🙂
Pingback: HTML5 Game Starter Kit for Windows 8 | digitalerr0r
gamer12345 says:

October 30, 2012 at 2:50 pm

thanks man great tutorial

Pingback: Windows 8 Games with CreateJS Tutorials & Resources « skater coder
Clive says:

January 27, 2013 at 7:50 am

Great tutorial. Thanks a lot. 🙂
I plan to navigate to different page instead of hide/show an image.
However i encounter an error when navigate. It said:
Unhandled exception at line 81, column 326 in ms-appx://4c985e5d-0546-41d7-9f24-e945d98a9232/js/CreateJS/easeljs-0.5.0.min.js
0x80004005 – JavaScript runtime error: Unspecified error.
What should i put as the second parameter(initial state) of WinJS.Navigation.navigate()?

Pingback: Game Starterkit for Windows 8 with leaderboard in Windows Azure | digitalerr0r
Pingback: You can lead a dev to... "Game Starter Kit for Windows 8 with leaderboard in Windows Azure" - Windows Azure Blog
abhinav says:

December 19, 2013 at 9:54 am

am getting the following error

157: preload = new createjs.PreloadJS();
158: preload.onComplete = prepareStage;
“Unhandled exception at line 157, column 18 in ms-appx://e873b1a2-9c7e-4668-8426-b5cba485e4ef/js/default.js

0x800a01bd – JavaScript runtime error: Object doesn’t support this action

If there is a handler for this exception, the program may be safely continued.”