My son turned 6 just recently, and I wanted to see how far we could go to make our first game together. I thought we’d start where I did, at adventure games. My first real game memory is ‘Adventure’ for the Apple ][. I’m sure there were many before that, but this game stuck in my head. It was so simple, but fun.
So I decided to see what we could do in a long weekend. I started with him drawing a maze on a 8×8 grid. He did this by drawing doors on the walls, and this would be a path. Then I asked him to find a dead end and draw a key in it. I explained the point of the game will be to walk through the maze going North, East, South, or West to find the key and get to the door and find the trophy.
What would be required from me:
* Some JSON data structure to hold the room information
* Keys to identify which doors were available
* Descriptions of the room
So I started with the basics of the JSON data, with that above.
Then I realized there should be some actions, (other buttons that the user could press, e.g. ‘look around’). So I fleshed out the json to take ‘actions’ these would generate buttons to be pressed. The default was ‘look around’, when that was pressed we’d display alternate text.
* Alt text if you looked around
I defined the Data structure, then called him over. The next step was to build out all the rooms. He first labeled each square from 0-0, to 5-5 for his grid, this would be the id in the json object per room. Then he read aloud the doors, ‘North, East, South’, etc for each room and I would enter ‘nes’, as they were called out for each room into the json. I then sent him on his way and piped in some clever text for the description and alt-text.
At this stage I got the game up and running within 4 hours. I then sat my son down, and he started to read and do a couple rooms then got bored, as he didn’t see any pictures. (* ok so he’s spoiled with modern gaming, my bad). So I added some simple graphic placeholder, then I worked on items. The idea is that kids slightly older could program this by hand, but better define tools later. Once again everything is text based, so I used tokens for items, e.g. $key is a token that looks up the item dictionary to get the appropriate item.
Here’s a sample item.
{ id: "$key", desc: "Red Key", type: "inv", value: "key_0001" }
The action is defined as:
'Take $key'
So the $key is detected on load, the text is swapped out with the ‘Red Key’ text, and displayed on screen. The item can then be taken, ‘Take Key’ and it’l be added to the inventory. This was some of the more clever code. So now I added tokens (simple variables), and then I needed to add conditions.
* Simple variables (such as a key) that could be added to an inventory and used.
* A way to stop people from going into rooms with conditions (such as a key)
* Verbs (Take, Use, Drop)
Now we had verbs, if you took an item, it would go in your inventory. If you dropped it, you’d lose it. If you used it, it’d be consumed (like use key on door).
So now to stop the user from going into rooms they don’t have the prerequisites done, I added that into the engine. So if a room has a preq of ‘$key’ they cannot go in unless that item is in the inventory. Also we need to express why, so if you have a preq, you have a preqdesc which is alt text that is displayed stating the condition you haven’t met.
The game is now fully playable, sitting at around 180 lines of code, 100 lines of html / css, + json / images.
Next I added some doors…
So now we get into dynamic doors, we already know the directions, and that enable / disables buttons. So I used that same logic to overlay images to draw doors for valid visible paths (North, East, West). And the game is now coming to life a bit. I still don’t have zombies, but they’ll come soon enough. Below is a screenshot of the engine and game in progress.
My long term goal is to make this actually an engine we can use to teach kids to make some games and learn story telling through games. The tools I aim to be simple and easy to use. Unfortunately my front-end skills are terrible, but the app design and data is beautiful. 😉
Til next update!