Super Markup Man

Description

Learn HTML and CSS in the context of a 2D puzzle platformer! Super Markup Man teaches real web development practices without making you write any code. Simply carry the tags around the screen and watch your website render in real-time. Match your website with the preview to pass each level. The game includes:

Development

Because my past HTML-teaching games and apps have been some of my more well-received projects, I wanted to create a "quintessential version" that also covered CSS, which is the part of web development that truly gives life to HTML. So I took the original, browser-based Super Marup Man (which was created three years earlier) and gave it a major face lift. I purchased new character spritesheets from Game Dev Market, included sound effects from Little Robot Sound Factory, and added music courtesy of Kevin MacLeod.

Like the PC port of Build 'n Bump, the foundation for the game was Node Webkit (also known as NW.js). This means everything was written in web languages! The actual gameplay sections were done via the <canvas> element while the web pages were simply <iframe> tags. I also used Grunt and LESS to facilitate development. And in the spirit of all things web, I even repurposed the official HTML5 logo (the orange shield) for various UI elements in the game.

Reception

"Hands-on learners will enjoy Super Markup Man." — OPNoobs

Invited to the indie showcase at Casual Connect 2016.

Screenshots

Super Markup Man screenshot Super Markup Man screenshot