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.
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.
Play the stand-alone game here:
robot-and-scientist.src.htmUse save link as to view the HTML and Javascript.