Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/04"

From Publication Station
Line 112: Line 112:
* html template (empty tags) that are replace as the game progresses
* 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.


What can be changed in this game?
The game should help the player discover the space of the square: the details, sounds, movements, the people.


Keep it simple.
Have fun!




Revision as of 10:34, 8 December 2015

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




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


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