Windows® 8.1 Apps with HTML5 and JavaScript Unleashed

Creating the Game Tiles

The Brain Eaters game is rendered out of a set of image tiles. An image tile is simply a 50px by 50px image. The game board is rendered from background and wall tiles. The game also includes tiles for the zombies, player, and food.

All of the game tiles are created in a JavaScript file named tiles.js (see Listing 15.1).

LISTING 15.1 The tiles.js File

Click here to view code image

(function () {    "use strict";    function Tile(url) {        this.image = new Image();        this.image.src = url;    }    var tiles = {};    tiles.background = new Tile("/images/background.jpg");    tiles.wall = new Tile("/images/brick.jpg");    tiles.player = new Tile("/images/hero.png");    tiles.zombie = new Tile("/images/zombie.jpg" ...