Game Development Reference
In-Depth Information
Listing 5-10.
HTML File for Puzzle Swap
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="lib/easeljs-0.7.1.min.js"></script>
<script src="lib/tweenjs-0.5.1.min.js"></script>
<script src="lib/filters/ColorMatrix.js"></script>
<script src="lib/filters/ColorMatrixFilter.js"></script>
<script src="puzzle.js"></script>
</head>
<body onload="init()">
<canvas id="canvas" width="1000" height="600" style="border: black solid 1px"></canvas>
</body>
</html>
Initializing the Game
Moving over to the
puzzle.js
file, some game constants and variables are first declared. Following this, the
init
function is written (see Listing 5-11), which is fired on the
onload
body event.
Listing 5-11.
puzzle.js Game Variable and init Function
const PUZZLE_COLUMNS = 5;
const PUZZLE_ROWS = 3;
const PUZZLE_SIZE = 200;
var stage;
var pieces = [];
var selectedPieces = [];
function init() {
stage = new createjs.Stage(document.getElementById('canvas'));
buildPuzzle();
startGame();
setTimeout(shufflePuzzle, 3000);
}
The constants created will be used in creating the graphics for the puzzle pieces and creating the grid to lay them
out on. A couple of arrays are created to store all of the puzzle pieces, and another for the pieces that are selected to
swap. The
init
function sets up the stage, and then calls a list of functions. The function
buildPuzzle
is first called to
set up the puzzle pieces.
