Continuing with our short series on creating a JavaScript adventure game. Today we will look at creating a few more features and put them all together into a longer demo.
1. Download the files
2. The CSS
3. Adding reminders
4. "The Astonishing Cave of Unimaginable Horror."
1. Download the files
You will need a copy of three files to use this example. Download now.
The files are:
index.html (this is the code for the main page)
flags.json (this code keeps track of the various flags used in the game)
script.json (this code keeps all of the adventure game - the options and paragraphs of text).
2. The CSS
We first looked at the CSS in the third post. In this version I have added some more CSS rules to make the adventure game look at little better.
 |
| The adventure game running in Microsoft's Edge browser. |
This is intended to be an example only. I am no self-confessed expert at CSS and you will no doubt want to experiment with the CSS code to make it look exactly as you want, however you will agree that it looks a lot better for the face lift.
3. Adding reminders
I thought that it would be useful to have reminders appear on screen to help you remember whether you have found certain items or not. For example, in this demo game you can find a (somewhat useless) key.
The first step in this process was to record some new attributes for each flag. Open the flags.json file and take a look.
Each flag now has a 'show'attribute. If the value is set to 'true' then the description will be displayed on the right-hand-side of the screen. Furthermore when you hover over the description a longer description held in 'text' will appear as a hint. Some flags are used to control whether the play has already completed an action (so that option is not given again) and so not all the flags should be displayed in the reminders.
The JavaScript code to make this work looks like this:
It starts on line 148, and it does the following:
Create a new list of reminders.
For each flag:
If the flag is on and the flag should be displayed
Add the description to the list
Add the 'text' as hover text
Put the new list into the html of the thing called 'infoContainer'. (You can see infoContainer on line 176)
4. The Astonishing Cave of Unimaginable Horror
The demo adventure is rather short, but it does show off all of the things that you can do using this code.
The adventure starts at the bottom of a deep hole.
 |
| Not much to do here other than accept your fate and press 'OK' (it's a bit like downloading Windows 10 updates in that respect) |
Shortly you are given some options:
 |
| By investigating the running water you will discover that you are at the bottom of a wishing well. There is some gold you can grab here, but once you have this option shouldn't be presented again. Notice how there is a flag that will prevent this option being displayed again. |
Soon you find an object...
 |
| By searching the unfortunate victim from a little earlier on you will discover a bronze key. Notice how we set a flag to appear as a 'reminder'. Also, the option to try the bronze key in the iron padlock is now displayed. Try to visit this location without the key - the option will not be given. |
Actually, the bronze key is not the correct key for the iron padlock (presumably you need an iron key?) and the key will get stuck. Line 108 in the script.json file controls this behaviour:
 |
| Trying the wrong key in the lock is not a good plan. When you do flag 3 (the key) is turned off. You should see that the key is removed from your list of objects in the 'reminders' section. |
The code for turning flags off is dealt with on line 92 in index.html.
Well that's enough for now. Maybe I will continue with this series in the future and add a few more features - such as a combat system for dealing with the sleeping beastie to the west.
For now, I hope you enjoyed this brief JavaScript tutorial and you found it easy enough to create your own games.
Bored already?
You might like to play a longer JavaScript adventure game - see Have Spell will Travel, or read all about it on this blog.
Before I go I should point out that the images used in this tutorial come from the brilliant duo: Lorc Delapuite from Game Icons