Da WIKI CoderDojo Firenze.

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>