|
|
| (4 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| =exploring the city - choose your own adventure=
| |
| ==textual adventure games==
| |
| * [https://en.wikipedia.org/wiki/Colossal_Cave_Adventure Colossal Cave Adventure] (1976,1977)
| |
| * [https://en.wikipedia.org/wiki/Zork Zork] - [http://textadventures.co.uk/games/play/5zyoqrsugeopel3ffhz_vq 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'''
| |
|
| |
| [[File:game-map.svg|thumb|Plot tree]]
| |
|
| |
| * 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==
| |
| [[File:cyod.jpg]]
| |
|
| |
| A very simple example using JS and jQuery
| |
|
| |
| <source lang="html4strict">
| |
| <!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>
| |
| </source>
| |
|
| |
| ===discussion===
| |
| How is this game constructed?
| |
| * '''scenes'''; Each scene contains:
| |
| ** number. E.g. <code>scene_2</code>
| |
| ** title
| |
| ** msg
| |
| ** img (option),
| |
| ** question
| |
| ** connect(ing scenes)
| |
|
| |
| * 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===
| |
| <source lang="html4strict">
| |
| <!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>
| |
| </source>
| |
