each
row
element, it creates ten
<div>
elements of class
block
. To achieve this,
it first removes all row elements that might exist already in line 24. Again,
we use jQuery to our advantage. The
children
method returns all children of
the
playfield
element having the class
row
. The
remove
method removes all of
these elements from the HTML page.
Note that variable names can contain the
$
character, too, in JavaScript. We
use it for naming variables such as
$playfield
that refer to jQuery objects, which
is a helpful convention.
With two nested
for
loops, we create the bricks afterwards. Here we use the
omnipotent
$
function again to create all the
<div>
elements we need. If you
pass a string containing HTML code to the
$
method, it actually creates the
element. In line 27 we create a new row, and in the following line we insert
the newly created row into the current HTML page.
In the following
for
loop, we do the same for the actual blocks. Here we not
only create the
<div>
elements, but we also set their
background
property to an
image depending on the block’s row. The images are gradient images that
make the blocks more colorful.
Now that the game has been initialized, we can implement the game loop that
gets called for each frame.
BrowserGame/Arduinoid/js/arduinoid.js
function gameLoop() {
switch (Game.state) {
case GameStates.PAUSED:
if (Game.controller.buttonPressed) {
Game.state = GameStates.RUNNING;
}
break;
case GameStates.RUNNING:
movePaddle();
moveBall();
checkCollisions();
updateStatistics();
break;
case GameStates.WON:
handleMessageState("winner");
break;
case GameStates.LOST:
handleMessageState("game_over");
break;
default:
break;
}
}
report erratum • discuss
Creating the Game • 119
www.it-ebooks.info