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

From Publication Station
Line 1: Line 1:
=exploring the city - choose your own adventure=
=groups=                                                                                         —
==textual adventure games==
==1A==
* [https://en.wikipedia.org/wiki/Colossal_Cave_Adventure Colossal Cave Adventure] (1976,1977)
Rose van Zijl
* [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
Florian Verbeek


Mady Verkerk


==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]]
Niels Hofsteenge


* add: descriptions, dialogues, error messages and a vocabulary for the players
Elisa Cattarinussi


''game development then becomes much like planning and writing a piece of short fiction, except multiple outcomes must be conceived''.
Juliette Klootwijk


Aarseth, Espen J. 1997 ''Cybertext''
----


==the city==
Lisa Peake
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.
Anna Sipovic


== choose you own adventure in the city==
Myrna de Bruijn
[[File:cyod.jpg]]


A very simple example using JS and jQuery
----


<source lang="html4strict">
Mitchell van der Gaag
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>


  <title>Choose your own adventure</title>
Sico Kroes
  <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>
Raimunda de Jong
    //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] }, 
    }


Ilaria Iandolo (moved to 1A from 1B)


function replace_scene(n){ // function to replace the scene content base on its number
----
    var scene = scenes[n];


    $("p.msg").html( scene.msg );
Tiana Randriaharimalala
    $("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)
Eun Zee Lee
                                                        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
                                                        })
                                                  }


}
Dora Varga


----


$(document).ready(
Gabija Bubnyte
    function(){
        replace_scene('scene_1'); // start in scene 1
       
    })


</script>
Eveline van der Duim
</body>
</html>
</source>


===discussion===
(Sanne Tellier)
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===
==1B==
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.
Tim van Hooft


Keep it simple.
Lotte Gerick
Have fun!
 
----
 
Valentino Angela
 
Badir Shawky
 
----
 
Daan van Limburg Stirum
 
Lianne Verkerk
 
----
 
Babette Verhulst
 
Daphne Reijtenbagh
 
Nigel Miguel
 
----
 
Fianda van Kuler
 
Noelle van Dijk
 
Natasja Bokkerink
 
----
 
Freek van Santvoord
 
Stijn Zijlstra
 
Ricardo Abbaszadeh
 
 
==1C==
 
----
 
Anna Apai
 
Daan Kuyper
 
(Alex) Tomo Teratani
 
----
 
Mette Koopmans
 
Courtney Brown
 
Sophie Zweers
 
----
 
Joep Hurkmans
 
Jorijn de Jonge
 
Jelle van Bouwhorst
 
----
 
Laura Ketting
 
Eva Schoren
 
Anne Schaarschmidt
 
----
 
Mirte de Wit
 
Alexandra den Dikken
 
Annabel Egbers
 
----
 
Pontus Hoglund
 
Robert Reinartz
 
Laura Gouma >< Has been missing from the beginning of the quarter ><
 
----
 
Alice Minney
 
Lisbeth Luft
 
Emma van Os
 
----
 
Guido Nijhof
 
Pam van Beekhoven
 
Eileen van der Burgh
 
 
 
----
 
Stella Shi
 
Evelyn / Shiyue Wang

Revision as of 13:48, 26 November 2016

=groups= —

1A

Rose van Zijl

Florian Verbeek

Mady Verkerk


Niels Hofsteenge

Elisa Cattarinussi

Juliette Klootwijk


Lisa Peake

Anna Sipovic

Myrna de Bruijn


Mitchell van der Gaag

Sico Kroes

Raimunda de Jong

Ilaria Iandolo (moved to 1A from 1B)


Tiana Randriaharimalala

Eun Zee Lee

Dora Varga


Gabija Bubnyte

Eveline van der Duim

(Sanne Tellier)


1B


Tim van Hooft

Lotte Gerick


Valentino Angela

Badir Shawky


Daan van Limburg Stirum

Lianne Verkerk


Babette Verhulst

Daphne Reijtenbagh

Nigel Miguel


Fianda van Kuler

Noelle van Dijk

Natasja Bokkerink


Freek van Santvoord

Stijn Zijlstra

Ricardo Abbaszadeh


1C


Anna Apai

Daan Kuyper

(Alex) Tomo Teratani


Mette Koopmans

Courtney Brown

Sophie Zweers


Joep Hurkmans

Jorijn de Jonge

Jelle van Bouwhorst


Laura Ketting

Eva Schoren

Anne Schaarschmidt


Mirte de Wit

Alexandra den Dikken

Annabel Egbers


Pontus Hoglund

Robert Reinartz

Laura Gouma >< Has been missing from the beginning of the quarter ><


Alice Minney

Lisbeth Luft

Emma van Os


Guido Nijhof

Pam van Beekhoven

Eileen van der Burgh



Stella Shi

Evelyn / Shiyue Wang