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

this.velY += this.gravity;

// and the velocity to the position
this.posX += this.velX;
this.posY += this.velY;
this.posZ += this.velZ;

//rotate pos and vel around the centre
counter++;
this.rotate(2);

};

As well as x, y, and z position, we also have an x, y, and z velocity. Velocity is how much it moves in each
direction every frame.

First we add gravity to velY (the y velocity). This is part of the simple physics system, and in most
circumstances gravity would be a positive number that gets added to velocity making things fall down. In
our case we're subverting this system by giving gravity a negative value! This makes our fish accelerate
upwards, which makes our game a little harder.

Fish render

This is a pretty scary-looking function, but it's quite simple at its core: it updates the DOM element's style
properties to move, scale, and rotate the fish. It only looks complex because we have to make the strings
that adjust these properties.

this.render = function() {
var dom = this.domElement,

styleStr,

sx = Math.sin(counter*0.4)*0.04 + this.size,

sy = Math.sin(Math.PI + counter*0.4)*0.04 + this.size;

dom.style.webkitTransform = "translate3d("+this.posX+"px, "+this.posY+"px,
"+this.posZ+"px) scale("+sx+","+sy+") rotate("+Math.sin(counter*0.05)*20+"deg)";

};

The weird looking Math.sin function uses a sine wave to affect the fishes' x and y scale. This makes the
fish wobble and look kinda squishy, like it's swimming through water.

The last line sets the CSS property webkitTransform , and we're adjusting translate3d , which is the 3D
transformation. Then it's scaled in both x and y axis (the wobble). And finally it's rotated in 2D using
another sine value that causes the fish's left and right oscillating rotation.