Professional HTML5 Mobile Game Development

Finishing Blockbreak

With the rest of the scene functionality hammered out, you can finish up the Blockbreak game. First, you need to open the blockbreak.html file and add in the quintus_scenes.js file you just created to the initial script tags:

    <script src='jquery.min.js'></script>
    <script src='underscore.js'></script>
    <script src='quintus.js'></script>
    <script src='quintus_input.js'></script>
    <script src='quintus_sprites.js'></script>
    <script src='quintus_scenes.js'></script>
    <script src='blockbreak.js'></script>

Next the initial setup code must pull in the Scenes module. Update the include call at the top of blockbreak.js to read:

$(function() {
  var Q = window.Q = Quintus()
                     .include('Input,Sprites,Scenes')
                     .setup();
  Q.input.keyboardControls()
  Q.input.touchControls({ 
            controls:  [ ['left','<' ],[],[],[],['right','>' ]]
          });

Next modify the code inside of the Q.load callback at the bottom of the file that starts the game to use the scene and stage functionality:

  Q.load(['blockbreak.png','blockbreak.json'], function() {
    Q.compileSheets('blockbreak.png','blockbreak.json');
    Q.scene('game',new Q.Scene(function(stage) {
      stage.insert(new Q.Paddle());
      stage.insert(new Q.Ball());
    }));
    Q.stageScene('game');
  });

You can see the actual code is shortened to a scene definition and the staging of that scene. Resetting the game is now as simple as calling Q.stageScene('game'). Reload the game page and make sure everything still works exactly as before.

With the boilerplate changes ...