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?
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!
user input
The same adventure, but with added user input interaction
Code explained
The HTML page is divided in 2 divs:
- $('div#form') - a div w/ a form that receives user input
- $('div#scene') - a div that contains text, image and buttons for each scene
On start:
- $('div#form') is SHOWN.
- $('div#scene') is HIDDEN (css display:none)
On $("form#userQuestions").submit():
- userName, userLocation are STORED and REPLACE in scenes object %%userName%% and %%location%%
- $('div#scene') is FILLED with values from scene_1, with the FUNCTION: replace_scene('scene_1');
- $('div#form') is HIDDEN.
- $('div#scene') is SHOWN (css display:block)
User is on scene 1:
- every time the user CLICKS a button: $("button").click()
- a next_scene is CREATED from the clicked button 'name' attribute
- replace_scene() for the next_scene
code
<!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>
img{width: 300px;}
button{ margin-left:10px;}
input {margin-bottom:10px;}
div#scene {display: none;}
</style>
</head>
<body>
<div id="form">
<h1 id="question">In order to begin, you must tell...</h1>
<form id="userQuestions">
<input name="userName" id="userName" required="" placeholder="Your first name" type="text">
<br/>
<input name="userLocation" id="userLocation" required="" placeholder="Your current location" type="text">
<br/>
<input value="Send" type="submit">
</div>
<div id="scene">
<p class="msg"></p>
<img class="image" />
<br/>
<div class="buttons">
<p class="question"></p>
<!-- buttons: will have to be created dynamically -->
</div>
</div>
<script>
//object containing collection of scenes:
var scenes={
scene_1: {title:"start", msg:"<b>Hey %%userName%%</b>, welcome to the game. The game will have as starting point <b>%%location%%</b>.", img: "http://thepiratebook.net/wp-content/uploads/2015/11/Sonideros_L.Radwanski_PirateBook_2.jpg", question:"What do you want to do next?",
connect:[2,5] },
scene_2: {title:"walk", msg:"From %%location%%, 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 %%location%% still the same place?", img: "", question:"Go to", connect:[1] },
scene_4: {title:"large", msg:"%%userName%%, 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 above %%location%%. Look at it carefully.", img: "", question:"Go to", connect:[1] },
}
$("form#userQuestions").submit(function(event){ //when form is submitted
// form user-input values
var userName = $('#userName').val();
var userLocation = $('#userLocation').val();
//for loop: replaces sentences placeholders (%%placeholder%%) w/ user-input values
for (var key in scenes) {
var newscene = scenes[key];
console.log(userName, userLocation);
newscene = newscene.msg.replace('%%userName%%', userName)
.replace('%%location%%', userLocation);
scenes[key].msg=newscene;
}
event.preventDefault();
$("#userName").val(''); //clean inputs
$("#userLocation").val(''); //clean input#userName
$('div#form').css('display', 'none'); //hide form
replace_scene('scene_1'); // start scene 1
$('div#scene').css('display', 'block'); //make visible div#scene
})
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
})
}
}
</script>
</body>
</html>
