Courses/Design & Technique-Essential Web Design/Q2/05: Difference between revisions

From Publication Station
← Older edit
undoAndre (talk | contribs)
1,997 edits
Andre (talk | contribs)
1,997 edits
Andre (talk | contribs)
1,997 edits
No edit summary
 
(One intermediate revision 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!
=Interacting with the user=
=Interacting with the user=


Line 21: Line 150:


== jQuery ==
== jQuery ==
Our jQuery./Javascript code is listening to the event submit by <code>$("form#userQuestions")</code>
Our Javascript code is listening to the event submit by <code>$("form#userQuestions").submit(</code>


When it happens, it asks for the values of <code>$('#userName').val();</code> and <code>$('#userLocation').val();</code>
When submit happens, it asks for the values of <code>$('#userName').val();</code> and <code>$('#userLocation').val();</code>
with get stored in the variables <code>userName</code> and <code>userLocation</code>
which get stored in the variables <code>userName</code> and <code>userLocation</code>


and is finally added of text to the <nowiki><h2></nowiki> just appended.
and is finally added of text to the <nowiki><h2></nowiki> just appended.


Note: that is possible because of  <code>event.preventDefault();</code>. We are preventing form submit to produce its own behavior, so we can get the values of $('form#userName') and $('form#userLocation')
Note: <code>event.preventDefault();</code> 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==
==Adventure: with text user input==
'''Last week's adventure game, but with added user input interaction'''
Expanding last week's adventure game, but with added user input interaction.


=== Code explained ===
=== Code explained ===
Line 43: Line 172:


On $("form#userQuestions").submit():
On $("form#userQuestions").submit():
*  userName, userLocation are STORED and REPLACE in scenes object %%userName%% and %%location%%  
*  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#scene') is FILLED with values from scene_1, with the FUNCTION: replace_scene('scene_1');
*  $('div#form') is HIDDEN.  
*  $('div#form') is HIDDEN.  

Latest revision as of 13:40, 26 November 2016

exploring the city - choose your own adventure

[edit]

textual adventure games

[edit]

https://upload.wikimedia.org/wikipedia/en/a/ac/Zork_I_box_art.jpg


adventure games' formula

[edit]
  • 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

[edit]

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

[edit]

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

[edit]

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

[edit]

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

[edit]

With text

[edit]

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

[edit]

<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

[edit]

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

[edit]

Expanding last week's adventure game, but with added user input interaction.

Code explained

[edit]

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

[edit]
<!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>
Retrieved from "https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/Q2/05&oldid=5767"