Game Development Reference
In-Depth Information
the canvases. So what we need to do is first determine the total world width (can-
vas width multiplied by the total number of canvases), calculate which window the
snake is at (position/canvas width), then convert the position from world space down
to canvas space, given the canvas the snake is in.
First, lets define our structures in the parent document. The code for this is as fol-
lows:
// 1. Create an array to hold each frame (aka.
window)
var frames = new Array();
// 2. Let's keep track of some settings for
these frames
frames.max = 3;
frames.width = 200;
frames.height = 300;
frames.margin = 50;
// 3. Finally, we'll need a snake to move around
var snake = {
max: 3,
pos: {
x: 0,
y: 0
},
w: 25,
h: 25,
speed: 3,
dir: {
x: 1,
y: 0
},
color: "#0a0"
};
When this script loads, we'll need a way to create new windows, where the snake
will be able to move about. This can easily be done with a button that spawns a new
window when clicked, then adding that window to our array of frames, so that we can
