O'Reilly logo

Professional HTML5 Mobile Game Development by Pascal Rettig

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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() ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required