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

From Publication Station
Revision as of 07:29, 7 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
  • 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



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=2526’