Super Markup Man

Super Markup Man is an HTML5 game that doubles as a teaching tool for HTML. In this 2D platformer, players "build" a website by picking up and moving HTML tags around the level. In doing so, players can learn the rules and organization of HTML markup without having to write any actual code!


Super Markup Man was a collaborative effort with The Hello World Program, an educational puppet show that focused on computer science. The goal was to create a game that would teach some facet of programming. Since my day job at the time was web development, I decided to go with HTML. The game was made using the HTML5 canvas element and JavaScript, and all graphics were taken from public domain sources like OpenGameArt.

To coincide with the educational nature of the game and Hello World show, I wrote three instructional articles on how to build your own HTML5 game, using Super Markup Man as the template. I've converted these tutorials to PDFs, which you can view here: Part 1, Part 2, Part 3. Fair warning, though: the tutorials were written before I understood JS best practices!


"It's a very simple game that is fun to play even if you already know HTML tags." — HTML5 Blog

Featured as a learning resource on Coder Dojo and Grade Infinity.