Da WIKI CoderDojo Firenze.
 
(Una versione intermedia di uno stesso utente non sono mostrate )
Riga 1: Riga 1:
Il gioco a bivi descritto nella sezione [http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html] rivisto con il Javascript. In pratica non si usano link a pagine diverse per passare da stanza a stanza, bensì si carica una pagina che contiene sia la parte grafica html che la parte di logica in javascript.
+
= Gioco a bivi JAVASCRIPT =
 +
 
 +
Il gioco a bivi descritto nella sezione [http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html] rivisto con il Javascript.  
 +
 
 +
In pratica non si usano link a pagine diverse per passare da stanza a stanza, bensì si carica una pagina che contiene sia la parte grafica html che la parte di logica in javascript.
  
 
E' utile articolare in passi l'esercizio fornendo il seguente codice html:
 
E' utile articolare in passi l'esercizio fornendo il seguente codice html:
Riga 7: Riga 11:
 
Il passo successivo utilizza lo stile <span style="font-family:courier new,courier,monospace;">display:none</span> per nascondere i tre &lt;div&gt; degli ambienti di gioco, il codice diventa:
 
Il passo successivo utilizza lo stile <span style="font-family:courier new,courier,monospace;">display:none</span> per nascondere i tre &lt;div&gt; degli ambienti di gioco, il codice diventa:
 
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;title&gt;Gioco dei bivi col JavaScript&lt;/title&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h1&gt;Gioco dei bivi col JavaScript&lt;/h1&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="inizio" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Davanti al ponte levatoio&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="mi getto nel fossato pieno d'acqua"/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="entro dalla porta principale" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il fossato intorno al Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ehm...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’erano i coccodrilli...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Che brutta fine! Mi dispiace.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="ricomincia" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="salone" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il Salone del Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei entrato nel castello.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Complimenti......&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="ricomincia" value="ricomincia" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;</span></div>
 
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;title&gt;Gioco dei bivi col JavaScript&lt;/title&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h1&gt;Gioco dei bivi col JavaScript&lt;/h1&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="inizio" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Davanti al ponte levatoio&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="mi getto nel fossato pieno d'acqua"/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="entro dalla porta principale" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il fossato intorno al Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ehm...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’erano i coccodrilli...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Che brutta fine! Mi dispiace.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="ricomincia" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="salone" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il Salone del Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei entrato nel castello.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Complimenti......&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="ricomincia" value="ricomincia" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;</span></div>
 +
A questo punto si inserisce la logica (function mostraDiv agganciata all'evento onclick dei button) che fa apparire e scomparire i &lt;div&gt; dei vari ambienti.
 +
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;title&gt;Gioco dei bivi col JavaScript&lt;/title&gt;<br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;script&gt;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function mostraDiv(situazione){</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('inizio').style.display="none";</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('fossato').style.display="none";</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('salone').style.display="none";</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById(situazione).style.display="block";</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;&nbsp; &nbsp;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/script&gt;</span><br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body onload="mostraDiv('inizio');"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h1&gt;Gioco dei bivi col JavaScript&lt;/h1&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="inizio" style="display:none"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Davanti al ponte levatoio&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="mi getto nel fossato pieno d'acqua" <span style="background-color:#FFFF00;">onclick="mostraDiv('fossato');"</span> /><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="entro dalla porta principale" <span style="background-color:#FFFF00;">onclick="mostraDiv('salone');"</span> /><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="fossato" style="display:none"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il fossato intorno al Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ehm...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’erano i coccodrilli...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Che brutta fine! Mi dispiace.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="ricomincia" <span style="background-color:#FFFF00;">onclick="mostraDiv('inizio');"</span> /><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="salone" style="display:none"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il Salone del Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei entrato nel castello.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Complimenti......&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" name="ricomincia" value="ricomincia" <span style="background-color:#FFFF00;">onclick="mostraDiv('inizio');"</span> /><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;</span><br/></div>
 +
L'ultimo passo è inserire qualche abbellimento tramite CSS:
 +
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<span style="background-color:#FFFF00;">&lt;style&gt;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;h1{</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text-align: center;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text-decoration: underline;}</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.situazione{</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;display&nbsp;&nbsp; &nbsp;: none;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;margin: 5% auto;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 90%;}</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.messaggio{</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color: yellow;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;}</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.sconfitta{</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color: black;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: white;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: larger;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text-align: center;}</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.centrato{</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text-align: center;}</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/style&gt;</span><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;script&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function mostraDiv(situazione){<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('inizio').style.display="none";<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('fossato').style.display="none";<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('salone').style.display="none";<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById(situazione).style.display="block";<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/script&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body onload="mostraDiv('inizio');"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h1&gt;Gioco dei bivi&lt;/h1&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="inizio" class="situazione"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Davanti al ponte levatoio&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p <span style="background-color:#FFFF00;">class="messaggio"</span>>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="in_fossato" value="mi getto nel fossato pieno d'acqua" onclick="mostraDiv('fossato');" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="alla_porta" value="entro dalla porta principale" onclick="mostraDiv('salone');" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="fossato" class="situazione"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il fossato intorno al Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ehm...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’erano i coccodrilli...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p <span style="background-color:#FFFF00;">class="sconfitta"</span>>Che brutta fine! Mi dispiace.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="ricomincia" value="ricomincia" onclick="mostraDiv('inizio');" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="salone" class="situazione"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il Salone del Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei entrato nel castello.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p <span style="background-color:#FFFF00;">class="messaggio"</span>>Complimenti......&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="ricomincia" value="ricomincia" onclick="mostraDiv('inizio');" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;</span><br/></div>[[Category:Javascript|Category:Javascript]]

Versione attuale delle 17:21, 29 ago 2014

Gioco a bivi JAVASCRIPT

Il gioco a bivi descritto nella sezione html rivisto con il Javascript.

In pratica non si usano link a pagine diverse per passare da stanza a stanza, bensì si carica una pagina che contiene sia la parte grafica html che la parte di logica in javascript.

E' utile articolare in passi l'esercizio fornendo il seguente codice html:

<html>
    <head>
    <title>Gioco dei bivi col JavaScript</title>
    </head>
    <body>
        <h1>Gioco dei bivi col JavaScript</h1>
        <div id="inizio">
            <h2>Davanti al ponte levatoio</h2>
            <p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p>
            <p>Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?</p>
            <p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p>
            <input type="button" value="mi getto nel fossato pieno d'acqua"/>
            <input type="button" value="entro dalla porta principale" />
        </div>    
        <div id="fossato">
            <h2>Il fossato intorno al Castello</h2>
            <p>Ehm...</p>
            <p>C’erano i coccodrilli...</p>
            <p>Che brutta fine! Mi dispiace.</p>
            <input type="button" value="ricomincia" />
        </div>    
        <div id="salone">
            <h2>Il Salone del Castello</h2>
            <p>Sei entrato nel castello.</p>
            <p>C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p>
            <p>Complimenti......</p>
            <input type="button" name="ricomincia" value="ricomincia" />
        </div>    
    </body>
</html>

Questo codice, se visualizzato nel browser, mostra  i tre ambienti di gioco uno di seguito all'altro.

Il passo successivo utilizza lo stile display:none per nascondere i tre <div> degli ambienti di gioco, il codice diventa:

<html>
    <head>
    <title>Gioco dei bivi col JavaScript</title>
    </head>
    <body>
        <h1>Gioco dei bivi col JavaScript</h1>
        <div id="inizio" style="display:none">
            <h2>Davanti al ponte levatoio</h2>
            <p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p>
            <p>Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?</p>
            <p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p>
            <input type="button" value="mi getto nel fossato pieno d'acqua"/>
            <input type="button" value="entro dalla porta principale" />
        </div>    
        <div id="fossato" style="display:none">
            <h2>Il fossato intorno al Castello</h2>
            <p>Ehm...</p>
            <p>C’erano i coccodrilli...</p>
            <p>Che brutta fine! Mi dispiace.</p>
            <input type="button" value="ricomincia" />
        </div>    
        <div id="salone" style="display:none">
            <h2>Il Salone del Castello</h2>
            <p>Sei entrato nel castello.</p>
            <p>C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p>
            <p>Complimenti......</p>
            <input type="button" name="ricomincia" value="ricomincia" />
        </div>    
    </body>
</html>

A questo punto si inserisce la logica (function mostraDiv agganciata all'evento onclick dei button) che fa apparire e scomparire i <div> dei vari ambienti.

<html>
    <head>
    <title>Gioco dei bivi col JavaScript</title>
        <script>
        function mostraDiv(situazione){
            document.getElementById('inizio').style.display="none";
            document.getElementById('fossato').style.display="none";
            document.getElementById('salone').style.display="none";
            document.getElementById(situazione).style.display="block";
        }    
        </script>
    </head>
    <body onload="mostraDiv('inizio');">
        <h1>Gioco dei bivi col JavaScript</h1>
        <div id="inizio" style="display:none">
            <h2>Davanti al ponte levatoio</h2>
            <p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p>
            <p>Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?</p>
            <p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p>
            <input type="button" value="mi getto nel fossato pieno d'acqua" onclick="mostraDiv('fossato');" />
            <input type="button" value="entro dalla porta principale" onclick="mostraDiv('salone');" />
        </div>    
        <div id="fossato" style="display:none">
            <h2>Il fossato intorno al Castello</h2>
            <p>Ehm...</p>
            <p>C’erano i coccodrilli...</p>
            <p>Che brutta fine! Mi dispiace.</p>
            <input type="button" value="ricomincia" onclick="mostraDiv('inizio');" />
        </div>    
        <div id="salone" style="display:none">
            <h2>Il Salone del Castello</h2>
            <p>Sei entrato nel castello.</p>
            <p>C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p>
            <p>Complimenti......</p>
            <input type="button" name="ricomincia" value="ricomincia" onclick="mostraDiv('inizio');" />
        </div>    
    </body>
</html>

L'ultimo passo è inserire qualche abbellimento tramite CSS:

<html>
    <head>
        <style>
            h1{
                text-align: center;
                text-decoration: underline;}
            .situazione{
                display    : none;
                margin: 5% auto;
                width: 90%;}
            .messaggio{
                background-color: yellow;
                color: blue;}
            .sconfitta{
                background-color: black;
                color: white;
                font-size: larger;
                text-align: center;}
            .centrato{
                text-align: center;}
        </style>
        <script>
        function mostraDiv(situazione){
            document.getElementById('inizio').style.display="none";
            document.getElementById('fossato').style.display="none";
            document.getElementById('salone').style.display="none";
            document.getElementById(situazione).style.display="block";
        }    
        </script>
    </head>
    <body onload="mostraDiv('inizio');">
        <h1>Gioco dei bivi</h1>
        <div id="inizio" class="situazione">
            <h2>Davanti al ponte levatoio</h2>
            <p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p>
            <p>Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?</p>
            <p class="messaggio">Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p>
            <input type="button" name="in_fossato" value="mi getto nel fossato pieno d'acqua" onclick="mostraDiv('fossato');" />
            <input type="button" name="alla_porta" value="entro dalla porta principale" onclick="mostraDiv('salone');" />
        </div>
        <div id="fossato" class="situazione">
            <h2>Il fossato intorno al Castello</h2>
            <p>Ehm...</p>
            <p>C’erano i coccodrilli...</p>
            <p class="sconfitta">Che brutta fine! Mi dispiace.</p>
            <input type="button" name="ricomincia" value="ricomincia" onclick="mostraDiv('inizio');" />
        </div>
        <div id="salone" class="situazione">
            <h2>Il Salone del Castello</h2>
            <p>Sei entrato nel castello.</p>
            <p>C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p>
            <p class="messaggio">Complimenti......</p>
            <input type="button" name="ricomincia" value="ricomincia" onclick="mostraDiv('inizio');" />
        </div>    
    </body>
</html>