Try   HackMD

Simple Text Adventure

tags: code club

Using built in dict and list (in Python) or object and array (in JavaScript) to build a text adventure game.

Goal

To have a good tutorial explaining the basics of programming (in either JavaScript or Python) while building a working game in the process.

To build a secondary tutorial about going from Scratch to text programming and showing things that you really cannot do in Scratch.

Current State

I have a very basic game as part of the tutorial text itself. A slightly more advanced version is linked to and in progress as it continues to develop.

Basic Game

  • Three rooms
  • Can move from room to room
  • Can pick up items

More advanced game

In addition to the simple game:

  • More rooms
  • Can drop items
  • Can use items
  • Using an item can change the environment (break a window to access a new room)
  • Movement can have special effects (move through a secret passage that is not listed)

Desired Features

One of the most requested features is the ability to display images. This will be added the the JavaScript version only, as it makes more sense to do in the browser.

Other possibilities:

  • Lots more rooms
  • Every item has a purpose
  • Monsters / other beings to interact with
  • Weight limit, can only carry so many items
  • More complex items (items as object rather than strings)
  • Container items
  • Consumables (food, things that run out over time like torches, batteries)
  • Move special cases into room and item objects so entire game can be written in JSON (define things that can happen)
  • Create an editor for the JSON format

JavaScript Code

JavaScript Tutorial Text

In JavaScript there are some powerful data structures for organizing your
code and information. You can also build your own, and I'll show you
how to do that soon, but it is amazing what you can do just with what
is built in. Three of the key structures are strings, arrays and objects. Also,
it is important to know that when I talk about "strings" I mean text,
which is a string of characters, generally surrounded by either single
quotes 'like this' or double quotes "like this".

Objects

Objects are a lot like dictionaries: there is something you use to
look something else up. With a real dictionary you use the spelling
of a word to look up its definition. With JavaScript objects, you
can use a wide variety of objects to look up other objects. The
objects you look up can be anything: strings, functions, even lists or
even other objects you have defined. The objects you use to look up with
are required to be things that cannot change, but usually they are strings.

For convenience we call the things we use to look up with "keys" and
the things that are looked up "values". In the case of a
dictionary, the key is the spelling of a word, and the value is the
definition.

There are two ways to create a object and assign it to a variable, in
this example the variable is "my_lookup". There is the object()
constructor function, and the literal notation. For now we will use the
literal notation and work on creating new object constructors later. The
literal notation looks like this:

var my_lookup = {one:1, two:2, three:'xyzzy'}; // literal constructor

We declare our variable with the "var" keyword, then surround our object
with curly braces ("{" and "}"). Inside the curly braces we have key/value
pairs separated by commas. The key comes first, followed by a colon (":"),
then the value. The keys in the literal notation are usually interpreted
as strings, even though we have not surrounded them with quotation marks.
You can also use the quotation marks, which is slightly safer, since there
are a handful of words which JavaScript holds in reserve for itself, and if
you use those words without quotation marks you will have an error.

Once we have a object, we can change the value of the keys, add new key/
value pairs, remove key/value pairs, or loop through all the keys:

alert(my_lookup['one']); // prints '1' in a pop-up window

my_lookup['one'] = 'flugelhorn'; // the key 'one' is now associated with the value 'flugelhorn'

my_lookup.one = 'matterhorn'; // the key 'one' is now associated with the value 'matterhorn'

my_lookup['four'] = 'this is the value of the key "four"'; // add a new key, my_lookup now has four key/value pairs

delete my_lookup['one']; // remove a key/value pair, my_lookup now has keys 'two', 'three', and 'four'

for (var key in my_lookup){
    alert(key + ' => ' + my_lookup[key]); // will print each key with its value, in random order
}

The last point is important: objects do not keep any specific order for
their keys. If you need to have the keys in order, you need to sort
them first. Usually this is not a problem.

For more information on objects and things you can do with them:
Objects

Arrays

If you do need ordering, then you would generally use arrays. Arrays are lists of things that
keep what you put into them in order. They can grow or shrink as you
put things in or take them out, and you can put pretty much anything
into an array, including objects or other arrays. Getting or putting an
item into an array looks a lot like getting or putting an item into a
object, except the keys are always integers. By now you probably know,
or can guess, that the first item in a array is 0, followed by 1, then
2, etc. An array is also an object, and it has a length key that you can
use to find out how many things are in the array. Since the last item in
an array is always at the index array.length - 1, you can use that to move
backwards through an array.

var my_list = [1,2,3,4]; // create a literal array

So far my_list may not be what you expect. What is the value of
my_list[1]?

alert(my_list[1]) // prints 2 because the indexes (like keys) of the array start with 0
my_list = [4,8,16,32];
alert(my_list[1]) // prints 8

You can change any value in an array

my_list[2] = "new value of two"

You can add new values to the end of an array

my_list.push(64)

And you can go through all the values of an array:

for (var i = 0; i < list.length; i++){
	alert(value);
}

// or

function handleEachItem(item){
  alert(item);
}

list.forEach(handlEachItem);

OK, so what does all of this have to do with games?

With just this amount of JavaScript, we can make a simple game. Well, almost, we're still missing a couple of pieces. We need to be able to print things we can respond to the player, and we need the player to be able to tell the program what to do next.


function print(text){
	// to print some text we first create a new paragraph tag, like having a <p></p> in HTML
	var p = document.createElement('p');
	// Then we put our text inside the new p element
	p.innerHTML = text;
	// We add our p element to the document as the last thing in the html body
	document.body.appendChild(p);
	// The player may have scrolled the page, so make sure we scroll to make the new text visible
	p.scrollIntoView();
}

Here is a simple example game. See if you can extend it to do some
more things, like dropping an item (or all items), or the 'look'
command to show the long description and the room's contents. What
else would be good to add?

To try out this game, visit http://dethe.github.com/jstutorial/adventure.html

//
// Simple dungeon game
//

var character = {'inventory': [], 'location': 'west room'};

var dungeon = {
    'west room': {
        'short_description': 'west room',
        'long_description': 'the west end of a sloping east-west passage of barren rock',
        'contents': ['pail of water', 'dragon tooth'],
        'exits': {'east': 'centre room'}
    },
    'east room': {
        'short_description': 'east room',
        'long_description': 'a room of finished stone with high arched ceiling and soaring columns',
        'contents': [],
        'exits': {'west': 'centre room'}
    },
    'centre room': {
        'short_description': 'centre room',
        'long_description': 'the very heart of the dungeon, a windowless chamber lit only by the eerie light of glowing fungi high above',
        'contents': ['golden key', 'spiral hourglass'],
        'exits': {'east': 'east room', 'west': 'west room'}
    }
};

function command_split(str){
	var parts = str.split(/\s+/); // splits string into an array of words, taking out all whitespace
	var command = parts.shift(); // command is the first word in the array, which is removed from the array
	var object = parts.join(' '); // the rest of the words joined together.  If there are no other words, this will be an empty string
	return [command, object];
}

var room, command, verb, obj;

function remove(array, item){
	var idx = array.indexOf(item);
	if (idx > -1){
		array.splice(idx,1);
	}
}

function tryToMove(room, direction){
    if(room.exits[direction]){
        character.location = room.exits[direction];
        room = dungeon[character.location];
		describe(room);
    }else{
        print('You cannot go that way');
	}
}

function printInventory(){
    print('You are carrying:');
    character['inventory'].forEach(function(item){
        print('&nbsp;&nbsp;&nbsp;&nbsp;', item);
	});
}

function describe(room){
	if(!room.visited){
		print ('you are in ' + room.long_description);
	}else{
		room.visited = true;
		print (room.short_description);
	}
	var exits = Object.keys(room.exits);
	if (exits.length > 1){
		var last_exit = exits.pop();
		print('there are exits to the ' + exits.join(', ') + ' and ' + last_exit);
	}else{
		print('there is an exit to the ' + exits[0]);
	}
    room['contents'].forEach(function(item){
        print('There is a ' + item + ' here');
	});
}

describe(dungeon[character.location]);

function getOneCommand(){
    room = dungeon[character['location']];
    command = command_split(prompt(room['short_description'] + ' > '));
    verb = command[0];
    obj = command[1];
    console.log('verb: ' + verb + ', object: ' + obj);
    if (['east', 'west', 'north', 'south', 'up', 'down', 'in', 'out	'].indexOf(verb) > -1){
		tryToMove(room, verb);
    }else if (verb === 'inventory'){
		printInventory();
	}else if (verb === 'quit'){
        print('Goodbye');
        return;
	}else if (verb === 'take'){
        if (obj === 'all'){
            if (room['contents']){
                room.contents.slice().forEach(function(item){ // .slice() makes a copy of the list so removing items works
                    print('You pick up the ' + item);
                    character['inventory'].push(item);
					remove(room['contents'], item);
				});
            }else{
                print('There is nothing to take!');
			}
        }else{
            room['contents'].slice().forEach(function(item){
                if (item.indexOf(obj) > -1){ // does the word in obj match any part of the text of item?
                    print('You pick up the ' + item)
                    character['inventory'].push(item);
					remove(room['contents'], item);
				}
			});
		}
	}
	setTimeout(getOneCommand, 0);
}
getOneCommand();

Python Tutorial Text

'''In Python there are some powerful data structures for organizing your

code and information. You can also build your own, and I'll show you

how to do that soon, but it is amazing what you can do just with what

is built in. Three of the key structures are lists, dicts (short for dictionaries), and tuples. Tuples are similar enough to lists that I

will only talk about lists and dicts for now, and we can talk about

tuples later. Also, it is important to know that when I talk about

"strings" I mean text, which is a string of characters, generally

surrounded by either single quotes 'like this' or double quotes "like

this".
Dictionaries

Dicts are a lot like real dictionaries: there is something you use to

look something else up. With a real dictionary you use the spelling

of a word to look up its definition. With python dictionaries, you

can use a wide variety of objects to look up other objects. The

objects you look up can be anything: strings, functions, even lists or

other dictionaries. The objects you use to look up with are required

to be things that cannot change, but usually they are strings.

For convenience we call the things we use to look up with "keys" and

the things that are looked up "values". In the case of a real

dictionary, the key is the spelling of a word, and the value is the

definition.

There are two ways to create a dict and assign it to a variable, in

this example the variable is "my_lookup". There is the dict()

constructor function, and the literal notation.

my_lookup = dict(one=1, two=2, three='xyzzy') # dict constructor
my_lookup = {'one': 1, 'two': 2, 'three': 'xyzzy')

Once we have a dict, we can change the value of the keys, add new key/value pairs, remove key/value pairs, or loop through all the keys:

print my_lookup['one'] # prints '1'
my_lookup['one'] = 'flugelhorn' # the key 'one' is now associated with the value 'flugelhorn'
my_lookup['four'] = 'this is the value of the key "four"' # add a new key, my_lookup now has four key/value pairs
del my_lookup['one'] # remove a key/value pair, my_lookup now has keys 'two', 'three', and 'four'
for key in my_lookup:
print key, my_lookup[key] # will print each key with its value, in random order

The last point is important: dicts do not keep any specific order for

their keys. If you need to have the keys in order, you need to sort

them first. Usually this is not a problem.

For more information on dicts and things you can do with them: http://docs.python.org/lib/typesmapping.html

If you do need ordering, then you would generally use lists. Lists

keep what you put into them in order. They can grow or shrink as you

put things in or take them out, and you can put pretty much anything

into a list, including dicts or other lists. Getting or putting an

item into a list looks a lot like getting or putting an item into a

dict, except the keys are always integers. By now you probably know,

or can guess, that the first item in a list is 0, followed by 1, then

2, etc. You can also count down in a list: the last item is -1, the

next-to-last is -2, etc.

my_list = list(1,2,3,4)
my_list = [1,2,3,4] # create a literal list

So far my_list may not be what you expect. What is the value of

my_list[1]?

print my_list[1] # prints 2 because the indexes (like keys) of the list start with 0
my_list = [4,8,16,32]
print my_list[1] # prints 8

You can change any value in a list

my_list[2] = "new value of two"

You can add new values to the end of a list

my_list.append(64)

And you can go through all the values of a list:

for value in my_list:
print value

OK, so what does all of this have to do with games?

Here is a simple example game. See if you can extend it to do some

more things, like dropping an item (or all items), or the 'look'

command to show the long description and the room's contents. What

else would be good to add?
'''
'''
Simple dungeon game
'''
character = {'inventory': [], 'location': 'west room'}
dungeon = {
'west room': {
'short description': 'west room',
'long description': 'a sloping north-south passage of barren rock',
'contents': ['pail of water', 'dragon tooth'],
'exits': {'east': 'centre room'}
},
'east room': {
'short description': 'east room',
'long description': 'a room of finished stone with high arched ceiling and soaring columns',
'contents': [],
'exits': {'west': 'centre room'}
},
'centre room': {
'short description': 'centre room',
'long description': 'the very heart of the dungeon, a windowless chamber lit only by the eerie light of glowing fungi high above',
'contents': ['golden key', 'spiral hourglass'],
'exits': {'east': 'east room', 'west': 'west room'}
}
}
while True:
room = dungeon[character['location']]
command = input(room['short description'] + ' > ')
command_parts = command.split(None, 1)
verb = command_parts[0]
obj = command_parts[-1] # if the user only types one word, both verb and obj will be the same
if verb in ['east', 'west', 'north', 'south', 'up', 'down', 'in', 'out']:
if verb in room['exits']:
character['location'] = room['exits'][verb]
room = dungeon[character['location']]
print('You are in', room['long description'])
for item in room['contents']:
print('There is a', item, 'here')
else:
print('You cannot go that way')
if verb == 'inventory':
print('You are carrying:')
for item in character['inventory']:
print(' ', item)
if verb == 'quit':
print('Goodbye')
break
if verb == 'take':
if obj == 'all':
if room['contents']:
for item in room['contents'][:]: # this part: [:] makes a copy of the list so removing items works
print('You pick up the', item)
character['inventory'].append(item)
room['contents'].remove(item)
else:
print('There is nothing to take!')
else:
for item in room['contents']:
if obj in item: # does the word in obj match any part of the text of item?
print('You pick up the', item)
character['inventory'].append(item)
room['contents'].remove(item)