How to Build a Text Based Website Game
Hyperlinks make the Web what it is, but they have more creative uses than just directing a surfer to another web page. One of the most underutilized functions of links is their ability to create a simple choose-your-own-adventure-style text-based website game. The best part is that it's easy to make such a game knowing only the simplest of HTML code and no other Web languages.
Other People Are Reading
Instructions
-
-
1
Open your computer's basic text editor, such as Notepad or TextEdit. You can easily write HTML by hand and test it in a web browser without needing a website or even Internet connection. Just save each file with an ".html" extension, and when you open it again, it will open in your browser. To edit the HTML code again, just right-click on the file icon and select the "Open with" option.
-
2
Write the first page of your game in the text editor. The basic outline of every HTML page you write will look like this:
<html>
<head>
<title>Page #1</title>
</head>
<body>
</body>
</html>
HTML organizes information with "tags" that tell the browsers what to do with certain types of content. All HTML files are enclosed in <html> and </html> tags at the top and bottom, and inside those tags are two main sections: the <head> section, which contains metadata that doesn't appear on your pages, and the <body> section, which contains everything that does appear.
The <title> tag, which is required for every webpage, defines the text that will appear at the very top of your browser window. In the above example, it will display "Page #1." -
-
3
Add the following code between the two <body> tags:
<p>You exit the cabin. What would you like to do next?</p>
<p>A. Follow the path.</p>
<p>B. Follow the dragon tracks.</p>
<p>C. Explore the cave.</p>
<p>D. Drink from the spring.</p>
Obviously, you can design your game any way you like, but in this example it's set up as a series of multiple choice questions. You'll notice that each line is enclosed in a <p> tag, which stands for paragraph. By default, paragraphs have empty spaces above and below them, so here we use them for each line to keep things neat. -
4
Add links to the multiple choices above. Links are created using the <a> tags, like so:
<a>This is a link.</a>
To tell the browser where to go once someone clicks on the link, add an "attribute" called "href" inside the tag:
<a href="put-the-web-address-here">This is a link.</a>
Added to the above example, the multiple choices look like this:
<p>A. <a href="2.html">Follow the path.</a></p>
<p>B. <a href="3.html">Follow the dragon tracks.</a></p>
<p>C. <a href="4.html">Explore the cave.</a></p>
<p>D. <a href="5.html">Drink from the spring.</a></p>
You'll see all the files above are named as simple numbers, but you can make whatever naming scheme you want. Usually, you need to write the full address of the files inside the quotes (such as, "yoursite.com/game/2.html"), but since these files are probably saved in the same directory on your computer, you won't need to. -
5
Create as many pages as you like in your game. It's best to think of each page as a "room" in your game and plan every room beforehand; otherwise, you'll start getting confused by the dozens of web pages you'll be creating.
-
1
References
Resources
More Like This
Comments
-
I really don't get the part when someone clicks on one of the links, where does it redirect to? and how do you make the first series of questions go away? Please help me! My brain's about to EXPLODE.
