HTML and CSS Reference
In-Depth Information
if(hit instanceof Q.Paddle) {
p.dy = -1;
} else {
hit.trigger('collision',this);
}
}
p.x += p.dx * p.speed * dt;
p.y += p.dy * p.speed * dt;
if(p.x < 0) {
p.x = 0;
p.dx = 1;
} else if(p.x > Q.width - p.w) {
p.dx = -1;
p.x = Q.width - p.w;
}
if(p.y < 0) {
p.y = 0;
p.dy = 1;
} else if(p.y > Q.height) {
Q.stageScene('game');
}
}
This makes it so that the paddle interacts with the ball. The game starts over if you miss the ball and let it go
off the bottom of the screen. Although chasing a ball around an empty screen is probably more fun than you can
handle, now add to the excitement some actual blocks.
The block class isn't going to be anything special. The only explicit functionality it's going to have is some
extra code when the ball triggers a collision. Add the code in
Listing 11-10
to
blockbreak.js
above the
Q.load
statement:
Listing 11-10:
The Blockbreak Q.Block class
Q.Block = Q.Sprite.extend({
init: function(props) {
this._super(_(props).extend({ sheet: 'block'}));
this.bind('collision',function(ball) {
this.destroy();
ball.p.dy *= -1;
Q.stage().trigger('removeBlock');
});
}
});
If you look at the changes made to the
Q.Ball
class a couple of snippets ago, you can notice the ball is
already triggering a
collision
callback when it hits anything that's not the paddle. The block object listens
for that collision callback, removes itself, and flips the direction the ball was heading vertically. It also triggers
an event called
removeBlock
on the stage.
