Da WIKI CoderDojo Firenze.
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>
<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>
<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>
<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>
<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>