In this post we will look at the adventure game code in more detail.
1. Downloading the files
2. The code in detail
1. Downloading the files
You will need some files to play with. You can download them here.
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 code in detail
The start of the code just sets up the html file. The <title> tag lets you tell your browser what to call your game. Go ahead and change it. You should notice that your browser tab has changed. If it doesn't work make sure you saved your code and try again. The <meta> tags are used by your browser and search engines. We don't really need these as the code isn't online (yet).
These two lines tell your JavaScript program to load the two *.json files into memory. Your JavaScript will now have two lists, one called script and the other called flag. You can refer to any of the items in this list using the index notation: for example script[1].title refers to the title of the second script. In my file with has a value of "A key!".
This section is called the CSS (Cascading Style Sheet). We could have put this in a separate file if we wanted. The CSS tells the browser how to display the various html in our page. For example, the first two lines tell the browser to display the body of the page in black with a font colour of white. Notice that you must use the American (incorrect) spelling of 'color'. You can read more about CSS on w3schools.com.
Notice the full stops before the things in green? These refer to anything in the html code that has a class name. For example, whenever we put an image into a location we use an image of class "locationImage". The CSS rule here is to have a solid border.
You will also notice that there is no CSS for the class "inGameHeading". Try adding some rules here to change the style of the paragraph headings.
This line of code tells the browser that the next part of the file is some JavaScript. Remember - JavaScript is a scripting language that lets you change the html on a page in response to the user's actions. In our case, whenever the user presses a link we want the page to put new paragraphs, options and images onto the page.
Inside our JavaScript section we have added a function - turnPage(). This function has the job of putting a new location in the game on the screen. This function is invoked every time the user presses one of the options. The function starts with a curly brace { on line 45 and ends with a curly brace } on line 101.
Notice that the function has a letter 'n' after
This variable is called a parameter. Whenever you invoke the turnPage function, you must tell it which location to 'turn to'. Remember that the first location in the script file is 0. This is why line 100 reads:
function turnPage( ?This variable is called a parameter. Whenever you invoke the turnPage function, you must tell it which location to 'turn to'. Remember that the first location in the script file is 0. This is why line 100 reads:
onClick='turnPage(0)'It means: 'click this and turn to the first location'.
Next, the function will try to put the new location on the screen.
line 55: It puts the new location's title into a variable called 'newtitle'.
line 57: It puts the new description into a variable called 'newcontent'.
line 59: It puts the new image into a variable called 'newimage'.
Putting the links in are a little trickier...
Lines 64 - 89 deal with putting the links in. Remember that it is possible for a link to appear and disappear depending on whether an action has been completed or not.
For each link in the list of links for any location this code checks whether the link should be displayed or not (depending on the value of the flag it points to).
Once the new html for the title, paragraph content, links and images have been created, these lines of code put the new html onto the page.
For example, line 97 literally means: "Find the thing in the document called 'titleContainer' and change its html so is equal to this thing in my variable 'newtitle'.
Once this has been completed the function has done its job and we can close our JavaScript section.
This last bit of code defines our html page. Everything between the <body> and </body> are part of the page. All our JavaScript function does is changes the contents of these four divs so that they are the new information from the script file.
And that brings us to the end of this sections. Come back soon and we will have more functionality.