Courses/Design & Technique-Essential Web Design/Q2/04
exploring the city - choose your own adventure
textual adventure games
- Colossal Cave Adventure (1976,1977)
- Zork - online emulation (1977)
https://upload.wikimedia.org/wikipedia/en/a/ac/Zork_I_box_art.jpg
adventure games' formula
- take a popular fiction game. E.g. a detective novel/
- create:
- a background story
- a map for the players to move around it
- objects to manipulate
- characters to interact with
- a plot tree with several outcomes
- add: descriptions, dialogues, error messages and a vocabulary for the players
game development then becomes much like planning and writing a piece of short fiction, except multiple outcomes must be conceived.
Aarseth, Espen J. 1997 Cybertext
the city
Can we create a web-based game, that can played within the physical space of the city, using mobile phones?
The city game can become a way of exploring a space, a city, an excuse to drift (dérive), experience and perceive the city differently from our day-to-day understanding of it.
choose you own adventure in the city
A very simple example using JS and jQuery
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<title>Choose your own adventure</title>
<meta charset="utf-8" />
<style>
</style>
</head>
<body>
<p class="msg"></p>
<img class="image" />
<br/>
<div class="buttons">
<p class="question"></p>
<!-- buttons: will have to be created dynamically -->
</div>
<script>
//object containing collection of scenes:
// each scene contains: title msg img (option), question, connect(ing scenes) },
var scenes={
scene_1: {title:"start", msg:"Look around you. Stop and choose where you want to go to.", img: "", question:"What do you want to do next?", connect:[2,5] },
scene_2: {title:"walk", msg:"Walk in a straight line until you encounter and obstacle", img: "", question:"How large is the object?", connect:[3,4] },
scene_3: {title:"small", msg:"Take the object with you. Walk back to to you started. Leave the object there and look around. Is this still the same place?", img: "", question:"Go to", connect:[1] },
scene_4: {title:"large", msg:"Leave a message in the obstacle for someone to see", img: "", question:"Go to", connect:[1] },
scene_5: {title:"follow" , msg:"Follow a moving object, until you feel bored.", img:"", question:"How is this object?", connect:[3,6,4] },
scene_6: {title:"too far" , msg:"Look at the object from where you are now. Move your head slowly towards the sky. Look at it carefully.", img: "", question:"Go to", connect:[1] },
}
function replace_scene(n){ // function to replace the scene content base on its number
var scene = scenes[n];
$("p.msg").html( scene.msg );
$("img.image").attr( "src", scene.img );
$("p.question").html( scene.question );
for (var i=0; i < scene.connect.length; i=i+1) { var numb='scene_'+scene.connect[i]; //create buttons
var next_title=scenes[numb].title;
button = document.createElement('button')
$(button).text(next_title);
$(button).attr('name', numb);
$('div.buttons').append(button);
$("button").click( // when user makes choice (click any button)
function(){
$("button").remove();//remove all buttons
var next_scene = $(this).attr('name'); //get next scene through the button name attribute
replace_scene(next_scene); //move to another scene
})
}
}
$(document).ready(
function(){
replace_scene('scene_1'); // start in scene 1
})
</script>
</body>
</html>
discussion
How is this game constructed?
- scenes; Each scene contains:
- number. E.g.
scene_2 - title
- msg
- img (option),
- question
- connect(ing scenes)
- number. E.g.
- html template (empty tags) that are replace as the game progresses
What can be changed in this game?
assignment
Design a new game, that has to although existing in the Internet, has to interfere with real-life.
It has to interfere with the real world, the physical reality of the player.
The game should help the player discover the space of the square: the details, sounds, movements, the people.
Keep it simple. Have fun!
