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

Cross-browser considerations

For the sake of simplicity, we're blatantly ignoring cross-browser issues, and only
worrying about iOS and webkit.

But is it possible to make this work across all browsers?

Modern browsers pretty much all support these transforms, but they all use their own
prefix. In our code, you see properties of the webkitTransform style, but you have to use
mozTransform for Firefox, OTransform for Opera, MSTransform for IE, and, of course,
include transform, too, for when it becomes standardized.

You can perform a check in JavaScript to see if the browser supports transforms; there's
a sniffer in Modernizr ( www.modernizr.com ) that you can use.

And if your browser doesn't support 3D CSS, it's not that hard to convert 3D positions
into a 2D position and scale. There's a canvas-based example of how to do just that at
http://seb.ly/html5-canvas-3d-particle/ . So instead of changing 3D
transformations, you can use 2D scale and translate styles to resize and position
elements so that they look like they're in 3D.

If you want to support really old browsers, you could try cssSandpaper
( www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ ) as a fallback.

Making fish

Here's the first part of the makeFish(…) function. First, we check to see if there are any fishes for reuse
(more on this in the “Recycling the fish” section), and if not, we create a new one. Notice that we're using
the modulus (%) operator to make sure the fish image number is never higher than the number of fish
images we have.

Then we're adding touchstart and mouseover events for the fish's DOM element, so that we know when
the fish have been hit. If you're playing it on your desktop, you only have to move your mouse over the fish
to burst them!

// create a new fish in the bottom middle of the stage
if(spareFishes.length>0) {
// if one is already in the spare array, recycle it
fish = spareFishes.pop();

fish.enabled = true;
fish.domElement.style.visibility = "visible";
} else {
// otherwise make a new one
// Work out the fishimage URL
var fishImageURL = "img/orangefish0"+((fishes.length % 4) + 1)+".png";
// and then make a new fish object
fish = new Fish(0, 0, 0, fishImageURL, 128, 128);
// add it into the array of fishes