Progression
Maybe you’ve read my last few posts which set some precedence to the demo below. If not, I’ve spent the last few weeks casually learning the ins-and-outs of HTML’s Canvas element along with the Box2d port to JavaScript. It’s been a nice steep hill to climb, but I’m finding small crags, paths and various other objects to grab that have helped my ascent and will continue to incrementally post my progress. I’m not sure exactly where this is all headed… its just exploration for now, where it leads is just that! I may have mentioned it before, but man is it rewarding! I love that feeling of creation I get when I’m using the (HTML5) technology stack. The synergy between them and the rapid results are just wonderful; I haven’t felt this way, in this particular niche of software development, since the early days of Director (Lingo) hackery!
Hello (Super Mario)? World
Continuing in the vein of creating block bodies in a single world view, it seemed fitting to use a few sprites from Nintendo’s Super Mario Brothers (although the clouds are from SMB3). Speaking of the clouds, I thought it would be interesting this time ’round to see how compositing other DOM elements overtop the Canvas would turn out. So, if you notice, the clouds are actually <div> elements that are positioned above the Canvas to give the illusion of depth. This actually lets us do lots more interesting things. For example, I’m incorporating some CSS3 animations (Webkit only, maybe one day other browser vendors will see the light). The HTML5 Audio element also makes an appearance for the playback the sound effect when launching a block, so un-mute your speakers and enjoy!
Props
Lots of random props go to articles and guides across the web that helped me in the ways of Canvas and Box2d. I’d also like to mention that I used the awesome CFXR port of Dr. Petter’s SFXR to generate the sound made when launching a block. Thanks so much!
