HTML5 Game Development with Phaser


From my #presentation to the Fredericksburg Developer Group: HTML5 Game Development with Phaser. If you couldn’t make it, check out the slides below. And the source for the game Zeta Bros. is on Github.  

Complete Game Demo


Got the #Phaser game all buttoned up for the presentation. Added character selection to the main screen, some extra sound effects and more tweaks to the animation. Follow the links to take it out for a spin and then take a look through the #JavaScript on GitHub.

Level Design


Cleaned up the levels a bit. Made Level2 more difficult. The game is in a complete enough state for the demo now. Going to add some finishing touches if there’s time.

Killer Bots

Security bot sprites are in place. The wall switches deactivate the bots, leaving them in a vulnerable state. Equivalent to stunning the enemies in Mario Bros. Alpha Zeta makes quick work of them, turning them into a pile of junk.

Revised Graphics


Updated level design with final graphics. Time to add the killer robots and start wiring everything together.

Sound Effects

More experimentation with the #WebAudio support in #Phaser. I’m not much of a sound designer so all of these clips are taken from

Intro Animation

Using #Phaser tween animation and #WebAudio events to add some life to the splash screen.

Level Refactor


Added “level” objects that extend the base GameScene object. The createPlatform and spawnBot methods are overridden to customize each level. I prefer this method to a config object because it lets me customize every aspect of the level if needed. Check out the video to see the 2 example levels.

Game Over Man!


Recycling the background and the font and, Viola, we have instant end-game scene. Right now it’s serving double-time as both a winning and losing screen.

Intro Scene


Added an intro scene with the splash image I made a few weeks ago. It’ll need a “Start” button but for now just click anywhere.