Game Development Reference
In-Depth Information
<body onload="init()">
<canvas id="canvas" width="800" height="700"></canvas>
</body>
</html>
Beginning the Game Code
Now that the HTML is set up, let's start digging into the game code. Open up
breakit.js
to begin the game
programming. Start by declaring all of the game variables that will be used in the game.
Declaring the Game Constants and Variables
Several constants and variables will be used throughout the game. As usual, these are declared at the the top of the
script. Start by listing the game constants (see Listing 4-1). I prefer to lay these out first, as they are often the most
tweaked during programming to adjust the look and feel of the game.
Listing 4-1.
Game Constants
const WALL_THICKNESS = 20;
const PADDLE_WIDTH = 100;
const PADDLE_SPEED = 16;
const PUCK_SPEED = 5;
const PADDLE_HITS_FOR_NEW_LEVEL = 5;
const SCORE_BOARD_HEIGHT = 50;
const ARROW_KEY_LEFT = 37;
const ARROW_KEY_RIGHT = 39;
const SPACE_KEY = 32;
These constants represent the values that won't change during gameplay, and they play a crucial part in building
the game. As you get further into the game code, it becomes a lot easier to adjust these values at the top of your
script, as opposed to chasing down hard-coded values in your game functions. Since this particular game doesn't
progressively adjust speed, you can add these values to the list of constants. Also included are some values that will
be needed to draw the game assets; they will factor into calculating the graphics positions during gameplay. The final
three are meant to help with the keyboard
keyCodes (
you saw this in a few examples in Chapter 3). Listing 4-2 lists
the game variables.
Listing 4-2.
Game Variables
var canvas, stage, paddle, puck, board, scoreTxt, livesTxt, messageTxt, messageInterval;
var leftWall, rightWall, ceiling, floor;
var leftKeyDown = false;
var rightKeyDown = false;
var bricks = [];
var paddleHits = 0;
var combo = 0;
