HTML and CSS Reference
In-Depth Information
First, open
blockbreak.html
and add the required
<script>
tag:
<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='quintus_audio.js'></script>
<script src='blockbreak.js'></script>
Next, open
blockbreak.js
and add the
Audio
module to the top of the file and call
enableSound()
to enable the sound system.
$(function() {
var Q = window.Q = Quintus()
.include('Input,Sprites,Scenes,Audio')
.setup()
.enableSound();
Next, modify the
step
method in
Q.Ball
to play
paddle.mp3
when the ball hits a paddle and
block.mp3
when the ball hits a block.
Q.Ball = Q.Sprite.extend({
init: function() {
this._super({
sheet: 'ball',
speed: 200,
dx: 1,
dy: -1,
});
this.p.y = Q.height / 2 - this.p.h;
this.p.x = Q.width / 2 + this.p.w / 2;
},
step: function(dt) {
var p = this.p;
var hit = Q.stage().collide(this);
if(hit) {
if(hit instanceof Q.Paddle) {
Q.play('paddle.mp3',500);
p.dy = -1;
} else {
Q.play('block.mp3');
hit.trigger('collision',this);
}
}
The
paddle.mp3
playback is debounced to occur only every 500 milliseconds. This is because the ball
may overlap the paddle for multiple frames, so the sound playback needs to be debounced to prevent the game
from trying to play a new sound every frame. The
block.mp3
file, on the other hand, doesn't need to be de-
bounced because the block is removed after a collision.
Finally, modify the
Q.load
call to load
paddle.mp3
and
block.mp3
:
