Game Development Reference
In-Depth Information
Exploding the fish
The following are the listeners that are called when you touch or mouse-over a fish. In either case, we
need to find the fish object for the DOM element that fired the event. Note that the
touchstart
event has
an array of touch objects; it may well be that you touched down with multiple fingers at once.
function fishMouseOver(event) {
event.preventDefault();
var fish = getFishFromElement(event.target);
if(fish) explodeFish(fish);
}
function fishTouched(event) {
event.preventDefault();
for(var j=0; j<event.changedTouches.length; j++) {
var fish = getFishFromElement(event.target);
if(fish) explodeFish(fish);
}
}
function getFishFromElement(domElement) {
for(var i=0; i<fishes.length;i++) {
if(fishes[i].domElement == domElement) return fishes[i];
}
return false;
}
When we find the fish that was touched (or moused-over), we call
explodeFish(…)
, which plays the
explosion sound, calls
makeExplosion(…)
on the particle emitter (creating a burst of little particles), and
finally calls the
removeFish(…)
function.
Sound
It's improving all the time, but sound in HTML/JavaScript is a bit broken at the moment.
It's fine if you want to play some music, but if you're triggering sounds as you play a
game, it's patchy. Dominic Szablewski, the guy behind impact.js, has a slightly ranty but
informative blog post about this at
www.phoboslab.org/log/2011/03/the-state-o
f-
channels-
for-html5-audio
.
In iOS it's even worse. It seems as if you can play only one sound at a time, but it
sometimes just doesn't play at all. Remy Sharp fixed some of these issues with his
format rather than MP3, it seems marginally more reliable. I found that it also helps if
you use very short sounds (like in the
Burst
game).
If you're working across browsers, you'll need several audio file formats. You can test for a
specific format playback capabilities using Audio.canPlayType (although, astonishingly,
this gives the somewhat woolly responses of “probably” or “maybe”!) There's more
audio-
in-the-browser/
).
