HTML and CSS Reference
In-Depth Information
Q.load(['blockbreak.png','blockbreak.json'], function() {
Q.compileSheets('blockbreak.png','blockbreak.json');
var paddle = new Q.Paddle();
var ball = new Q.Ball();
Q.gameLoop(function(dt) {
Q.clear();
paddle.step(dt);
paddle.draw();
ball.step(dt);
ball.draw();
Q.input.drawCanvas();
});
});
});
The setup portion and the loading portion of the code should be familiar. Because the game is now loaded via
a separate JavaScript file and not inline with the document, the entire file is a wrapper in a jQuery document-
ready callback: $(function() { .. }); . Next the game object Q is created and set up. Because the code
is wrapped in a closure, the variable Q is also added to the window object so that it can be accessible via the
console via window.Q in case you want to play around with the game's API directly. The game also sets up
the default keyboard controls and some custom touchControls to remove the a and b buttons that aren't
needed in this game.
Next up is the Q.Paddle sprite, which inherits from Sprite . The init method for the sprite calls the
Sprite constructor init with the initial properties of the object, including the name of the SpriteSheet
that will be used to draw the object. The init method does a little bit of calculation on the x position to center
the paddle and the y position of the object because on a desktop computer the paddle can be on the bottom of
the page, whereas on a touch device, it should be moved up to leave room for the keypad controls.
The paddle step method then overrides the default step method inherited from Sprite and uses the
Q.inputs object to determine if the paddle should be moving left or right.
The Q.Ball sprite is also added in. This sprite simply bounces around the game, reversing direction when
it runs into a wall. Currently it doesn't interact with the paddle. The step method uses the speed and direction
of the ball to update its position each frame.
Finally the game runs the gameLoop , which clears the Canvas, steps, draws the paddle, and then draws the
input elements.
Fire up the example, and you should be able to move the paddle left and right.
Search WWH ::




Custom Search