HTML and CSS Reference
In-Depth Information
Next you need to modify the actual loading code at the bottom of blockbreak.js to add some blocks
onto the screen and do something when all the blocks have been destroyed. That something is going to be the
simple act of resetting the game back to start. Modify the following highlighted code to finish up Blockbreak :
Q.load(['blockbreak.png','blockbreak.json'], function() {
Q.compileSheets('blockbreak.png','blockbreak.json');
Q.scene('game',new Q.Scene(function(stage) {
stage.add(new Q.Paddle());
stage.add(new Q.Ball());
var blockCount=0;
for(var x=0;x<6;x++) {
for(var y=0;y<5;y++) {
stage.insert(new Q.Block({ x: x*50+10, y: y*30+10 }));
blockCount++;
}
}
stage.bind('removeBlock',function() {
blockCount--;
if(blockCount == 0) {
Q.stageScene('game');
}
});
}));
Q.stageScene('game');
});
Notice the use of the variable blockCount to keep track of the number of blocks still left to destroy. To
set up the blocks, the scene method loops over the x and y dimensions with some hardcoded values and adds
those elements onto the page. When it receives a removeBlock event, it counts down until there are no more
blocks left and then unceremoniously restarts the game.
That's about as far as this topic is going to take the Blockbreak game because its primary purpose was to be
an example of how to build a game with the scene and sprite functionality—and clocking in at just under 100
lines of code, the game does its job. To be a complete game, it still would have a while to go: The collision
detection doesn't take into consideration side impacts; the paddle position doesn't control the bounce; and the
game has no lives, no points, and no welcome or game-over screens. Some power-ups wouldn't hurt either, but
all that is left as an exercise for you.
Summary
You have now completed the initial Quintus functionality, adding in sprites, sprite maps, scenes, and the stage.
The engine is now complete enough to be used to build a Canvas game, as was shown in the simple Blockbreak
game built at the end of the chapter. As you'll see in the next few chapters, with a few more extensions, the
engine will be capable of building CSS3 and SVG games.
 
Search WWH ::




Custom Search