Game Development Reference
In-Depth Information
■
as some of the examples get longer and more complex, i'll be taking a function-by-function approach to
explaining the code.
Note
Color Drop
Color Drop is a simple color-matching game where the player must drop each game piece in the correct slot by
matching their colors.
•
Four square slots are displayed on the top of the screen.
•
Four blocks are randomly placed on the bottom of the screen, each with a color that matches a
slot at the top of the screen.
•
The player must drag each block into its corresponding slot, which is accomplished by
matching their colors.
•
If a player drops it in the wrong slot, the block will animate back to where it was grabbed.
•
If a player drops it in the correct slot, it should animate to snap in place of the slot.
•
Once the player fills all four slots, alert the user that they have won the game.
First, set up the HTML document that includes a
Canvas
element and the necessary CreateJS file includes
(see Listing 3-3). The game code will be written in a separate script (see Listing 3-4), so be sure to create this file
and include it in the document.
Listing 3-3.
HTML Document for Color Drop
<!DOCTYPE html>
<html>
<head>
<title>Color Drop Game</title>
<script src="js/lib/easeljs-0.7.1.min.js"></script>
<script src="js/lib/tweenjs-0.5.1.min.js"></script>
<script src="js/colorDrop.js"></script>
</head>
<body onload="init()">
<canvas id="canvas" width="1000" height="800" style="border: black solid 1px"></canvas>
</body>
</html>
Listing 3-4.
colorDrop.js - Game Variables and init Function
var stage;
var shapes = [];
var slots = [];
var score = 0;
