Professional HTML5 Mobile Game Development

Building the Game

With all the pieces in place, it’s time to attack the game. The simple platformer built in this section uses a shrunken-down version of the man from Chapter 16 along with some blobs as enemies. The game will have only three sprites, the player, bullets, and blobs.

Boostrapping the Game

Start from the outside in and create the outline of the game before filling in the necessary sprite class. Open up platform.js and replace it with the code from Listing 18-8.

Listing 18-8: The platformer code

$(function() { var Q = window.Q = Quintus() .include('Input,Sprites,Scenes,Anim,Platformer') .setup('quintus', { maximize: true }) .controls(); Q.Enemy = Q.Sprite.extend({ // TODO }); Q.Player = Q.Sprite.extend({ // TODO }); Q.Bullet = Q.Sprite.extend({ // TODO }); Q.scene('level',new Q.Scene(function(stage) { stage.insert(new Q.Repeater({ asset: 'background-wall.png', speedX: 0.50, y:-225, z:0 })); var tiles = stage.insert(new Q.TileLayer({ sheet: 'block', x: -100, y: -100, tileW: 32, tileH: 32, dataAsset: 'level.json', z:1 })); stage.collisionLayer(tiles); var player = stage.insert(new Q.Player({ x:100, y:0, z:3, sheet: 'man })); stage.insert(new Q.Enemy({ x:400, y:0, z:3 })); stage.insert(new Q.Enemy({ x:600, y:0, z:3 })); stage.insert(new Q.Enemy({ x:1200, y:100, z:3 })); stage.insert(new Q.Enemy({ x:1600, y:0, z:3 })); stage.add('viewport'); stage.follow(player); }, { sort: true })); Q.load(['sprites.png','sprites.json', 'background-wall.png','level.json'],function() ...