Courses/Design & Technique-Essential Web Design/Q2/04
From Publication Station
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?
Examples - using Javascript and jQuery
user text input
We can receive text user input from the user, using HTML forms and jQuery .submit() listener
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
form{width: 50%;}
input{padding: 6px; width:50%; border: 2px solid #ccc; margin-top: 1em; color: #000;}
input:focus{border: 2px solid yellow; background-color: rgba(0, 0, 0, 0.75); color: white; font-weight: bold;}
input[type="submit"]{font-weight: bold; width: auto; }
input[type="submit"]:focus{ color: yellow; background-color: rgba(0, 0, 0, 0.75);}
#instruction{display: none; }
</style>
</head>
<body>
<h1 id="question">Tell me you name...</h1>
<form id="greeting">
<input name="firstName" id="firstName" required="" placeholder="Your first name" type="text"><br>
<input value="Send" type="submit">
</form>
<h2 id="instruction">Now <span class="userName"></span>, I want you to walk 10 steps away from where you are now.</h2>
<script>
var firstName; // variable that will store user name
$("form#greeting").submit(function(event){
console.log( $('#firstName').val() );
firstName = $('#firstName').val();
event.preventDefault();
$("#firstName").val(''); //clean input#firstName
$('form, #question').css('display', 'none'); //hide form
$('#instruction').css('display', 'block'); //show instruction
$('span.userName').text(firstName); //Add name to span.userName
})
</script>
</body></html>
What can we do by getting the user's text input?
- address him/her by name.
- ask him/her other questions. E.g. where are you?
- store his/her answers
