Make a Text Adventure

Make your own text game with choices for the player.

All you need is a small amount of HTML and Javascript in your .html page along with your story.

Steps

Add a p or a div somewhere to your page. Set its id to game. This is where your story will show up.

<p id="game"></p>

Add this script which will bring your story to life.

<script> book=[] clean=s=>(s.replace(/[\.,\?!"]+/g,'')) key=s=>book.find(v=>(v[0])===(s)) next=s=>key(s).slice(1).join(' <br/><br/> ') word=s=>key(clean(s))?'<a onclick="go(\''+clean(s)+'\')">'+s.split('_').join(' ').trim()+'</a>':s go=key=>(game).innerHTML=(next(key).split(' ').filter(s=>s).map(word).join(' ')) onload=()=>{ book=story.textContent.trim().split('\n\n').map(s=>s.split('\n')) go(book[0][0]) } </script>

Write your story inside another script. Set the id to story and type to text.

<script id="story" type="text"> _start You are a robot. You have been reset and you are now booted up and ready. The scientist has a test for you. She asks you to pick up the heaviest object. Will you pick up the _feather or the _balloon? _feather You pick up the feather. The scientist makes a note on her _clipboard. Want to _start another test? _balloon You pick up the balloon. The scientist makes a note on her _clipboard. Want to _start another test? _clipboard You grab the clipboard and spin your wheels. "Heey!" The scientist chases you, but you manage to hide behind a computer tower. "Well, you _passed_the_test, that's for sure." She pats your metal head with a grin. _passed_the_test <i> Well done! </i> You're allowed to drive around the office while she types her report. Hopefully she won't reset you until tomorrow. </script>

Use <img> images, <b></b> bold, <i></i> italics, <a href=""></a> links.

Download

Play the stand-alone game here:

robot-and-scientist.src.htm

Use save link as to view the HTML and Javascript.

Created 2020/07/12
Updated 2021/01/18
Copyright 2021 Arekan O'Nare