HTML and CSS Reference
In-Depth Information
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
block-
break.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 out of the way, the first thing to do is add in support for collisions between the
ball and anything else it might come into contact with. In the definition of the
Q.Ball
in
blockbreak.js
,
add some collision detection code to the top and some code to reset the game if the ball goes below the bottom
of the screen. To keep the code simple,
Blockbreak
will have only one level and you get only one life.
step: function(dt) {
var p = this.p;
var hit = Q.stage().collide(this);
if(hit) {
