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

From Publication Station
(Blanked the page)
 
(10 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'''
* 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?
-----
=Examples - using Javascript and jQuery=
==user text input==
We can receive text user input from the user, using HTML forms and jQuery [https://api.jquery.com/submit/ .submit() listener]
<source lang="html4strict">
<!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>
</source>
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
*
<source lang="html4strict">
</source>
<source lang="html4strict">
</source>

Latest revision as of 13:53, 26 November 2016