Game.score = 0;
-
resetMovingObjects();
5
updateStatistics();
-
drawPlayfield();
-
}
-
-
function resetMovingObjects() {
10
$("#paddle").css("left", (Game.playfield.width - Game.paddle.width) / 2);
-
$("#ball").css("left", (Game.playfield.width - Game.ball.diameter) / 2);
-
$("#ball").css("top", parseInt($("#paddle").css("top")) - Game.paddle.height);
-
}
-
15
function updateStatistics() {
-
$('#lives').text(Game.lives);
-
$('#score').text(Game.score);
-
}
-
20
function drawPlayfield() {
-
var colors = ['blue', 'green', 'red', 'yellow'];
-
var $playfield = $('#playfield');
-
$playfield.children('.row').remove();
-
25
for (var row = 0; row < Game.playfield.rows; row++) {
-
var $row = $('<div class="row"></div>');
-
$row.appendTo($playfield);
-
for (var col = 0; col < Game.playfield.columns; col++) {
-
var $block = $("<div class='block'></div>");
30
$block.css("background", 'url("img/' + colors[row] + '.png")');
-
$block.appendTo($row);
-
}
-
}
-
}
35
initGame
pretty much deserves its name, because it actually initializes the
game. It sets a few properties of the
Game
object to their default values
directly. Then it calls several functions for initializing specific game objects.
resetMovingObjects
sets the positions of the ball and the paddle to their default
values. The paddle appears at the middle of the playfield’s bottom. The ball
then sits on top of the paddle.
updateStatistics
copies the current number of lives and the current score to the
HTML page. It uses jQuery’s
text
method to set the text of the elements speci-
fied by the IDs
lives
and
score
. In the
initGame
function, the game’s default values
will be copied, of course, but we’ll call this function later on, when the game
is running.
The
drawPlayfield
function draws the bricks that the player has to hit with the
ball. It creates four
<div>
elements with their
class
attribute set to
row
. Within
Chapter 7. Writing a Game for the Motion-Sensing Game Controller • 118
report erratum • discuss
www.it-ebooks.info