Framework per gioco a bivi: differenze tra le versioni

Versione delle 17:53, 30 nov 2014

File index.html:

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="utf-8">

    <meta name="description" content="">
    <meta name="author" content="Roberto Naldi">

    <link rel="stylesheet" type="text/css" href="jsframe01.css" />
    
    <title>Inizio</title>
  </head>

  <body onload="settaggiBase();">
    <div>
      <header>
        <h1>CoderDojo Firenze</h1>
      </header>

      <section id="sezStoria">
        <h1 id="titolo"> </h1>

        <p id="descrizione"> </p>

        <section id="scelte">
            <p><a href="#scelta1" id="scelta1" onclick="raggiungiLuogo(this);">nbsp;</a></p>
            <p><a href="#scelta2" id="scelta2" onclick="raggiungiLuogo(this);">nbsp;</a></p>
        </section>
      </section>
      
      <section id="sezComandi">
        <h1>Crea la tua storia!</h1>
        <form>
          <fieldset>
            <legend>Usa questi campi per aggiungere nuove situazioni</legend>
            <div>
              <label>Un titolo per questa situazione:</label>
              <input type="text" placeholder="Es. La Sala del Tesoro" id="nuovoTitolo" />
            </div>
            <div>
              <label>Descrivi cosa c’è e cosa succede:</label>
              <textarea cols="60" rows="10" placeholder="Ti trovi in un grande..." id="nuovaDescri"></textarea>
            </div>
            <div class="bordato">
              <p>Se non è il finale, dovrai offrire almeno un’azione da compiere; sarebbero meglio due.</p>
              <div>
                <label>Descrivi qui la prima scelta:</label>
                <input type="text" placeholder="Esco dalla porta..." id="nuovaScelta1" />
              </div>
              <div>
                <label>Scrivi il nome della situazione in cui si andrà a finire:</label>
                <input type="text" placeholder="es. ScalaRipida" id="nuovoLuogo1" class="corto" />
              </div>
              <hr />
              <div>
                <label>Descrivi qui la seconda scelta:</label>
                <input type="text" placeholder="Passo dalla finestra..." id="nuovaScelta2" class="corto" />
              </div>
              <div>
                <label>Scrivi il nome della situazione in cui si andrà a finire:</label>
                <input type="text" placeholder="es. Terrazza" id="nuovoLuogo2" class="corto" />
              </div>
            </div>
            <div>
              <p class="centrato grassetto grande">Attenzione! Il primo nome deve essere “Inizio”!</p>
              <label>Il nome che il pc userà per ritrovare questa situazione:</label>
              <input type="text" placeholder="es. StanzaBlu" id="nuovoNome" class="corto" />
            </div>
            <div>
              <label>Per caricare in memoria clicka qui:</label>
              <input type="button" value="Registra" class="corto" onclick="registraLuogo();" />
            </div>
          </fieldset>
          <div>
            <label>Quando hai finito clicka qui:</label>
            <input type="button" value="Dammi lista" class="corto" onclick="listaDaCopiare();" />
          </div>
        </form>
      </section>
      
      <section id="sezDaCopiare"> </section>

      <footer>
        <p>© Copyright by Coder Dojo Firenze</p>
      </footer>
    </div>
    <script type="text/javascript" src="fm01.js"></script>
    <script type="text/javascript" src="settaggi.js"></script>
  </body>
</html>

File fm01.js

/*--------------------------------------------------------------
 *             VARIABILI GLOBALI
 -------------------------------------------------------------*/

/*
 * Contenitore di tutti i luoghi esistenti
 */
var luoghi = {};

/*
 * Contenitore per i luoghi che saranno creati
 */
var nuoviLuoghi = {};

/*
 * Connessioni 'permanenti' ad elementi HTML
 * Le seguenti variabili servono per ridurre le chiamate 
 * a document.getElementById
 */
var htmlTitolo = document.getElementById("titolo");
var htmlDescrizione = document.getElementById("descrizione");
var htmlScelta1 = document.getElementById("scelta1");
var htmlScelta2 = document.getElementById("scelta2");
var htmlNuovoNome = document.getElementById("nuovoNome");
var htmlNuovoTitolo = document.getElementById("nuovoTitolo");
var htmlNuovaDescrizione = document.getElementById("nuovaDescri");
var htmlNuovaScelta1Des = document.getElementById("nuovaScelta1");
var htmlNuovaScelta1Nome = document.getElementById("nuovoLuogo1");
var htmlNuovaScelta2Des = document.getElementById("nuovaScelta2");
var htmlNuovaScelta2Nome = document.getElementById("nuovoLuogo2");

// la seguente variabile tiene traccia del luogo dove siamo
// in questo momento
var gloPosizione;


/*--------------------------------------------------------------
 *     Oggetto base che rappresenta un luogo
 * 
 * Un 'luogo' rappresenta il nucleo della narrazione. 
 -------------------------------------------------------------*/
// Creo il costruttore di luogo
function luogo(nome, titolo, descrizione)
{
    // Proprieta'
    this.luogoNome = nome; // nome sara' usato per identificare il luogo
    this.luogoTitolo = titolo;
    this.luogoDescrizione = descrizione;
    this.alternative = {
        vaiA1 : { testo : "testo a schermo", posto : "PrimaScelta"},
        vaiA2 : { testo : "testo a schermo", posto : "SecondaScelta"}
    };
}



/*--------------------------------------------------------------
 * settaggiBase() inizializza gli oggetti
 *   
 -------------------------------------------------------------*/
function settaggiBase() {
    elencaLuoghi();
    gloPosizione = luoghi["Inizio"];
    storiaASchermo();
}

function raggiungiLuogo(partenza) {
    var tmpPosizione;
    
    // Il valore di 'partenza' a questo punto è simile a:
    // file:///C:/...index.html#scelta1
    // A noi ci servono gli ultimi 7 caratteri (scelta1/2)
    // Quindi, 7imo carattere prima della fine, una string di 7 caratteri
    partenza = partenza.toString();
    partenza = partenza.substr(partenza.length - 7, 7);

    switch(partenza) {
        case "scelta1":
            tmpPosizione = gloPosizione.alternative.vaiA1.posto;
            break;
        case "scelta2": 
            tmpPosizione = gloPosizione.alternative.vaiA2.posto;
            break;
        default:
            alert("Errore nel programma!\nFunzione raggiungiLuogo\nIstruzione switch\nPartenza = " + partenza);
            return;
    }
    
    gloPosizione = luoghi[tmpPosizione];
    storiaASchermo();
}



function storiaASchermo () {
    htmlTitolo.innerHTML = gloPosizione.luogoTitolo;
    htmlDescrizione.innerHTML = gloPosizione.luogoDescrizione;
    htmlScelta1.innerHTML = gloPosizione.alternative.vaiA1.testo;
    htmlScelta2.innerHTML = gloPosizione.alternative.vaiA2.testo;
}



function caricaLuoghi(name, tit, descr, a1_testo, a1_luogo, a2_testo, a2_luogo) {
    var tmpLuogo = new luogo;

    tmpLuogo.luogoNome = name;
    tmpLuogo.luogoTitolo = tit;
    tmpLuogo.luogoDescrizione = descr;
    tmpLuogo.alternative.vaiA1.testo = a1_testo;
    tmpLuogo.alternative.vaiA1.posto = a1_luogo;
    tmpLuogo.alternative.vaiA2.testo = a2_testo;
    tmpLuogo.alternative.vaiA2.posto = a2_luogo;
    
    luoghi[tmpLuogo.luogoNome] = tmpLuogo;
}


function registraLuogo() {
    var tmpLuogo = new luogo;

    tmpLuogo.luogoNome = htmlNuovoNome.value;
    tmpLuogo.luogoTitolo = htmlNuovoTitolo.value;
    tmpLuogo.luogoDescrizione = htmlNuovaDescrizione.value;
    tmpLuogo.alternative.vaiA1.testo = htmlNuovaScelta1Des.value;
    tmpLuogo.alternative.vaiA1.posto = htmlNuovaScelta1Nome.value;
    tmpLuogo.alternative.vaiA2.testo = htmlNuovaScelta2Des.value;
    tmpLuogo.alternative.vaiA2.posto = htmlNuovaScelta2Nome.value;

    nuoviLuoghi[tmpLuogo.luogoNome] = tmpLuogo;
    
    htmlNuovoNome.value = "";
    htmlNuovoTitolo.value = "";
    htmlNuovaDescrizione.value = "";
    htmlNuovaScelta1Des.value = "";
    htmlNuovaScelta1Nome.value = "";
    htmlNuovaScelta2Des.value = "";
    htmlNuovaScelta2Nome.value = "";
}


function listaDaCopiare() {
    //alert("listaDaCopiare()");
    inizioListaDaCopiare();
    var rifSezDaCopiare = document.getElementById("sezDaCopiare");

    for(var indice in nuoviLuoghi) {
        if (nuoviLuoghi.hasOwnProperty(indice)) {
            var elemento = nuoviLuoghi[indice];
            
            var pNome = document.createElement("p");
            var tnNome = document.createTextNode('var nome = "' + elemento.luogoNome + '";');
            pNome.appendChild(tnNome);
            
            var pTitolo = document.createElement("p");
            var tnTitolo = document.createTextNode('var titolo = "' + elemento.luogoTitolo + '";');
            pTitolo.appendChild(tnTitolo);
            
            var pDescrizione = document.createElement("p");
            var tnDescrizione = document.createTextNode('var descrizione = "' + elemento.luogoDescrizione + '";');
            pDescrizione.appendChild(tnDescrizione);
            
            var pVaiA1_testo = document.createElement("p");
            var tnVaiA1_testo = document.createTextNode('var vaiA1_testo = "' + elemento.alternative.vaiA1.testo + '";');
            pVaiA1_testo.appendChild(tnVaiA1_testo);
            
            var pVaiA1_luogo = document.createElement("p");
            var tnVaiA1_luogo = document.createTextNode('var vaiA1_luogo = "' + elemento.alternative.vaiA1.posto + '";');
            pVaiA1_luogo.appendChild(tnVaiA1_luogo);
            
            var pVaiA2_testo = document.createElement("p");
            var tnVaiA2_testo = document.createTextNode('var vaiA2_testo = "' + elemento.alternative.vaiA2.testo + '";');
            pVaiA2_testo.appendChild(tnVaiA2_testo);
            
            var pVaiA2_luogo = document.createElement("p");
            var tnVaiA2_luogo = document.createTextNode('var vaiA2_luogo = "' + elemento.alternative.vaiA2.posto + '";');
            pVaiA2_luogo.appendChild(tnVaiA2_luogo);
            
            var pCaricaLuoghi = document.createElement("p");
            var tnCaricaLuoghi = document.createTextNode('caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);');
            pCaricaLuoghi.appendChild(tnCaricaLuoghi);

            rifSezDaCopiare.appendChild(pNome);
            rifSezDaCopiare.appendChild(pTitolo);
            rifSezDaCopiare.appendChild(pDescrizione);
            rifSezDaCopiare.appendChild(pVaiA1_testo);
            rifSezDaCopiare.appendChild(pVaiA1_luogo);
            rifSezDaCopiare.appendChild(pVaiA2_testo);
            rifSezDaCopiare.appendChild(pVaiA2_luogo);
            rifSezDaCopiare.appendChild(pCaricaLuoghi);

        }
    }
    
    var pGraffaFinale = document.createElement("p");
    var tnGraffaFinale = document.createTextNode("}");
    pGraffaFinale.appendChild(tnGraffaFinale);
    rifSezDaCopiare.appendChild(pGraffaFinale);
}


function inizioListaDaCopiare () {
    // La prima parte della lista deve essere
    // function elencaLuoghi() {
    var pEleLuoghi = document.createElement("p");
    var tnEleLuoghi = document.createTextNode("function elencaLuoghi() {");
    pEleLuoghi.appendChild(tnEleLuoghi);

    // a questo punto si può decidere se costringere ad un inizio
    // standard oppure no.
    // Il primo luogo si deve chiamare "Inizio"
    // con la 'I' maiuscola
    
    /*var pNome = document.createElement("p");
    var tnNome = document.createTextNode('var nome = "Inizio";');
    pNome.appendChild(tnNome);

    var pTitolo = document.createElement("p");
    var tnTitolo = document.createTextNode('var titolo = "Il gioco dei bivi";');
    pTitolo.appendChild(tnTitolo);

    var pDescrizione = document.createElement("p");
    var tnDescrizione = document.createTextNode('var descrizione = "Stai per iniziare un’avventura scritta da qualcuno della tua età!";');
    pDescrizione.appendChild(tnDescrizione);

    var pVaiA1_testo = document.createElement("p");
    var tnVaiA1_testo = document.createTextNode('var vaiA1_testo = "Inizia";');
    pVaiA1_testo.appendChild(tnVaiA1_testo);

    var pVaiA1_luogo = document.createElement("p");
    var tnVaiA1_luogo = document.createTextNode('var vaiA1_luogo = "InizioGioco";');
    pVaiA1_luogo.appendChild(tnVaiA1_luogo);

    var pVaiA2_testo = document.createElement("p");
    var tnVaiA2_testo = document.createTextNode('var vaiA2_testo = "Rinuncia";');
    pVaiA2_testo.appendChild(tnVaiA2_testo);

    var pVaiA2_luogo = document.createElement("p");
    var tnVaiA2_luogo = document.createTextNode('var vaiA2_luogo = "FineGioco";');
    pVaiA2_luogo.appendChild(tnVaiA2_luogo);

    var pCaricaLuoghi = document.createElement("p");
    var tnCaricaLuoghi = document.createTextNode('caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);');
    pCaricaLuoghi.appendChild(tnCaricaLuoghi);*/

    var rifSezDaCopiare = document.getElementById("sezDaCopiare");
    rifSezDaCopiare.appendChild(pEleLuoghi);
    /*rifSezDaCopiare.appendChild(pNome);
    rifSezDaCopiare.appendChild(pTitolo);
    rifSezDaCopiare.appendChild(pDescrizione);
    rifSezDaCopiare.appendChild(pVaiA1_testo);
    rifSezDaCopiare.appendChild(pVaiA1_luogo);
    rifSezDaCopiare.appendChild(pVaiA2_testo);
    rifSezDaCopiare.appendChild(pVaiA2_luogo);
    rifSezDaCopiare.appendChild(pCaricaLuoghi);*/
}




// Funzione per conoscere le dimensioni di un oggetto JavaScript
function dimOggetto(oggetto) {
    var contatore = 0;
 
    if (typeof oggetto == "object") {
 
        if (Object.keys) {
             contatore = Object.keys(oggetto).length;
        } else if (window._) {
             contatore = _.keys(oggetto).length;
        } else if (window.$) {
             contatore = $.map(oggetto, function() { return 1; }).length;
        } else {
             for (var key in oggetto) if (oggetto.hasOwnProperty(key)) contatore++;
        }
     
 }
 
     return contatore;
}

File settaggi.js

Davanti a te c’è un ponte levatoio del tutto allo scoperto.
Sotto di te un fossato pieno d'acqua.
Cosa fai?";

   vaiA1_testo = "Attraverso il ponte levatoio";
   vaiA1_luogo = "PuntoMorto";
   vaiA2_testo = "Mi tuffo nel fossato";
   vaiA2_luogo = "PuntoMorto";

   caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);

   nome = "FineGioco";
   titolo = "Il Castello Maledetto";
   descrizione = "Peccato! Speravo tanto tu ci volessi giocare...
Ora cosa farai?";
   vaiA1_testo = "Spengo il computer e vado a nanna.";
   vaiA1_luogo = "PuntoMorto";
   vaiA2_testo = "Imparo qualcos’altro.";
   vaiA2_luogo = "PuntoMorto";

   caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);

}

</pre>

File jsframe01.css:


body {
   background-color: #E6E6E6;
}

header {
   background-color: teal;
   color: yellow;
   margin-bottom: 3em;
}

header h1 {
   margin-left: 0;
   text-align: center;
}

footer {
   background-color: blue;
   color: yellow;
   margin-top: 2em;
}

footer p {
   margin-left: 0;
   text-align: center;
}

fieldset > div {
   margin-top: 1em;
}

fieldset > div > div {
   margin-top: 0.5em;
}

hr {
   margin: 1em 30%;
}

input {
   width: 25em;
}

input.corto {
   width: auto;
}

#sezStoria {
   border-style: ridge;
   margin: auto 20%;
   padding: 1em;
}

#sezComandi {
   border-style: ridge;
   margin: auto 20%;
   padding: 1em;
}

#sezDaCopiare {
   margin-top: 2em;
   background-color: #FFFFCC;
}

#sezDaCopiare p{
   margin: 0 auto;
}

.centrato {
   margin-left: 0;
   text-align: center;
}

.bordato {
   border-style: ridge;
   padding: 0.5em;
}

.grassetto {
   font-weight: bold;
}

.grande {
   font-size: large;
}

Framework per gioco a bivi: differenze tra le versioni

Visite

Versione delle 17:53, 30 nov 2014

Menu di navigazione

Navigazione

Ricerca

Strumenti

Categorie

Strumenti personali