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

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

};

this.rotate = function(angle, useRadians) {

// trig that rotates around the y axis (affecting x and z)
var cosRY = Math.cos(angle * (useRadians ? 1 : TO_RADIANS));
var sinRY = Math.sin(angle * (useRadians ? 1 : TO_RADIANS));

var tempx = this.posX- HALF_WIDTH;
this.posX= (tempx*cosRY)-(this.posZ*sinRY) +HALF_WIDTH;

this.posZ= (tempx*sinRY)+(this.posZ*cosRY);

tempx = this.velX;

this.velX= (tempx*cosRY)-(this.velZ*sinRY);

this.velZ= (tempx*sinRY)+(this.velZ*cosRY);

};
}

div or img?

We're using divs with a background image for all our game objects, but we could just
use normal image objects. However, if we wanted to create animations, it'd be easier
with divs. Using a spritesheet image like Figure 5-2 allows you to switch “frames” by
adjusting the div's background offset. This is how we created the animated characters
on the iPad-optimized platform game Infector! at Plug-in Media. More information is
available at http://seb.ly/html5javascript-platform-game/ .

Figure 5-2. An example spritesheet from the Infector! game by Plug-in Media.

Fish update
Here's the Fish.update function.

this.update = function() {

// add gravity force to the y velocity