Game Development Reference
In-Depth Information
Listing 4-4.
The init Function Is Called when the Document Has Loaded
function init() {
canvas = document.getElementById('canvas');
stage = new createjs.Stage(canvas);
newGame();
startGame();
}
A reference to the canvas is stored and the
stage
object is created. This is followed by a few methods, the first
being
newGame
, which is used to call its own series of functions used to set up the game. The final function,
startGame
,
will kick off the game loop, which will trigger all animation and gameplay into action. Both of these functions are
shown in Listing 4-5.
Listing 4-5.
The newGame and startGame Functions
function newGame() {
buildWalls();
buildMessageBoard();
buildPaddle();
buildPuck();
setControls();
newLevel();
newLevel();
}
function startGame() {
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", function (e) {
if (!e.paused) {
stage.update();
}
});
}
You'll be taking a close look at each function fired from the
newGame
function shortly, but first let's get a broad
overview of what is accomplished when they are executed. The first four functions draw the essential game elements
in the game. The controls are then set up, and finally a few levels are added to the board.
After the new game is initialized, it's started by setting up
Ticker
to update the stage at a frame rate of 60 frames
per second. You'll be adding much more to this game loop after the setup of the game, so you'll be revisiting this
function later. I prefer to keep this function at the bottom of my script, closer to the run game functions we will build
later, but feel free to leave it where it is for now.
Let's break down these initializing functions now. The first four are used for building and drawing the game
elements.
Building the Game Elements
It's now time to draw the elements that will be used in the game play. In this section, a series of functions are written
to draw the walls, a message board, and the puck and paddle.
