HTML and CSS Reference
In-Depth Information
if(this.callback) this.callback();
}
}
// Dummy method, doesn't draw anything
Level.prototype.draw = function(ctx) { }
This is a complex method. The method is broken into three main sections:
• The first section uses a
while
statement to loop over the beginning of the
levelData
array until it
gets past any active ships. (This prevents the need to loop over every element in the array.) For each row
in the level data, it checks if it is passed the end value (the second element of the array). If so, it adds that
element to a list of elements to be removed from the
levelData
array. If not, it pulls out the enemy
blueprint and the override and adds a new enemy onto the board. It then increments the start value (the
first element of the array) by the length of between-enemy gap. Modifying the start time allows the
step
method to handle adding a string of enemies on the page without any additional logic.
• The second section of the
step
method should look familiar from the
GameBoard
object. All it is does
is look at all the entries in
levelData
that have been added to the remove list and splices them out of
the array, much like the
finalizeRemoved
method in
GameBoard
did.
• The final section consists of a conditional that checks if there are no more upcoming enemies in
levelData
and if the number of enemies on the board is zero. If both of those conditions are true, then
the level is considered over, and the callback, if one is set, is called. This allows the level to know when
it has been completed.
Finally, the
Level
object needs a
draw
method so that it can play nicely with
GameBoard
, but that method
is just a stub that doesn't actually do anything.
Fire up the game with all the
Level
pieces in, and you should see the game and enemies in all their glory.
Summary
Congratulations! You took the stub of a game—a lonely spaceship flying around empty space—and turned it
into a playable game with waves of enemies and win and failure screens.
You may have noticed a slight issue so far, though—it's not mobile. The next chapter remedies this when you
add touch controls and support for resizing. A few finishing touches, such as scoring, can turn
Alien Invasion
into a polished, playable mobile game that works on the desktop as well.