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()
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() {
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) {'paddle.mp3',500);
p.dy = -1;
} else {'block.mp3');
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 :
Search WWH ::

Custom Search