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

Our Fish object handles the position, update, and appearance of our fish. The constructor parameters
specify its 3D position, the image URL, and the image size. We're creating an HTML div element and
setting its CSS properties so it has a fixed size, absolute position, and a background image.

function Fish(posx, posy, posz, imageSRC, imageWidth, imageHeight) {

var TO_RADIANS = Math.PI/180;
this.domElement = document.createElement('div');

this.domElement.style.background = 'url('+imageSRC+') transparent';

this.domElement.style.position = 'absolute';
this.domElement.style.display = 'block';
this.domElement.style.width = imageWidth+"px";
this.domElement.style.height = imageHeight+"px";
this.domElement.style.webkitTransformOrigin = (imageWidth/2)+"px
"+(imageHeight/2)+"px";
this.domElement.style.pointerEvents="auto";
// the position of the fish
this.posX = posx;
this.posY = posy;
this.posZ = posz;
// the velocity
this.velX = 0;
this.velY = 0;
this.velZ = 0;
this.size = 1;
this.enabled = true;
// add this to the yVel every frame to simulate gravity
this.gravity = 0;
var counter = 0;

this.update = function() {

// add gravity force to the y velocity

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);

};
this.render = function() {

var dom = this.domElement,