Courses/Design & Technique-Essential Web Design/Q2/04

From Publication Station
Revision as of 11:30, 8 December 2015 by Andre (talk | contribs)

exploring the city - choose your own adventure

textual adventure games

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
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

Cyod.jpg

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)
  • 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!



Art works that use the city as stage

Janet Cardiff Alter Bahnhof Video Walk {{#widget:Youtube|id=sOkQE7m31Pw}}

Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/Q2/04&oldid=2540’