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