Game Development Reference
In-Depth Information
Particles
Figure 5-3. Image of exploding fish particles
We don't have room in this tutorial to look at the particle system in detail, but rest assured that it's a very
similar system to the way that we manage the fish. The particle emitter has its own update loop, and each
particle has a DOM element, position, and velocity. It just uses a slightly different physics model that
includes drag and a shrink factor that causes the particles to get smaller.
Have a look through the Particles.js file to see if you can work out how it works. All the code is commented
throughout.
For more information about particle systems, see the Seb Lee-Delisle tutorials at http://seb.ly/
tutorials .
Parallax layers
I've implemented a parallax layer system with two background layers moving at different speeds to give
the impression of 3D depth. Each one is a div that is twice the height of its image, and I move each y
position relative to a counter.
// update the parallax layers
layer1.style.webkitTransform = "translate3d(0px, "+(-768 +((counter*5)%768))+"px, -999px)
scale(4)";
layer2.style.webkitTransform = "translate3d(0px, "+(-768 +((counter*10)%768))+"px, -
998px) scale(4)";
 
Search WWH ::




Custom Search