Courses/Design & Technique-Essential Web Design/Q2/05
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!
Interacting with the user
With text
One of the most common ways to receive textual input from web users is by using parent HTML tag <form> and the children tags <input>
HTML Forms overview https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms
input tag
<input> is the element that receives the interaction from the user.
It can take a variety of forms and behaviors, depending on the type attribute
In the example only type="text" and type="submit" are used, but there are many more type attribute value to be used. See them in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
required attribute, means that the user must fill in a value before submitting a form
placeholder attribute - provides A hint to the user of what can be entered in the control
jQuery
Our Javascript code is listening to the event submit by $("form#userQuestions").submit(
When submit happens, it asks for the values of $('#userName').val(); and $('#userLocation').val();
which get stored in the variables userName and userLocation
and is finally added of text to the <h2> just appended.
Note: event.preventDefault(); is there to prevent the form submission to produce its default behavior, which would be to refresh the page. This way we can get the values of $('form#userName') and $('form#userLocation') and keep the form as it was
Adventure: with text user input
Expanding last week's adventure game, 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 REPLACED 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>
