HTML5 Game Development with Phaser

2019-09-16

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

2019-08-30

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

2019-08-18

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

2019-08-05

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 freesound.org

Intro Animation



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

Level Refactor

2019-07-13

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!

2019-07-12

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

2019-07-07

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.