3D CSS Tutorial - HTML5 Games Most Wanted - page 93

Game variables

The following shows the game variables.

// DOM elements
var container = document.createElement('div'),

layer1 = document.createElement('div'),
layer2 = document.createElement('div'),

// screen size variables
SCREEN_WIDTH = 1024,
SCREEN_HEIGHT = 768,
HALF_WIDTH = SCREEN_WIDTH / 2,
HALF_HEIGHT = SCREEN_HEIGHT / 2,

// fish variables
fishes = [],
spareFishes = [],

counter = 0,
burstSound,

// the particle emitter
emitter = new Emitter(container);
container is a div element that contains the fishes and particles; layer1 and layer2 are the two watery
background divs.

We need to know half the width and height for working out the center of the screen. Fish objects are stored
in the fishes array and spareFishes is used to store the fishes that we're not currently using.

counter is incremented every frame (more on that later) and burstSound is played when a fish explodes.

We also create a particle emitter, a custom object defined in particles.js that creates and updates our
explosion particles.

The container's 3D properties

There are CSS styles at the top of the document as you would expect, but we're also setting some of them
with JavaScript. Notice container.style.webkitPerspective , which specifies how extreme the 3D
perspective is. This is like a field of view; in other words, how wide-angled our camera is. The
webkitPerspectiveOrigin should be the middle of your game screen, otherwise things will disappear into
the top left as they move into the distance.

// set up the CSS for the DOM elements
layer1.className = "parallax";
layer1.style.background = 'url(img/parallaxBack.jpg)';
document.body.appendChild(layer1);

layer2.className = "parallax";