Create Your Own Adventure Game (HTML)

173286 Views, 46 Favorites, 0 Comments

Create Your Own Adventure Game (HTML)

This is a very very very basic use of HTML programming to make a create your own adventure game. I'm not super knowledgable in HTML. If you see this and try it and want to beef up your game to make it more visually awesome you can find everything you need to know about writing HTML at www.w3schools.com.

What is a create your own adventure game?
Have you ever been flipping through a text book at school and at the bottom of a page it says "turn to page 36" or something, then you turn to that page and it tells you to turn to another one and so on? That is a very similar concept. There are create your own adventure books out there too. The basic idea is that you are a character in a story and at each event you choose what to do next which will change what happens next. Usually there are a few different choices. An example might be:

Once upon a time there was a small city in which all the citizens were obsorbed in the local weather forcast.The plain looking weatherman was speaking into the camera with a concerned expression, announcing the approaching storm.Though the storm was only a category one hurricane, the entire town panicked! Every last small minded, easliy scared citizen lost their mind....literally! Enter Terry, Mind Wrangler Extraordinaire!

                         Set traps to catch the minds
                         Use the lasso you find conveniently nearby
                         pull out a pipe and play some music to tame the minds

The reader/player will then choose an option and be presented with a new scene and new options. Sometimes the option is a dead end and you will be forced back to the previous options. Sometimes the option is a deadly choice and you meet your unfortunate demise and have to begin again. Sometimes you dont get to choose yourself and have to roll a dice or flip a coin to determine the outcome.

With HTML you can write a basic page template which you can repeatedly use and just change the information within the code without needing to recode. This is really really simple. You can make the choices links to new pages so the player can just click the option he/she wants and go directly to the next part of the story.

The Template

First open Notepad on your computer. This is where you will write all the code since there is no formatting.

Now create your template page. You can just copy and past my template page. Here is my template page:

<html>

<head>
<title>Title of the document</title>
</head>

<h1 style="font-family:arial;color:navy;font-size:20px;">My First Heading</h1>

</body>
</html>

Understanding what you see:
Each tag has an open and a close. An open tag looks like this: <html> and a closed tag looks like this: </html>. As you can see the close one just has a slash before the tag. Everything within this open tag and close tag is part of the HTML document. Just as everything within the open tag <p> and close tag </p> is part of that paragraph.

The part that says:

<body style="background-color:red;">
Specifies that the background color for the whole page is red. You can change the color simply by deleting "red" and typing in another color like "green"

The part that says:

<h1 style="font-family:arial;color:navy;font-size:20px;">My First Heading</h1>
specifies that the information contained within the heading.. in this case "My First Heading" will be 20pt aerial font in the color navy
Again you can change this by deleting the info you dont want like say you wanted it bigger.. just delete 20 and put in 30 instead.

The part that says:

<a href="http://www.w3schools.com">This is a link</a>

This is how you put in a link. This is where your choices will go. In this example when you have your document open as a webpage, the words "this is a link" is a link. When you click on those words you will be taken to the website w3schools.com

Again, this is not meant to teach you HTML, just give you a fun way to make a game. If you want in depth information on the different tags and uses go to www.w3schools.com

Saving

Now that you have your template done, its time to save it.

First we need to make a file folder to hold the documents we will be making.

Click File at the top of the window in the left corner. Then click Save As.
In the next dialog box at the top it will ask you where you want to save it. On the left hand side you will see the icon for the desktop. Click that icon. Then back at the top by the save in box, there are some icons. Click the make a new folder icon (looks like a file folder with a red *). This will make a new folder with the name of the folder highlighted. Name the Folder. Mine is called Adventure. And hit enter after typing in the new name. Make sure that foler is selected and then click open at the bottom of the screen.
Now we have the folder open that we want to save this document in.

Now we need to title this template.
At the bottom of the screen it asks for the file name. Type in a name. Mine is called basic. Notice that the Save as type box says Text Documents (*.txt) This means that it will be saved as a text document so that you can open and make changes to it. Now click save.

Now we have the document to use again as a text document to edit, but it isnt playable. Now we need to save it as an HTML document to be able to open it as a wedpage and play. To do this click File, then Save as again. Make sure the correct folder is selected as the place to save it to. Then at the bottom in the file name box it will have the name of the file you gave it earlier. Just add .html at the end of the name without skipping a space and hit save.

Now open the folder you saved this to from your desktop. Inside the folder you should see 2 things. One icon looks like a note pad and is titled what you named it. This is the text version. The other's icon is an Internet explorer icon. This is the webpage version. Double click on the webpage version and it should open windows and display a solid red screen with My First Heading at the top and This is a link under it. (see photo) If you click on the words this is a link you should be brought to w3schools.com.

The Begining

Now you have what you need to get started. First come up with a story.
Open up the template.
In the title section give it a title. This is what displays on the tab and on the blue bar across the top of a webpage.
Adjust your body style if you want to your liking
Give it a heading
After the <p> tag type in your story or scene. Then edit the link tag to be one of the choices. This requires some explaining.

Now it says:
<p>
<a href="http://www.w3schools.com">This is a link</a>
</p>

To illustrate, I'll use the example I gave in the intro:

Once upon a time there was a small city in which all the citizens were obsorbed in the local weather forcast.The plain looking weatherman was speaking into the camera with a concerned expression, announcing the approaching storm.Though the storm was only a category one hurricane, the entire town panicked! Every last small minded, easliy scared citizen lost their mind....literally! Enter Terry, Mind Wrangler Extraordinaire!

                         Set traps to catch the minds
                         Use the lasso you find conveniently nearby
                         pull out a pipe and play some music to tame the minds

This is what your code should look like using this example:

<p>
Once upon a time there was a small city in which all the citizens were
obsorbed in the local weather forcast.The plain looking weatherman was
speaking into the camera with a concerned expression, announcing the
approaching storm.Though the storm was only a category one hurricane,
the entire town panicked! Every last small minded, easliy scared citizen
lost their mind....literally! Enter Terry, Mind Wrangler Extraordinaire!

<br>
<br><a href="http://www.traps.html">Set traps to catch the minds</a>
<br>

<br><a href="http://www.lasso.html">Use the lasso you find conveniently nearby</a>
<br>

<br><a href="http://www.music.html">pull out a pipe and play some music to tame the minds</a>
<br>
</p>

***note the <br> tag just puts in an empty line to have space between the choices****

Understanding what you see

To make your choices into links you must first type in the choice in the place of This is a Link on the template. These will be the words that you click on to go to the next page. ex: my choice was set traps to catch the minds so at this step in changing the template it would look like this:

<a href="http://www.w3schools.com">Set traps to catch the minds</a>

This now has my choice but it still links to w3schools. I need it to link to the next page in the story. So now I have to decide what I will name the document that will have the next part of the story for this choice. I chose to title it "traps" So when I write this part of the story in Notepad, when I save it (as we did the template) I will name it "traps" so when I save it as a webpage it will be called "traps.html" Thus the webpage that I need the link to go to will be http://www.traps.html. So now I need to replace http://www.w3schools.com with http://www.traps.html.
Now my code will read:
<a href="http://www.traps.html">Set traps to catch the minds</a>

You must do this for every choice you have. Just copy the entire link code and paste it as many times as you need. EX: I have 3 choices so I will copy and paste twice so that my code now looks like this:

<a href="http://www.traps.html">Set traps to catch the minds</a>
<a href="http://www.traps.html">Set traps to catch the minds</a>
<a href="http://www.traps.html">Set traps to catch the minds</a>

Then just replace the information with the information you need for your other choices so now the code would be:

<a href="http://www.traps.html">Set traps to catch the minds</a>
<a href="http://www.lasso.html">Use the lasso you find conveniently nearby</a>
<a href="http://www.music.html">pull out a pipe and play some music to tame the minds</a>

****IMPORTANT**** when you write the pages for each choice you MUST title them EXACTLY what you put in the webpage link or the link will not work. EX: mine is traps. If I save it as trapped instead, the link will not work.

SAVING

Now we must save this starting page. Click File, Save As, make sure the correct folder is selected, enter a title in the file name box. Mine is called Mind Scramble. Hit save. Then do it again.. click file, save as, and add .html to the end of the title and hit save. Go to your desktop and open the folder and check to make sure you now have 2 copies, one text and and one webpage. Double click the webpage to open it and check it for correctness. Make style and spelling changes if you need to by opening the text version, making changes, and saving again both ways.

Now you have your first page, you now need to make a page for each of the choices. Open up the template again and repeat this step using the new information for the next part of the story. Then save it as we did before making sure to use the exact name you planned. Then you will need to make a new page for every new choice on each of the new pages... it gets quite large.

This is my code for my page "traps":
<html>

<head>
<title>Mind Scramble</title>
</head>

<h1 style="font-family:arial;color:navy;font-size:40px;">Mind Scramble</h1>

<p>
Terry begins to set up traps all around the town. But what should he use as bait?

<br>
<br><a href="C:\Documents and Settings\megan\Desktop\adventure\coffee.html">coffee</a>
<br>

<br><a href="C:\Documents and Settings\megan\Desktop\adventure\playboy.html">playboy magazines</a>
<br>

<br><a href="C:\Documents and Settings\megan\Desktop\adventure\bologna.html">bologna</a>
</p>

</body>
</html>

*****NOTE**** You will notice that the webpages in the links are much longer than in the begining page. You may need to use the longer version to get the links to work. This just the exact place on your computer where the file is saved. If you know already you can type it in yourself. Mine is in my Documents and Settings folder, then in my user account called megan, then on the desktop, in a folder called adventure, then the name of the page I'm wanting to link like "coffe". If you dont know this, simply open the webpage you are wanting to link and copy the url at the top of the page. Then paste the url in link area.****

My new choices are coffee, playboy, and bologna. So now I will need to make a page for each of these choices as well as a page for each of the previous choices I havent made yet.. the lasso one and the playing the pipe one.

Carry On

Now you are all set. You know all you need to know to make your game. It will take lots of time to actually finish a game because there are so many choices.... think about it.. you have 3 choices to begin with... then each of those will have choices... lets say 3 each... thats 9 more pages to write on top of the first 3 choices and the begining page.. thats aleady 13 pages and we've just gotten started!!! BUT its is epically satisfing to watch someone play your game!

****REMEBER****
1. Good story telling is key
2. make some choices be very bad mistakes
3. get super creative and use some unexpected twists
4. MAKE SURE you title each new page exactly how you titled it in the link you made or it will NOT work.