Remember when coding was the domain of nerds? Then the internet exploded, and coders could write their own checks. Then every kid went to school to code, and schools began teaching kids to code at younger and younger ages. Soon enough, coding lessons took the form of a computer game, with most of them offering a sort of point-and-click interface to learn the fundamental concepts of code. Back when these games were just beginning to take off, my son wanted flirted for a time with the notion of being a coder, and so I flirted with the idea of building my own coding game.

Rather than point-and-click on the most rudimentary building blocks of generic code, I aimed to make a game that could help people learn JavaScript, from the most basic to the most advanced concepts. I wanted my students to learn things like function calls, arguments, and even object literals. I was also looking for an excuse to learn about canvas and drawing things on a page with JavaScript. So I went to work building a classic Dungeon Game.

The basic UI involves a series of <canvas> elements to display the user’s current health, the room and navigation options, and the health of any bad guy in the room. Below these, there is a text input where the user can enter commands in the form of JavaScript function calls. And below this, there is a text display where the user receives directions and status messages.

The basic idea is that the user(s) find their way out of the maze without being killed. Along the way, they will meet various enemies with different characteristics. Some of them are waiting in ambush (see the photo!). If the user survives, they can attack() or run away by issuing a move() command, but be warned! Many enemies are protecting treasures of various kinds!

Want to give it a try? Check it out here: https://jgeerdes.com/dungeon

Recently, I have been tinkering with the idea of rewriting the Dungeon Game. If I were to do that, I would consolidate the three <canvas> elements into a single element. I would draw the user and enemy telltales across the bottom, with the map in the middle, and the top portion of the screen would be a better view of the room, complete with the enemy and any treasures. I imagine it similar to Wolfenstein 3D.

I would also make it so the display was interactive. For instance, click on a door to trigger a move() command. Of course, the function call would be entered into the text input so the user could see what it looked like. So also, hovering over the enemy or treasure would produce a tooltip that explained what the user was looking at.

So maybe I will tinker with that if I get time. Maybe.

-Jeremy