Welcome to a workshop in which you will write a text adventure game purely in HTML. That's right! All you need is HTML. And a desire to tell a story that blazes with the ferocity of a thousand suns. Let's get started!
Live Demo here: here
Go to Cloud9 and log in. Then, create a new directory for this workshop, naming it text_adventure. Then, create a new file, naming it index.html. This is where you will introduce the player to your adventure game.
In index.html, type in the template for a basic HTML page. Don't copy and paste, or you'll never learn anything:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>If you've done the Personal Website workshop, you've already encountered how HTML pages are structured. This example is no different.
Open up the preview as instructed from Personal Website.
If we refresh the preview, we'll see nothing but a blank page! That's because we haven't added any content to the body tag, which is where all the stuff we see in the browser will be kept. We've also got no title!
We can add a title by filling in <title></title> with something reasonable. Probably
<title>Adventure Game - INTRO</title>
Now that you have your bare template ready, we can start to add content to our page. As in Personal Website, we'll use the <p> tag. Let's add a description to our adventure, so that the user will be compelled to play the game!
For mine, I'll add this:
<p>Go on a night quest in NYC involving tacos, missed trains, and free concert tickets. Click start to begin the adventure!</p>
My story will be about exploring NYC at night, because I'm not very creative and I can only write autobiographical stories.
Now, let's refresh the preview, and voila! Our text can be seen in the page.
But wait, it's a little silly to tell the user to click start when there is no start thing to click, though, isn't it? Let's fix that by creating some clickable text.
We can then use that text to link to a new page that will designate the start of our adventure. So what's the appropriate tag to contain this text?
Generally, if we want to link a page to another, we use an anchor tag, which has an attribute called href (meaning hypertext reference), which will hold a link to the page you want.
We're going to add a link to a start page by adding
<a href="start.html">Start Adventure</a>
We've set the attribute of href to start.html, and the text linking to that page is "Start Adventure!" Here's what the index.html looks like:
<!DOCTYPE html>
<html>
<head>
<title>Adventure Game - INTRO</title>
</head>
<body>
<p>Go on a night quest in NYC involving tacos, missed trains, and free concert tickets. Click start to begin the adventure!</p>
<a href="start.html">Start Adventure!</a>
</body>
</html>Now we'll create the start page by making a new file called start.html. Put the HTML template in start.html. Add a reasonable title, like <title>Adventure Game - START</title>. We are now ready to start the adventure! Make a <p> in which you'll set the scene and describe the surroundings. Go to "Live Preview" to preview the start.html page.
If you've written several paragraphs, you may have noticed that one <p> doesn't quite cut it. All of the paragraphs have turned into one big blob of text. That's why it's called a paragraph tag! Place each of your paragraphs in its own <p>.
At the bottom, create one or more options to carry your player to the next scene(s)! Repeat what you did in linking the start.html to index.html-- wrap each option in an anchor tag, and link each to a new page where you'll write the next scene. Here, it'll be handy to come up with some sort of naming convention; it can get quite tangled once you've created a complex network of possible routes in the adventure. For example, path1.html can then lead to path1.1.html and path1.2.html and so on.
Last step (optional): make an option for the player to go back, by adding an option on every page that links to the preceding page. I chose not to add this because I wanted emphasis on the finality of one's actions and the irreversibility of time.
If you've refreshed the preview, you'll notice that something is wrong! All of the options are on the same line. What you'd like, probably, is for each to be on its own line.
Well, we can accomplish this by presenting the set of options as what it is-- a list of options. We'll create a list using <ul>, the unordered list tag. The <ul> holds list items, which are denoted by the tag <li>. The <li> will then hold each of your options wrapped in <a>.
<ul>
<li><a href="option1.html">Option1</a></li>
<li><a href="option2.html">Option2</a></li>
</ul>
Here's what my start page looks like:
<!DOCTYPE html>
<html>
<head>
<title>Adventure Game - START</title>
</head>
<body>
<p>It's 2AM. The streets are shiny after fresh rainfall, and the smell of garbage is starting to lift. You're on the corner of 2nd St and Avenue A, and you've got to meet your friend in midtown by 5:30AM to wait in line for Shakespeare in the Park tickets.</p>
<p>It'll take you 15 minutes to bike up there, so you've got time. You've also got a hankering for tacos, maybe because there's a taco truck in plain sight across the street. You</p>
<ul>
<li><a href="tacoTruck.html">cross the street to get to the taco truck.</a></li>
<li><a href="walkNorth1.html">ignore the craving and start moving northward.</a></li>
</ul>
</body>
</html>Get creative: add images, videos, or even external links! Your adventure can go anywhere. The internet's the limit!!
Problems? Check that all of your tags are closed, and in the right order! Each opening tag should be paired with a closing tag.
Do you hate links? Try buttons, with the <button> tag!
Does the plainness of your adventure bother you? Try using CSS to add color or flair.
Are you totally frustrated by how many HTML files you've had to make?! Is it driving you mad that the number is expontentially increasing? Try a single-page application! Try some jQuery (not recommended without prior knowledge of JS)!
zachlatta commented: https://gist.github.com/zachlatta/f84243c323f23c872c47