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()
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.scene('game',new Q.Scene(function(stage) {
stage.insert(new Q.Paddle());
stage.insert(new Q.Ball());
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) {
Search WWH ::

Custom Search