https://kata.coderdojo.it/wiki/api.php?action=feedcontributions&user=Leoncino&feedformat=atomWIKI CoderDojo Firenze - Contributi utente [it]2024-03-29T08:15:14ZContributi utenteMediaWiki 1.23.2https://kata.coderdojo.it/wiki/index.php?title=App_Inventor:_InstallazioneApp Inventor: Installazione2016-05-28T09:40:52Z<p>Leoncino: </p>
<hr />
<div>== Installazione App Inventor su server locale ==<br />
<br />
Scopo di questa pagina è descrivere come installare ed utilizzare il server di App Inventor 2 su un server locale Linux da utilizzare poi per sessioni di Coderdojo.<br />
<br />
Il progetto App Inventor è Open Source ed è liberamente scaricabile da GitHub nella [https://github.com/mit-cml/appinventor-sources pagina appositamente predisposta].<br />
<br />
Su internet è anche reperibile [https://docs.google.com/document/pub?id=1Xc9yt02x3BRoq5m1PJHBr81OOv69rEBy8LVG_84j9jc un documento] molto dettagliato con informazioni su come preparare il server su vari sistemi (Linux, MacOS, Windows). Si rimanda a questo documento per informazioni dettagliate, qui ci si limita a riportare i passi principali.<br />
<br />
Risultano poi presenti altre risorse tra cui un [https://groups.google.com/forum/#!forum/app-inventor-open-source-dev Forum].<br />
<br />
Interessante anche il documento [https://docs.google.com/document/d/1hIvAtbNx-eiIJcTA2LLPQOawctiGIpnnt0AvfgnKBok/pub App Inventor Deveper Overview].<br />
<br />
Nella pagina del progetto su GitHub sono contenute altre informazioni interessanti.<br />
<br />
<br />
<br />
=== Prerequisiti ===<br />
<br />
Il primo prerequisito importante è che sia installata la SDK completa di Java nella versione Oracle 1.7 (a.k.a. 7). Attenzione sui sistemi Ubuntu che di default installano OpenJdk. Da notare che di default oggi viene installata la 1.8 e che nella documentazione di App Inventor insistono molto nell'usare la versione 1.7.<br />
<br />
Altri programmi necessari:<br />
<br />
*git<br />
*ant<br />
<br />
<br />
<br />
=== Installazione Google App Engine ===<br />
<br />
Occorre avere a disposizione un'installazione di [https://cloud.google.com/appengine/downloads Google App Engine] per Java. Scaricarla da sito e installarla seguendo le indicazioni riportate sullo stesso (sostanzialmente unzip del file). Da notare che nella documentazione App Inventor si insiste molto nell'usare la versione di App Engine non superiore alla 1.9.27.<br />
<br />
Dopo l'unzip inserire il percorso &lt;directory_app_engine&gt;/bin nel PATH<br />
<br />
=== Compilazione App Inventor ===<br />
<br />
I sorgenti di App Inventor possono essere scaricati con il comando:<br />
<div style="background:#eee; border:1px solid #ccc; padding:5px 10px">git clone [https://github.com/mit-cml/appinventor-sources.git https://github.com/mit-cml/appinventor-sources.git]<br/></div><br />
<br/>Per compilare App Inventor, entrare nella directory appinventor-sources/appinventor compilare con il comando:<br />
<div style="background:#eee; border:1px solid #ccc; padding:5px 10px"><code>ant</code><br/></div><br />
Se tutto va bene deve comparire il messaggio "BUILD SUCCESSFUL"<br />
<br />
<br />
<br />
=== Esecuzione App Inventor ===<br />
<br />
App Inventor viene eseguito come applicazione google appengine, risulta conveniente usare come cartella di base la cartella appinventor (es se su Linux si è fatto il git clone sotto opt:&nbsp;/opt/appinventor-sources/appinventor) e lanciare google appengine con il suo percorso completo, es:<br />
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">/opt/appengine-java-sdk-1.9.27/bin/dev_appserver.sh --port=8888 --address=0.0.0.0 appengine/build/war/</span><br/></div><br />
In questo modo possiamo collegarci ad appinventor puntando il browser su [http://indirizzoserver:8888 http://indirizzoserver:8888]. Possiamo scrivere una app, usare il collegamento AI Companion, ma non compilare.<br />
<br />
Per permettere al sistema di compilare le app è necessario lanciare anche il build server, che sta nella cartella buildserver di appinventor (es&nbsp;<span style="line-height: 20.8px;">&nbsp;</span>/opt/appinventor-sources/appinventor/buildserver) con il comando:<br />
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">ant RunLocalBuildServer<br/></span></div>[[Category:AppInventor|A]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=App_Inventor:_InstallazioneApp Inventor: Installazione2016-05-28T09:40:08Z<p>Leoncino: </p>
<hr />
<div>== Installazione App Inventor su server locale ==<br />
<br />
Scopo di questa pagina è descrivere come installare ed utilizzare il server di App Inventor 2 su un server locale Linux da utilizzare poi per sessioni di Coderdojo.<br />
<br />
Il progetto App Inventor è Open Source ed è liberamente scaricabile da GitHub nella [https://github.com/mit-cml/appinventor-sources pagina appositamente predisposta].<br />
<br />
Su internet è anche reperibile [https://docs.google.com/document/pub?id=1Xc9yt02x3BRoq5m1PJHBr81OOv69rEBy8LVG_84j9jc un documento] molto dettagliato con informazioni su come preparare il server su vari sistemi (Linux, MacOS, Windows). Si rimanda a questo documento per informazioni dettagliate, qui ci si limita a riportare i passi principali.<br />
<br />
Risultano poi presenti altre risorse tra cui un [https://groups.google.com/forum/#!forum/app-inventor-open-source-dev Forum].<br />
<br />
Interessante anche il documento [https://docs.google.com/document/d/1hIvAtbNx-eiIJcTA2LLPQOawctiGIpnnt0AvfgnKBok/pub App Inventor Deveper Overview].<br />
<br />
Nella pagina del progetto su GitHub sono contenute altre informazioni interessanti.<br />
<br />
<br />
<br />
=== Prerequisiti ===<br />
<br />
Il primo prerequisito importante è che sia installata la SDK completa di Java nella versione Oracle 1.7 (a.k.a. 7). Attenzione sui sistemi Ubuntu che di default installano OpenJdk. Da notare che di default oggi viene installata la 1.8 e che nella documentazione di App Inventor insistono molto nell'usare la versione 1.7.<br />
<br />
Altri programmi necessari:<br />
<br />
*git<br />
*ant<br />
<br />
<br />
<br />
=== Installazione Google App Engine ===<br />
<br />
Occorre avere a disposizione un'installazione di [https://cloud.google.com/appengine/downloads Google App Engine] per Java. Scaricarla da sito e installarla seguendo le indicazioni riportate sullo stesso (sostanzialmente unzip del file). Da notare che nella documentazione App Engine insiste molto nell'usare la versione di App Engine non superiore alla 1.9.27.<br />
<br />
Dopo l'unzip inserire il percorso &lt;directory_app_engine&gt;/bin nel PATH<br />
<br />
=== Compilazione App Inventor ===<br />
<br />
I sorgenti di App Inventor possono essere scaricati con il comando:<br />
<div style="background:#eee; border:1px solid #ccc; padding:5px 10px">git clone [https://github.com/mit-cml/appinventor-sources.git https://github.com/mit-cml/appinventor-sources.git]<br/></div><br />
<br/>Per compilare App Inventor, entrare nella directory appinventor-sources/appinventor compilare con il comando:<br />
<div style="background:#eee; border:1px solid #ccc; padding:5px 10px"><code>ant</code><br/></div><br />
Se tutto va bene deve comparire il messaggio "BUILD SUCCESSFUL"<br />
<br />
<br />
<br />
=== Esecuzione App Inventor ===<br />
<br />
App Inventor viene eseguito come applicazione google appengine, risulta conveniente usare come cartella di base la cartella appinventor (es se su Linux si è fatto il git clone sotto opt:&nbsp;/opt/appinventor-sources/appinventor) e lanciare google appengine con il suo percorso completo, es:<br />
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">/opt/appengine-java-sdk-1.9.27/bin/dev_appserver.sh --port=8888 --address=0.0.0.0 appengine/build/war/</span><br/></div><br />
In questo modo possiamo collegarci ad appinventor puntando il browser su [http://indirizzoserver:8888 http://indirizzoserver:8888]. Possiamo scrivere una app, usare il collegamento AI Companion, ma non compilare.<br />
<br />
Per permettere al sistema di compilare le app è necessario lanciare anche il build server, che sta nella cartella buildserver di appinventor (es&nbsp;<span style="line-height: 20.8px;">&nbsp;</span>/opt/appinventor-sources/appinventor/buildserver) con il comando:<br />
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">ant RunLocalBuildServer<br/></span></div>[[Category:AppInventor|A]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=App_Inventor:_InstallazioneApp Inventor: Installazione2016-05-28T09:39:10Z<p>Leoncino: </p>
<hr />
<div>== Installazione App Inventor su server locale ==<br />
<br />
Scopo di questa pagina è descrivere come installare ed utilizzare il server di App Inventor 2 su un server locale Linux da utilizzare poi per sessioni di Coderdojo.<br />
<br />
Il progetto App Inventor è Open Source ed è liberamente scaricabile da GitHub nella [https://github.com/mit-cml/appinventor-sources pagina appositamente predisposta].<br />
<br />
Su internet è anche reperibile [https://docs.google.com/document/pub?id=1Xc9yt02x3BRoq5m1PJHBr81OOv69rEBy8LVG_84j9jc un documento] molto dettagliato con informazioni su come preparare il server su vari sistemi (Linux, MacOS, Windows). Si rimanda a questo documento per informazioni dettagliate, qui ci si limita a riportare i passi principali.<br />
<br />
Risultano poi presenti altre risorse tra cui un [https://groups.google.com/forum/#!forum/app-inventor-open-source-dev Forum].<br />
<br />
Interessante anche il documento [https://docs.google.com/document/d/1hIvAtbNx-eiIJcTA2LLPQOawctiGIpnnt0AvfgnKBok/pub App Inventor Deveper Overview].<br />
<br />
Nella pagina del progetto su GitHub sono contenute altre informazioni interessanti.<br />
<br />
<br />
<br />
=== Prerequisiti ===<br />
<br />
Il primo prerequisito importante è che sia installata la SDK completa di Java nella versione Oracle 1.7 (a.k.a. 7). Attenzione sui sistemi Ubuntu che di default installano OpenJdk. Da notare che di default oggi viene installata la 1.8 e che nella documentazione di App Inventor insistono molto nell'usare la versione 1.7.<br />
<br />
Altri programmi necessari:<br />
<br />
*git<br />
*ant<br />
<br />
<br />
<br />
=== Installazione Google App Engine ===<br />
<br />
Occorre avere a disposizione un'installazione di [https://cloud.google.com/appengine/downloads Google App Engine] per Java. Scaricarla da sito e installarla seguendo le indicazioni riportate sullo stesso (sostanzialmente unzip del file). Da notare che nella documentazione App Engine insiste molto nell'usare la versione di App Engine non superiore alla 1.9.27.<br />
<br />
Dopo l'unzip inserire il percorso &lt;directory_app_engine&gt;/bin nel PATH<br />
<br />
=== Compilazione App Inventor ===<br />
<br />
I sorgenti di App Inventor possono essere scaricati con il comando:<br />
<div style="background:#eee; border:1px solid #ccc; padding:5px 10px">git clone [https://github.com/mit-cml/appinventor-sources.git https://github.com/mit-cml/appinventor-sources.git]<br/></div><br />
<br/>Per compilare App Inventor, entrare nella directory appinventor-sources/appinventor compilare con il comando:<br />
<div style="background:#eee; border:1px solid #ccc; padding:5px 10px"><code>ant</code><br/></div><br />
Se tutto va bene deve comparire il messaggio "BUILD SUCCESSFUL"<br />
<br />
<br />
<br />
=== Esecuzione App Inventor ===<br />
<br />
App Inventor viene eseguito come applicazione googl appengine, risulta conveniente usare come cartella di base la cartella appinventor (es se su Linux si è fatto il git clone sotto opt:&nbsp;/opt/appinventor-sources/appinventor) e lanciare google appengine con il suo percorso completo, es:<br />
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">/opt/appengine-java-sdk-1.9.27/bin/dev_appserver.sh --port=8888 --address=0.0.0.0 appengine/build/war/</span><br/></div><br />
In questo modo possiamo collegarci ad appinventor puntando il browser su http://indirizzoserver:8888. Possiamo scrivere una app, usare il collegamento AI Companion, ma non compilare.<br />
<br />
Per permettere al sistema di compilare le app è necessario lanciare anche il build server, che sta nella cartella buildserver di appinventor (es&nbsp;<span style="line-height: 20.8px;">&nbsp;</span>/opt/appinventor-sources/appinventor/buildserver) con il comando:<span style="line-height: 20.8px;"></span><br />
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">ant RunLocalBuildServer<br/></div><br />
<br />
<br />
<br />
[[Category:AppInventor|A]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Tutorial:_LabirintoTutorial: Labirinto2014-09-21T17:55:53Z<p>Leoncino: </p>
<hr />
<div>== Gioco LABIRINTO (mentor) ==<br />
<br />
Questo semplice programma permette di muovere uno sprite all'interno di un labirinto, animando lo sprite utilizzando più costumi e gestendo le collisioni sulle "pareti" del labirinto. Dimostra quindi in modo elementare come:<br />
<br />
*utilizzare tasti per muovere uno sprite<br />
*utilizzare costumi multipli sullo stesso sprite alternandoli durante il movimento<br />
*utilizzare la condizione "tocca il colore" per effettuare operazioni automatiche sul movimento<br />
<br />
Il gioco può essere [http://kata.coderdojo.it/archivio/LABIRINTO.sb scaricato] dall'archivio kata.<br />
<br />
=== Creazione dello Stage (sfondo) ===<br />
<br />
Come prima cosa occorre realizzare lo '''Stage''' da utilizzare come sfondo per il gioco. L'unico requisito importante è che i muri del labirinto siano realizzati con la penna di colore nero in modo da poter correttamente in fase di codifica la collisione con le pareti. Occorre anche realizzare i corridoi del labirinto con una larghezza appropriata in modo da permettere allo sprite, che realizzeremo successivamente, di muoversi agevolmente all'interno del labirinto.<br />
<br />
Per modificare lo sfondo, andare nell'area Stage, selezionare il tab "Sfondi" e selezionare "Modifica". Nella figura che segue è riportata la finestra Editor di immagini con un esempio di labirinto.<br />
<br />
[[File:Editor stage.png|File:Editor_stage.png]]<br />
<br />
=== Sprite: disegno dei costumi ===<br />
<br />
Come sprite useremo una palla costituita da due costumi che si alternano continuamente per creare un effetto animato elementare in stile Pac-Man. Creare lo sprite cliccando sull'icona "Disegna nuovo sprite":<br />
<br />
[[File:Crea nuovo sprite.png|File:Crea_nuovo_sprite.png]]<br />
<br />
Si aprirà la finestra dell'editor di immagini. Disegnare un semplice cerchio di un colore a piacere (purché non nero). Scegliere la dimensione in modo che lo sprite sia ben visibile ma che si possa muovere agevolmente all'interno del labirinto. Alla fine di questa operazione lo sprite deve apparire sopra lo stage per esempio come riportato nella seguente immagine:<br />
<br />
[[File:Scratch labirinto sprite costume 1.png|File:Scratch_labirinto_sprite_costume_1.png]]<br />
<br />
Per realizzare il secondo costume dello sprite operare come segue:<br />
<br />
*duplicare il primo costume realizzando cliccando sul pulsante "copia" accanto al costume:<br />
<br />
[[File:Scratch labirinto copia costume.png|File:Scratch_labirinto_copia_costume.png]]<br />
<br />
*cliccare sul pulsante "modifica" accanto al secondo costume. Cancellare alcuni pixel del corpo in modo da realizzare una "bocca". Alla fine dell'operazione i due costumi appariranno così:<br />
<br />
[[File:Scratch labirinto i due costumi.png|File:Scratch_labirinto_i_due_costumi.png]]<br />
<br />
<br />
<br />
=== Sprite: codice ===<br />
<br />
Il codice da associare allo sprite appena realizzato è costituito da tre gruppi di script:<br />
<br />
*Script per il posizionamento iniziale dello sprite e per gestire l'alternanza dei costumi<br />
*Script per gestire il movimento dello sprite utilizzando le frecce<br />
*Script per gestire le collisioni con le pareti del labirinto.<br />
<br />
L'insieme si tutto il codice da realizzare è riportato nell'immagine che segue:<br />
<br />
<br/>[[File:Scratch labirinto codice.png|File:Scratch_labirinto_codice.png]]<br />
<br />
<br />
<br />
=== Esercizi ===<br />
<br />
*Estendere l'algoritmo di movimento in modo da permettere anche gli spostamenti in diagonale (attenzione... c'è una soluzione semplice ma sbagliata e una corretta).<br />
[[Category:Scratch|L]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Movimento_con_il_mouse_ScratchMovimento con il mouse Scratch2014-09-21T17:55:20Z<p>Leoncino: </p>
<hr />
<div>= Movimento con il Mouse =<br />
<br />
<span style="line-height: 1.6;">Muovere uno speite utilizzando il mouse può essere fatto in vari modi.</span><br />
<br />
== Inseguimento del Mouse ==<br />
<br />
Si realizza con il blocco "punta verso...." per far puntare lo sprite verso il mouse, e con "fai ... passi" per muovere lo sprite, come nell'esempio seguente:<br/>[[File:Movimento mouse.png|File:Movimento mouse.png]]<br />
<br />
Questo script ha come effetto sgradevole che se il mouse si ferma lo sprite una volta raggiunto il puntatore "impazzisce", ovvero inizia a ribaltarsi all'infinito.<br />
<br />
Per evitare questo effetto si può modificare lo script introducendo il controllo che se lo sprite è troppo vicino al puntatore il movimento non viene fatto così come mostrato di seguito:<br/>[[File:Movimento mouse 2.png|File:Movimento mouse 2.png]]<br />
<br />
Si può aggiungere anche un po' di animazione facendo cambiare il costume allo sprite a ogni movimento:<br/>[[File:Movimento mouse 3.png|File:Movimento mouse 3.png]]<br />
<br />
Si può anche gestire un mirino per i giochi di sparo, realizzando uno sprite con un croce o simile e utilizzano il comando "raggiungi puntatore del mouse", lo script seguente invia anche un messaggio se si fa click con il mouse<br/>[[File:Puntatore mouse.png|File:Puntatore mouse.png]]<br />
[[Category:Scratch|M]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Categoria:ScratchCategoria:Scratch2014-09-21T17:53:33Z<p>Leoncino: </p>
<hr />
<div>'''Scratch''' è un ambiente di programmazione visuale creato per avvicinare i bambini alla programmazione.<br />
[[Category:Principale|Category:Principale]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Movimento_con_i_tastiMovimento con i tasti2014-09-21T17:52:49Z<p>Leoncino: Movimento con il mouse Scratch</p>
<hr />
<div>= Movimento con i tasti Scratch =<br />
<br />
== Movimento "classico" ==<br />
<br />
Per spostare uno sprite nelle 4 direzioni usando le frecce o altri tasti (es. “a s d w”) e ruotandolo&nbsp;nella direzione del moto, ci si aggancia all'evento '''“Quando si preme il tasto.....”''' come si vede nella seguente immagine:<br/>[[File:Movimenti1.png|File:Movimenti1.png]]<br/>Va gestito ogni tasto di movimento in maniera separata.&nbsp;<span style="line-height: 1.6;">In questo caso il comando '''“punta in&nbsp;direzione....” '''serve a direzionare lo sprite nella direzione del moto. Il numero di pixel di&nbsp;</span><span style="line-height: 1.6;">spostamento (3 nell'esempio) può essere variato per muovere più o meno velocemente lo sprite.</span><br />
<br />
Per ottenere un moto continuo è necessario tenere premuto il tasto della direzione del moto. Questo&nbsp;tipo di movimento si usa per muovere sprite lungo percorsi o labirinti.<br />
<br />
== <span style="line-height: 1.6;">Moto continuo&nbsp;</span> ==<br />
<br />
[[File:Movimenti2.png|File:Movimenti2.png]]<br/>Se si vuole un moto continuo, comandando soltanto la direzione di moto attraverso i tasti, è&nbsp;necessario utilizzare una variabile che conservi il tasto che di volta in volta viene premuto. Si può&nbsp;dunque produrre uno script come il seguente:<br/><br/>In questo caso si fa uso della variabile privata dello sprite “direzione” che viene impostata ogni volta che si preme un tasto,&nbsp;di un ciclo infinito (“per sempre”) in cui facciamo spostare lo sprite nella direzione definita dal&nbsp;tasto.<br />
[[Category:Scratch|M]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Movimento_con_i_tastiMovimento con i tasti2014-09-21T17:50:31Z<p>Leoncino: </p>
<hr />
<div>= Movimento con i tasti Scratch =<br />
<br />
== Movimento "classico" ==<br />
<br />
Per spostare uno sprite nelle 4 direzioni usando le frecce o altri tasti (es. “a s d w”) e ruotandolo&nbsp;nella direzione del moto, ci si aggancia all'evento '''“Quando si preme il tasto.....”''' come si vede nella seguente immagine:<br/>[[File:Movimenti1.png|File:Movimenti1.png]]<br/>Va gestito ogni tasto di movimento in maniera separata.&nbsp;<span style="line-height: 1.6;">In questo caso il comando '''“punta in&nbsp;direzione....” '''serve a direzionare lo sprite nella direzione del moto. Il numero di pixel di&nbsp;</span><span style="line-height: 1.6;">spostamento (3 nell'esempio) può essere variato per muovere più o meno velocemente lo sprite.</span><br />
<br />
Per ottenere un moto continuo è necessario tenere premuto il tasto della direzione del moto. Questo&nbsp;tipo di movimento si usa per muovere sprite lungo percorsi o labirinti.<br />
<br />
== <span style="line-height: 1.6;">Moto continuo&nbsp;</span> ==<br />
<br />
[[File:Movimenti2.png|File:Movimenti2.png]]<br/>Se si vuole un moto continuo, comandando soltanto la direzione di moto attraverso i tasti, è&nbsp;necessario utilizzare una variabile che conservi il tasto che di volta in volta viene premuto. Si può&nbsp;dunque produrre uno script come il seguente:<br/><br/>In questo caso si fa uso della variabile privata dello sprite “direzione” che viene impostata ogni volta che si preme un tasto,&nbsp;di un ciclo infinito (“per sempre”) in cui facciamo spostare lo sprite nella direzione definita dal&nbsp;tasto.<br />
[[Category:Scratch|Category:Scratch]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Tutorial:_Spara_ai_pallonciniTutorial: Spara ai palloncini2014-09-21T17:47:59Z<p>Leoncino: </p>
<hr />
<div>== Gioco Spara ai Palloncini (mentor) ==<br />
<br />
In questo gioco si fanno apparire dei palloncini dal basso e si fanno esplodere cliccandoci sopra con il mouse. La versione completa del gioco è scaricabile [http://kata.coderdojo.it/archivio/palloncini.sb dall'archivio]<br />
<br />
Si parte con uno sprite che rappresenta un palloncino con due (o più) costumi per l'animazione (si fa un ovale colorato e un cordino nero in due posizioni), e uno per quando viene colpito come si vede dall'immagine seguente:<br />
<br />
<br/>[[File:Palloncini.png|center|Palloncini.png]]<br />
<br />
<br/>Dopodiché si passa al mirino, basta fare una croce che segue il puntatore del mouse con il seguente script:<br />
<br />
<br/>[[File:Palloncini3.png|center|Palloncini3.png]]<br />
<br />
<br/><span style="line-height: 1.6;">Questo script oltre a seguire il puntatore del mouse invia il messaggio "'''bang'''" quanto viene fatto click. Il messaggio verrà intercettato dai palloncini che controllano se sono stati colpiti e gestiscono il punteggio.</span><br />
<br />
Lo script del palloncino è strutturato in tre parti: una gestisce il cambio di costume (qui due per semplicità, ma se ne possono aggiungere a volontà), un'altra i messaggi "'''bang'''", l'ultima il volo verticale:<br />
<br />
<br/>[[File:Palloncini1.png|center|Palloncini1.png]]<br />
<br />
Lo script è realizzato per incorporare tutta la logica nello sprite in modo che la duplicazione dello sprite stesso possa permettere di inserire ulteriori palloncini con un copia e incollo senza modifiche al codice.<br />
<br />
E' possibile realizzare più tipi di palloncini, differenziandone le caratteristiche, per esempio con diverse velocità, che danno punteggi diversi.<br />
<br />
Inoltre può essere inserito un decremento del punteggio se il palloncino arriva in cima.<br />
<br />
Come ultima cosa va gestito il fine gioco, gestendo ad esempio un cronometro.<br />
[[Category:Scratch|P]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Tutorial:_Spara_ai_pallonciniTutorial: Spara ai palloncini2014-09-21T17:41:38Z<p>Leoncino: </p>
<hr />
<div>== Gioco Spara ai Palloncini (mentor) ==<br />
<br />
In questo gioco si fanno apparire dei palloncini dal basso e si fanno esplodere cliccandoci sopra con il mouse.<br />
<br />
Si parte con uno sprite che rappresenta un palloncino con due (o più) costumi per l'animazione (si fa un ovale colorato e un cordino nero in due posizioni), e uno per quando viene colpito come si vede dall'immagine seguente:<br />
<br />
<br/>[[File:Palloncini.png|center|Palloncini.png]]<br />
<br />
<br/>Dopodiché si passa al mirino, basta fare una croce che segue il puntatore del mouse con il seguente script:<br />
<br />
<br/>[[File:Palloncini3.png|center|Palloncini3.png]]<br />
<br />
<br/><span style="line-height: 1.6;">Questo script oltre a seguire il puntatore del mouse invia il messaggio "'''bang'''" quanto viene fatto click. Il messaggio verrà intercettato dai palloncini che controllano se sono stati colpiti e gestiscono il punteggio.</span> Lo script del palloncino è strutturato in tre parti: una gestisce il cambio di costume, un'altra i messaggi "'''bang'''", l'ultima il volo verticale:<br />
<br />
<br/>[[File:Palloncini1.png|center|Palloncini1.png]]<br />
<br />
Lo script è realizzato per incorporare tutta la logica nello sprite in modo che la duplicazione dello sprite stesso possa permettere di inserire ulteriori palloncini con un copia e incollo senza modifiche al codice.<br />
<br />
E' possibile realizzare più tipi di palloncini, differenziandone le caratteristiche, per esempio con diverse velocità, che danno punteggi diversi.<br />
<br />
Inoltre può essere inserito un decremento del punteggio se il palloncino arriva in cima.<br />
<br />
Come ultima cosa va gestito il fine gioco, gestendo ad esempio un cronometro.<br />
[[Category:Scratch|P]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Tutorial:_Spara_ai_pallonciniTutorial: Spara ai palloncini2014-09-21T17:40:59Z<p>Leoncino: </p>
<hr />
<div>== Gioco Spara ai Palloncini (mentor) ==<br />
<br />
In questo gioco si fanno apparire dei palloncini dal basso e si fanno esplodere cliccandoci sopra con il mouse.<br />
<br />
Si parte con uno sprite che rappresenta un palloncino con due (o più) costumi per l'animazione (si fa un ovale colorato e un cordino nero in due posizioni), e uno per quando viene colpito come si vede dall'immagine seguente:<br />
<br />
<br/>[[File:Palloncini.png|left|Palloncini.png]]<br />
<br />
<br/>Dopodiché si passa al mirino, basta fare una croce che segue il puntatore del mouse con il seguente script:<br />
<br />
<br/>[[File:Palloncini3.png|left|Palloncini3.png]]<br />
<br />
<br/><span style="line-height: 1.6;">Questo script oltre a seguire il puntatore del mouse invia il messaggio "'''bang'''" quanto viene fatto click. Il messaggio verrà intercettato dai palloncini che controllano se sono stati colpiti e gestiscono il punteggio.</span> Lo script del palloncino è strutturato in tre parti: una gestisce il cambio di costume, un'altra i messaggi "'''bang'''", l'ultima il volo verticale:<br />
<br />
<br/>[[File:Palloncini1.png|left|Palloncini1.png]]<br />
<br />
Lo script è realizzato per incorporare tutta la logica nello sprite in modo che la duplicazione dello sprite stesso possa permettere di inserire ulteriori palloncini con un copia e incollo senza modifiche al codice.<br />
<br />
E' possibile realizzare più tipi di palloncini, differenziandone le caratteristiche, per esempio con diverse velocità, che danno punteggi diversi.<br />
<br />
Inoltre può essere inserito un decremento del punteggio se il palloncino arriva in cima.<br />
<br />
Come ultima cosa va gestito il fine gioco, gestendo ad esempio un cronometro.<br />
[[Category:Scratch|P]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Tutorial:_Spara_ai_pallonciniTutorial: Spara ai palloncini2014-09-21T17:40:03Z<p>Leoncino: </p>
<hr />
<div>== Gioco Spara ai Palloncini (mentor) ==<br />
<br />
In questo gioco si fanno apparire dei palloncini dal basso e si fanno esplodere cliccandoci sopra con il mouse.<br/><br />
<br />
Si parte con uno sprite che rappresenta un palloncino con due (o più) costumi per l'animazione (si fa un ovale colorato e un cordino nero in due posizioni), e uno per quando viene colpito come si vede dall'immagine seguente: <br/>[[File:Palloncini.png|left|Palloncini.png]]<br/><br />
Dopodiché si passa al mirino, basta fare una croce che segue il puntatore del mouse con il seguente script:<br />
<br/>[[File:Palloncini3.png|left|Palloncini3.png]]<br/><br />
<span style="line-height: 1.6;">Questo script oltre a seguire il puntatore del mouse invia il messaggio "'''bang'''" quanto viene fatto click. Il messaggio verrà intercettato dai palloncini che controllano se sono stati colpiti e gestiscono il punteggio.</span><br />
Lo script del palloncino è strutturato in tre parti: una gestisce il cambio di costume, un'altra i messaggi "'''bang'''", l'ultima il volo verticale:<br />
<br/><br />
[[File:Palloncini1.png|left|Palloncini1.png]]<br />
<br/><br />
Lo script è realizzato per incorporare tutta la logica nello sprite in modo che la duplicazione dello sprite stesso possa permettere di inserire ulteriori palloncini con un copia e incollo senza modifiche al codice.<br />
<br />
E' possibile realizzare più tipi di palloncini, differenziandone le caratteristiche, per esempio con diverse velocità, che danno punteggi diversi.<br />
<br />
Inoltre può essere inserito un decremento del punteggio se il palloncino arriva in cima.<br />
<br />
Come ultima cosa va gestito il fine gioco, gestendo ad esempio un cronometro.<br />
[[Category:Scratch|P]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Tutorial:_Spara_ai_pallonciniTutorial: Spara ai palloncini2014-09-21T17:39:14Z<p>Leoncino: </p>
<hr />
<div>== Gioco Spara ai Palloncini (mentor) ==<br />
<br />
In questo gioco si fanno apparire dei palloncini dal basso e si fanno esplodere cliccandoci sopra con il mouse.<br />
<br />
Si parte con uno sprite che rappresenta un palloncino con due (o più) costumi per l'animazione (si fa un ovale colorato e un cordino nero in due posizioni), e uno per quando viene colpito come si vede dall'immagine seguente: [[File:Palloncini.png|left|Palloncini.png]]<br />
<br />
Dopodiché si passa al mirino, basta fare una croce che segue il puntatore del mouse con il seguente script:<br />
<br />
[[File:Palloncini3.png|left|Palloncini3.png]]<br />
<br />
<span style="line-height: 1.6;">Questo script oltre a seguire il puntatore del mouse invia il messaggio "'''bang'''" quanto viene fatto click. Il messaggio verrà intercettato dai palloncini che controllano se sono stati colpiti e gestiscono il punteggio.</span><br />
<br />
Lo script del palloncino è strutturato in tre parti: una gestisce il cambio di costume, un'altra i messaggi "'''bang'''", l'ultima il volo verticale:<br />
<br />
[[File:Palloncini1.png|left|Palloncini1.png]]<br />
<br />
Lo script è realizzato per incorporare tutta la logica nello sprite in modo che la duplicazione dello sprite stesso possa permettere di inserire ulteriori palloncini con un copia e incollo senza modifiche al codice.<br />
<br />
E' possibile realizzare più tipi di palloncini, differenziandone le caratteristiche, per esempio con diverse velocità, che danno punteggi diversi.<br />
<br />
Inoltre può essere inserito un decremento del punteggio se il palloncino arriva in cima.<br />
<br />
Come ultima cosa va gestito il fine gioco, gestendo ad esempio un cronometro.<br />
[[Category:Scratch|P]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Tutorial:_Spara_ai_pallonciniTutorial: Spara ai palloncini2014-09-21T17:38:46Z<p>Leoncino: </p>
<hr />
<div>== Gioco Spara ai Palloncini (mentor) ==<br />
<br />
In questo gioco si fanno apparire dei palloncini dal basso e si fanno esplodere cliccandoci sopra con il mouse.<br />
<br />
Si parte con uno sprite che rappresenta un palloncino con due (o più) costumi per l'animazione (si fa un ovale colorato e un cordino nero in due posizioni), e uno per quando viene colpito come si vede dall'immagine seguente: [[File:Palloncini.png|frameless|Palloncini.png]]<br />
<br />
Dopodiché si passa al mirino, basta fare una croce che segue il puntatore del mouse con il seguente script:<br />
<br />
[[File:Palloncini3.png|left|Palloncini3.png]]<br />
<br />
<span style="line-height: 1.6;">Questo script oltre a seguire il puntatore del mouse invia il messaggio "'''bang'''" quanto viene fatto click. Il messaggio verrà intercettato dai palloncini che controllano se sono stati colpiti e gestiscono il punteggio.</span><br />
<br />
Lo script del palloncino è strutturato in tre parti: una gestisce il cambio di costume, un'altra i messaggi "'''bang'''", l'ultima il volo verticale:<br />
<br />
[[File:Palloncini1.png|left|Palloncini1.png]]<br />
<br />
Lo script è realizzato per incorporare tutta la logica nello sprite in modo che la duplicazione dello sprite stesso possa permettere di inserire ulteriori palloncini con un copia e incollo senza modifiche al codice.<br />
<br />
E' possibile realizzare più tipi di palloncini, differenziandone le caratteristiche, per esempio con diverse velocità, che danno punteggi diversi.<br />
<br />
Inoltre può essere inserito un decremento del punteggio se il palloncino arriva in cima.<br />
<br />
Come ultima cosa va gestito il fine gioco, gestendo ad esempio un cronometro.<br />
[[Category:Scratch|P]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Tutorial:_Spara_ai_pallonciniTutorial: Spara ai palloncini2014-09-21T17:37:28Z<p>Leoncino: Creata pagina con "== Gioco Spara ai Palloncini (mentor) == In questo gioco si fanno apparire dei palloncini dal basso e si fanno esplodere cliccandoci sopra con il mouse. Si parte con uno spr..."</p>
<hr />
<div>== Gioco Spara ai Palloncini (mentor) ==<br />
<br />
In questo gioco si fanno apparire dei palloncini dal basso e si fanno esplodere cliccandoci sopra con il mouse.<br />
<br />
Si parte con uno sprite che rappresenta un palloncino con due (o più) costumi per l'animazione (si fa un ovale colorato e un cordino nero in due posizioni), e uno per quando viene colpito come si vede dall'immagine seguente:<br/>[[File:Palloncini.png|frameless|Palloncini.png]]<br />
<br />
Dopodiché si passa al mirino, basta fare una croce che segue il puntatore del mouse con il seguente script:<br />
<br />
[[File:Palloncini3.png|left]]<br />
<br />
<span style="line-height: 1.6;">Questo script oltre a seguire il puntatore del mouse invia il messaggio "'''bang'''" quanto viene fatto click. Il messaggio verrà intercettato dai palloncini che controllano se sono stati colpiti e gestiscono il punteggio.</span><br />
<br />
<span style="line-height: 1.6;"></span>Lo script del palloncino è strutturato in tre parti: una gestisce il cambio di costume, un'altra i messaggi "'''bang'''", l'ultima il volo verticale:<br />
<br />
[[File:Palloncini1.png|left]]<br />
<br />
<span style="line-height: 1.6;"></span>Lo script è realizzato per incorporare tutta la logica nello sprite in modo che la duplicazione dello sprite stesso possa permettere di inserire ulteriori palloncini con un copia e incollo senza modifiche al codice.<br />
<br />
E' possibile realizzare più tipi di palloncini, differenziandone le caratteristiche, per esempio con diverse velocità, che danno punteggi diversi.<br />
<br />
Inoltre può essere inserito un decremento del punteggio se il palloncino arriva in cima.<br />
<br />
Come ultima cosa va gestito il fine gioco, gestendo ad esempio un cronometro.<br />
<br />
[[Category:Scratch|P]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=File:Palloncini.pngFile:Palloncini.png2014-09-21T17:20:29Z<p>Leoncino: </p>
<hr />
<div></div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Movimento_con_il_mouse_ScratchMovimento con il mouse Scratch2014-09-21T17:13:04Z<p>Leoncino: </p>
<hr />
<div>= Movimento con il Mouse =<br />
<br />
<span style="line-height: 1.6;">Muovere uno speite utilizzando il mouse può essere fatto in vari modi.</span><br />
<br />
== Inseguimento del Mouse ==<br />
<br />
Si realizza con il blocco "punta verso...." per far puntare lo sprite verso il mouse, e con "fai ... passi" per muovere lo sprite, come nell'esempio seguente:<br/>[[File:Movimento mouse.png|File:Movimento mouse.png]]<br />
<br />
Questo script ha come effetto sgradevole che se il mouse si ferma lo sprite una volta raggiunto il puntatore "impazzisce", ovvero inizia a ribaltarsi all'infinito.<br />
<br />
Per evitare questo effetto si può modificare lo script introducendo il controllo che se lo sprite è troppo vicino al puntatore il movimento non viene fatto così come mostrato di seguito:<br/>[[File:Movimento mouse 2.png|File:Movimento mouse 2.png]]<br />
<br />
Si può aggiungere anche un po' di animazione facendo cambiare il costume allo sprite a ogni movimento:<br/>[[File:Movimento mouse 3.png|File:Movimento mouse 3.png]]<br />
<br />
Si può anche gestire un mirino per i giochi di sparo, realizzando uno sprite con un croce o simile e utilizzano il comando "raggiungi puntatore del mouse", lo script seguente invia anche un messaggio se si fa click con il mouse<br/>[[File:Puntatore mouse.png|File:Puntatore mouse.png]]<br />
[[Category:Scratch|Category:Scratch]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Movimento_con_il_mouse_ScratchMovimento con il mouse Scratch2014-09-21T17:11:57Z<p>Leoncino: </p>
<hr />
<div>= Movimento con il Mouse =<br />
<br />
<span style="line-height: 1.6;">Muovere uno speite utilizzando il mouse può essere fatto in vari modi.</span><br />
<br />
== Inseguimento del Mouse ==<br />
<br />
Si realizza con il blocco "punta verso...." per far puntare lo sprite verso il mouse, e con "fai ... passi" per muovere lo sprite, come nell'esempio seguente:<br/>[[File:Movimento mouse.png|File:Movimento mouse.png]]<br />
<br />
Questo script ha come effetto sgradevole che se il mouse si ferma lo sprite una volta raggiunto il puntatore "impazzisce", ovvero inizia a ribaltarsi all'infinito.<br />
<br />
Per evitare questo effetto si può modificare lo script introducendo il controllo che se lo sprite è troppo vicino al puntatore il movimento non viene fatto così come mostrato di seguito:<br/>[[File:Movimento mouse 2.png|File:Movimento mouse 2.png]]<br />
<br />
Si può aggiungere anche un po' di animazione facendo cambiare il costume allo sprite a ogni movimento:<br/>[[File:Movimento mouse 3.png|File:Movimento mouse 3.png]]<br />
<br />
Si può anche gestire un mirino per i giochi di sparo, realizzando uno sprite con un croce o simile e utilizzano il comando "raggiungi puntatore del mouse"<br/><br />
[[File:Puntatore mouse.png]]<br />
[[Category:Scratch|Category:Scratch]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=File:Palloncini3.pngFile:Palloncini3.png2014-09-21T17:10:58Z<p>Leoncino: </p>
<hr />
<div></div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=File:Palloncini1.pngFile:Palloncini1.png2014-09-21T17:10:44Z<p>Leoncino: Leoncino ha caricato una nuova versione di &quot;File:Palloncini1.png&quot;</p>
<hr />
<div></div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=File:Palloncini2.pngFile:Palloncini2.png2014-09-21T17:10:25Z<p>Leoncino: </p>
<hr />
<div></div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=File:Palloncini1.pngFile:Palloncini1.png2014-09-21T17:10:17Z<p>Leoncino: </p>
<hr />
<div></div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=File:Puntatore_mouse.pngFile:Puntatore mouse.png2014-09-21T17:09:28Z<p>Leoncino: </p>
<hr />
<div></div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Movimento_con_il_mouse_ScratchMovimento con il mouse Scratch2014-09-21T17:08:30Z<p>Leoncino: </p>
<hr />
<div>= Movimento con il Mouse =<br />
<br />
<span style="line-height: 1.6;">Muovere uno speite utilizzando il mouse può essere fatto in vari modi.</span><br />
<br />
== Inseguimento del Mouse ==<br />
<br />
Si realizza con il blocco "punta verso...." per far puntare lo sprite verso il mouse, e con "fai ... passi" per muovere lo sprite, come nell'esempio seguente:<br/>[[File:Movimento mouse.png|File:Movimento mouse.png]]<br />
<br />
Questo script ha come effetto sgradevole che se il mouse si ferma lo sprite una volta raggiunto il puntatore "impazzisce", ovvero inizia a ribaltarsi all'infinito.<br />
<br />
Per evitare questo effetto si può modificare lo script introducendo il controllo che se lo sprite è troppo vicino al puntatore il movimento non viene fatto così come mostrato di seguito:<br/>[[File:Movimento mouse 2.png|File:Movimento mouse 2.png]]<br />
<br />
Si può aggiungere anche un po' di animazione facendo cambiare il costume allo sprite a ogni movimento:<br/>[[File:Movimento mouse 3.png|File:Movimento mouse 3.png]]<br />
<br />
Si può anche gestire un mirino per i giochi di sparo, realizzando uno sprite con un croce o simile e utilizzano il comando "raggiungi puntatore del mouse"<br />
<br />
<br />
[[Category:Scratch|Category:Scratch]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Movimento_con_il_mouse_ScratchMovimento con il mouse Scratch2014-08-29T17:11:48Z<p>Leoncino: </p>
<hr />
<div>= Movimento con il Mouse =<br />
<br />
<span style="line-height: 1.6;">Muovere uno speite utilizzando il mouse può essere fatto in vari modi.</span><br />
<br />
== Inseguimento del Mouse ==<br />
<br />
Si realizza con il blocco "punta verso...." per far puntare lo sprite verso il mouse, e con "fai ... passi" per muovere lo sprite, come nell'esempio seguente:<br/>[[File:Movimento mouse.png|File:Movimento mouse.png]]<br />
<br />
Questo script ha come effetto sgradevole che se il mouse si ferma lo sprite una volta raggiunto il puntatore "impazzisce", ovvero inizia a ribaltarsi all'infinito.<br />
<br />
Per evitare questo effetto si può modificare lo script introducendo il controllo che se lo sprite è troppo vicino al puntatore il movimento non viene fatto così come mostrato di seguito:<br/>[[File:Movimento mouse 2.png|File:Movimento mouse 2.png]]<br />
<br />
Si può aggiungere anche un po' di animazione facendo cambiare il costume allo sprite a ogni movimento:<br/><br />
[[File:Movimento mouse 3.png]]<br />
<br />
<br />
<br />
[[Category:Scratch|Category:Scratch]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=File:Movimento_mouse_3.pngFile:Movimento mouse 3.png2014-08-29T17:11:18Z<p>Leoncino: </p>
<hr />
<div></div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Movimento_con_il_mouse_ScratchMovimento con il mouse Scratch2014-08-29T17:08:36Z<p>Leoncino: </p>
<hr />
<div>= Movimento con il Mouse =<br />
<br />
<span style="line-height: 1.6;">Muovere uno speite utilizzando il mouse può essere fatto in vari modi.</span><br />
<br />
== Inseguimento del Mouse ==<br />
<br />
Si realizza con il blocco "punta verso...." per far puntare lo sprite verso il mouse, e con "fai ... passi" per muovere lo sprite, come nell'esempio seguente:<br/>[[File:Movimento mouse.png|File:Movimento mouse.png]]<br />
<br />
Questo script ha come effetto sgradevole che se il mouse si ferma lo sprite una volta raggiunto il puntatore "impazzisce", ovvero inizia a ribaltarsi all'infinito.<br />
<br />
Per evitare questo effetto si può modificare lo script introducendo il controllo che se lo sprite è troppo vicino al puntatore il movimento non viene fatto così come mostrato di seguito:<br/><br />
[[File:Movimento mouse 2.png]]<br />
<br />
<br />
<br />
[[Category:Scratch|Category:Scratch]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=File:Movimento_mouse_2.pngFile:Movimento mouse 2.png2014-08-29T17:08:07Z<p>Leoncino: </p>
<hr />
<div></div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Movimento_con_il_mouse_ScratchMovimento con il mouse Scratch2014-08-29T16:58:57Z<p>Leoncino: Creata pagina con "= Movimento con il Mouse = <span style="line-height: 1.6;">Muovere uno speite utilizzando il mouse può essere fatto in vari modi.</span> == Inseguimento del Mouse == Si re..."</p>
<hr />
<div>= Movimento con il Mouse =<br />
<br />
<span style="line-height: 1.6;">Muovere uno speite utilizzando il mouse può essere fatto in vari modi.</span><br />
<br />
== Inseguimento del Mouse ==<br />
<br />
Si realizza con il blocco "punta verso...." per far puntare lo sprite verso il mouse, e con "fai ... passi" per muovere lo sprite, come nell'esempio seguente:<br/><br />
[[File:Movimento mouse.png]]<br />
<br />
[[Category:Scratch]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=File:Movimento_mouse.pngFile:Movimento mouse.png2014-08-29T16:55:39Z<p>Leoncino: </p>
<hr />
<div></div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Movimento_con_i_tastiMovimento con i tasti2014-08-29T16:44:22Z<p>Leoncino: </p>
<hr />
<div>= Movimento con i tasti =<br />
<br />
== Movimento "classico" ==<br />
<br />
Per spostare uno sprite nelle 4 direzioni usando le frecce o altri tasti (es. “a s d w”) e ruotandolo&nbsp;nella direzione del moto, ci si aggancia all'evento '''“Quando si preme il tasto.....”''' come si vede nella seguente immagine:<br/>[[File:Movimenti1.png|File:Movimenti1.png]]<br/>Va gestito ogni tasto di movimento in maniera separata.&nbsp;<span style="line-height: 1.6;">In questo caso il comando '''“punta in&nbsp;direzione....” '''serve a direzionare lo sprite nella direzione del moto. Il numero di pixel di&nbsp;</span><span style="line-height: 1.6;">spostamento (3 nell'esempio) può essere variato per muovere più o meno velocemente lo sprite.</span><br />
<br />
<span style="line-height: 1.6;"></span>Per ottenere un moto continuo è necessario tenere premuto il tasto della direzione del moto. Questo&nbsp;tipo di movimento si usa per muovere sprite lungo percorsi o labirinti.<span style="line-height: 1.6;"></span><br />
<br />
== <span style="line-height: 1.6;">Moto continuo&nbsp;</span> ==<br />
<br />
[[File:Movimenti2.png|File:Movimenti2.png]]<br/>Se si vuole un moto continuo, comandando soltanto la direzione di moto attraverso i tasti, è&nbsp;necessario utilizzare una variabile che conservi il tasto che di volta in volta viene premuto. Si può&nbsp;dunque produrre uno script come il seguente:<br/><br/>In questo caso si fa uso della variabile privata dello sprite “direzione” che viene impostata ogni volta che si preme un tasto,&nbsp;di un ciclo infinito (“per sempre”) in cui facciamo spostare lo sprite nella direzione definita dal&nbsp;tasto.<br />
[[Category:Scratch|Category:Scratch]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Movimento_con_i_tastiMovimento con i tasti2014-08-29T16:39:17Z<p>Leoncino: </p>
<hr />
<div>= Movimento con i tasti =<br />
<br />
Per spostare uno sprite nelle 4 direzioni usando le frecce o altri tasti (es. “a s d w”) e ruotandolo&nbsp;nella direzione del moto, ci si aggancia all'evento “Quando si preme il tasto.....” come si vede nella seguente immagine<br/>[[File:Movimenti1.png|File:Movimenti1.png]]<br/>Va gestito ogni tasto di movimento in maniera separata.&nbsp;<span style="line-height: 1.6;">In questo caso il comando “punta in&nbsp;direzione....” serve a direzionare lo sprite nella direzione del moto. Il numero di pixel di&nbsp;</span><span style="line-height: 1.6;">spostamento (3 nell'esempio) può essere variato per muovere più o meno velocemente lo sprite.</span><br />
<br />
Per ottenere un moto continuo è necessario tenere premuto il tasto della direzione del moto. Questo&nbsp;tipo di movimento si usa per muovere sprite lungo percorsi o labirinti.<br/>[[File:Movimenti2.png|File:Movimenti2.png]]<br/>Se si vuole un moto continuo, comandando soltanto la direzione di moto attraverso i tasti, è&nbsp;necessario utilizzare una variabile che conservi il tasto che di volta in volta viene premuto. Si può&nbsp;dunque produrre uno script come il seguente:<br/><br/>In questo caso si fa uso della variabile privata dello sprite “direzione” che viene impostata ogni volta che si preme un tasto,&nbsp;di un ciclo infinito (“per sempre”) in cui facciamo spostare lo sprite nella direzione definita dal&nbsp;tasto.<br />
[[Category:Scratch|Category:Scratch]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_PHPGioco a bivi PHP2014-08-29T16:32:27Z<p>Leoncino: </p>
<hr />
<div>= Gioco a bivi PHP =<br />
<br />
<span style="color: rgb(0, 0, 0); font-family: sans-serif; line-height: 19.5px;">Il gioco a bivi descritto nella sezione&nbsp;</span>[http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html]<span style="color: rgb(0, 0, 0); font-family: sans-serif; line-height: 19.5px;">&nbsp;rivisto in PHP.</span><br />
<br />
E' necessario disporre di un server WEB con l'interprete PHP e una modalità di pubblicazione (FTP, cartella condivisa....) sul server.<br />
<br />
<span style="color: rgb(0, 0, 0); font-family: sans-serif; line-height: 19.5px;">Si parte dal gioco a bivi minimale, semplicemente rinominando i file da .html a .php, modificando i link interni in modo che tutto continui a funzionare. Pertanto i file index.html, entra.html e salta.html diventano index.php, entra.php, salta.php.</span><br />
<br />
<span style="color: rgb(0, 0, 0); font-family: sans-serif; line-height: 19.5px;">Facciamo notare ai ragazzi che non è cambiato sostanzialmente nulla rispetto a prima.</span><br />
<br />
<font color="#000000" face="sans-serif"><span style="line-height: 19.5px;">Il passo successivo è il seguente codice php:</span></font><br />
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;"><?php<br/><span style="background-color:#FFFF00;">$v_scelta=$_GET["scelta"];</span><br/><span style="background-color:#FFFF00;">switch ($v_scelta){</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;case "entra":</span><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$stanza='<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei dentro al castello&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Complimenti&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;img src="sala.jpg" /&gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;a href ="index.php"&gt;Torna Fuori&lt;/a&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/html&gt;';<br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;break;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;case "salta":</span><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$stanza='<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;img src="coccodrillo.jpg" /&gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;a href ="index.php"&gt;Ricomincia&lt;/a&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/html&gt;';<br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;break;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;default:</span><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$stanza='<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei davanti a un castello circondato da un fossato pieno di coccodrilli.&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Puoi &lt;i&gt;entrare&lt;/i&gt; nel castello o &lt;i&gt;saltare&lt;/i&gt; nel fossato&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;img src="castello.jpg" /&gt;&lt;/p&gt;<br/>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span style="background-color:#FFFF00;">&nbsp;&lt;a href ="index.php?scelta=entra"&gt;Entra&lt;/a&gt; o &lt;a href="index.php?scelta=salta"&gt;Salta&lt;/a&gt;</span><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/html&gt;';<br/>}<br/><span style="background-color:#FFFF00;">echo $stanza;</span><br/>?></span><br/></div><br />
In pratica si legge il parametro passato in GET, si usa un costrutto '''switch''' per selezionare la destinazione, e si valorizza la variabile $stanza con il codice html che rappresenta la destinazione.<br />
<br />
Va fatto notare come si definesce un parametro in GET.[[Category:PHP]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_PHPGioco a bivi PHP2014-08-29T16:31:33Z<p>Leoncino: Creata pagina con "= <span style="color: rgb(0, 0, 0); font-family: sans-serif; line-height: 19.5px;"></span>Gioco a bivi PHP = <span style="color: rgb(0, 0, 0); font-family: sans-serif; line-h..."</p>
<hr />
<div>= <span style="color: rgb(0, 0, 0); font-family: sans-serif; line-height: 19.5px;"></span>Gioco a bivi PHP =<br />
<br />
<span style="color: rgb(0, 0, 0); font-family: sans-serif; line-height: 19.5px;">Il gioco a bivi descritto nella sezione&nbsp;</span>[http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html]<span style="color: rgb(0, 0, 0); font-family: sans-serif; line-height: 19.5px;">&nbsp;rivisto in PHP.</span><br />
<br />
<span style="color: rgb(0, 0, 0); font-family: sans-serif; line-height: 19.5px;"></span>E' necessario disporre di un server WEB con l'interprete PHP e una modalità di pubblicazione (FTP, cartella condivisa....) sul server.<br />
<br />
<span style="color: rgb(0, 0, 0); font-family: sans-serif; line-height: 19.5px;">Si parte dal gioco a bivi minimale, semplicemente rinominando i file da .html a .php, modificando i link interni in modo che tutto continui a funzionare. Pertanto i file index.html, entra.html e salta.html diventano index.php, entra.php, salta.php.</span><br />
<br />
<span style="color: rgb(0, 0, 0); font-family: sans-serif; line-height: 19.5px;">Facciamo notare ai ragazzi che non è cambiato sostanzialmente nulla rispetto a prima.</span><br />
<br />
<font color="#000000" face="sans-serif"><span style="line-height: 19.5px;">Il passo successivo è il seguente codice php:</span></font><br />
<font color="#000000" face="sans-serif"><span style="line-height: 19.5px;"></span></font><div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;"></span><span style="font-family:courier new,courier,monospace;"><?php<br/><span style="background-color:#FFFF00;">$v_scelta=$_GET["scelta"];</span><br/><span style="background-color:#FFFF00;">switch ($v_scelta){</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;case "entra":</span><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$stanza='<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei dentro al castello&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Complimenti&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;img src="sala.jpg" /&gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;a href ="index.php"&gt;Torna Fuori&lt;/a&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/html&gt;';<br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;break;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;case "salta":</span><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$stanza='<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;img src="coccodrillo.jpg" /&gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;a href ="index.php"&gt;Ricomincia&lt;/a&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/html&gt;';<br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;break;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;default:</span><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$stanza='<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei davanti a un castello circondato da un fossato pieno di coccodrilli.&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Puoi &lt;i&gt;entrare&lt;/i&gt; nel castello o &lt;i&gt;saltare&lt;/i&gt; nel fossato&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;img src="castello.jpg" /&gt;&lt;/p&gt;<br/>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span style="background-color:#FFFF00;">&nbsp;&lt;a href ="index.php?scelta=entra"&gt;Entra&lt;/a&gt; o &lt;a href="index.php?scelta=salta"&gt;Salta&lt;/a&gt;</span><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/html&gt;';<br/>}<br/><span style="background-color:#FFFF00;">echo $stanza;</span><br/>?></span><br/></div><br />
In pratica si legge il parametro passato in GET, si usa un costrutto '''switch''' per selezionare la destinazione, e si valorizza la variabile $stanza con il codice html che rappresenta la destinazione.<br />
<br />
Va fatto notare come si definesce un parametro in GET.</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascriptGioco a bivi javascript2014-08-29T16:21:54Z<p>Leoncino: </p>
<hr />
<div>= Gioco a bivi JAVASCRIPT =<br />
<br />
Il gioco a bivi descritto nella sezione [http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html]&nbsp;rivisto con il Javascript. <br />
<br />
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.<br />
<br />
E' utile articolare in passi l'esercizio fornendo il seguente codice html:<br />
<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;&lt;div id="inizio"&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;&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;&lt;div id="fossato"&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;&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;&lt;div id="salone"&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;&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><br />
Questo codice, se visualizzato nel browser, mostra &nbsp;i tre ambienti di gioco&nbsp;uno di seguito all'altro.<br />
<br />
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:<br />
<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><br />
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.<br />
<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><br />
L'ultimo passo è inserire qualche abbellimento tramite CSS:<br />
<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]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Categoria:PHPCategoria:PHP2014-08-29T16:19:49Z<p>Leoncino: Creata pagina con "Category:Principale"</p>
<hr />
<div>[[Category:Principale]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=PHPPHP2014-08-29T16:19:36Z<p>Leoncino: PHP</p>
<hr />
<div>PHP (acronimo ricorsivo:&nbsp;PHP Hypertext Processor) è un linguaggio di programmazione molto usato per la realizzazione di applicazioni WEB[[Category:PHP]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascriptGioco a bivi javascript2014-08-29T15:53:20Z<p>Leoncino: </p>
<hr />
<div>Il gioco a bivi descritto nella sezione [http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html]&nbsp;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.<br />
<br />
E' utile articolare in passi l'esercizio fornendo il seguente codice html:<br />
<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;&lt;div id="inizio"&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;&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;&lt;div id="fossato"&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;&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;&lt;div id="salone"&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;&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><br />
Questo codice, se visualizzato nel browser, mostra &nbsp;i tre ambienti di gioco&nbsp;uno di seguito all'altro.<br />
<br />
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:<br />
<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><span style="font-family:courier new,courier,monospace;"></span><br />
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.<br />
<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 &egrave; 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&rsquo;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&rsquo;&egrave; 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;<br/></span></div><br />
L'ultimo passo è inserire qualche abbellimento tramite CSS:<br />
<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 &egrave; 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&rsquo;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&rsquo;&egrave; 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;<br/></span></div><br />
<br />
<br />
[[Category:Javascript]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascriptGioco a bivi javascript2014-08-29T15:45:11Z<p>Leoncino: </p>
<hr />
<div>Il gioco a bivi descritto nella sezione [http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html]&nbsp;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.<br />
<br />
E' utile articolare in passi l'esercizio fornendo il seguente codice html:<br />
<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;&lt;div id="inizio"&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;&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;&lt;div id="fossato"&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;&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;&lt;div id="salone"&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;&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><br />
Questo codice, se visualizzato nel browser, mostra &nbsp;i tre ambienti di gioco&nbsp;uno di seguito all'altro.<br />
<br />
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:<br />
<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>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascriptGioco a bivi javascript2014-08-29T15:44:16Z<p>Leoncino: </p>
<hr />
<div>Il gioco a bivi descritto nella sezione [http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html]&nbsp;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.<br />
<br />
E' utile articolare in passi l'esercizio fornendo il seguente codice html:<br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html><br />
&nbsp;&nbsp; &nbsp;<head><br />
&nbsp;&nbsp; &nbsp;<title>Gioco dei bivi col JavaScript</title><br />
&nbsp;&nbsp; &nbsp;</head><br />
&nbsp;&nbsp; &nbsp;<body><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h1>Gioco dei bivi col JavaScript</h1><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="inizio"><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Davanti al ponte levatoio</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="mi getto nel fossato pieno d'acqua"/><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="entro dalla porta principale" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato"><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il fossato intorno al Castello</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ehm...</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>C’erano i coccodrilli...</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Che brutta fine! Mi dispiace.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="ricomincia" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="salone"><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il Salone del Castello</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sei entrato nel castello.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Complimenti......</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" name="ricomincia" value="ricomincia" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;</body><br />
</html></pre><br />
Questo codice, se visualizzato nel browser, mostra &nbsp;i tre ambienti di gioco&nbsp;uno di seguito all'altro.<br />
<br />
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:<br />
<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;&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;&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;&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;&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>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascriptGioco a bivi javascript2014-08-29T15:43:46Z<p>Leoncino: </p>
<hr />
<div>Il gioco a bivi descritto nella sezione [http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html]&nbsp;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.<br />
<br />
E' utile articolare in passi l'esercizio fornendo il seguente codice html:<br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html><br />
&nbsp;&nbsp; &nbsp;<head><br />
&nbsp;&nbsp; &nbsp;<title>Gioco dei bivi col JavaScript</title><br />
&nbsp;&nbsp; &nbsp;</head><br />
&nbsp;&nbsp; &nbsp;<body><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h1>Gioco dei bivi col JavaScript</h1><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="inizio"><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Davanti al ponte levatoio</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="mi getto nel fossato pieno d'acqua"/><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="entro dalla porta principale" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato"><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il fossato intorno al Castello</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ehm...</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>C’erano i coccodrilli...</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Che brutta fine! Mi dispiace.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="ricomincia" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="salone"><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il Salone del Castello</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sei entrato nel castello.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Complimenti......</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" name="ricomincia" value="ricomincia" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;</body><br />
</html></pre><br />
Questo codice, se visualizzato nel browser, mostra &nbsp;i tre ambienti di gioco&nbsp;uno di seguito all'altro.<br />
<br />
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:<br />
<br />
<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;&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;&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;&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;&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>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascriptGioco a bivi javascript2014-08-29T15:41:44Z<p>Leoncino: Creata pagina con "Il gioco a bivi descritto nella sezione [http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html]&nbsp;rivisto con il Javascript. In pratica non si usano link a p..."</p>
<hr />
<div>Il gioco a bivi descritto nella sezione [http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html]&nbsp;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.<br />
<br />
E' utile articolare in passi l'esercizio fornendo il seguente codice html:<br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html><br />
&nbsp;&nbsp; &nbsp;<head><br />
&nbsp;&nbsp; &nbsp;<title>Gioco dei bivi col JavaScript</title><br />
&nbsp;&nbsp; &nbsp;</head><br />
&nbsp;&nbsp; &nbsp;<body><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h1>Gioco dei bivi col JavaScript</h1><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="inizio"><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Davanti al ponte levatoio</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sembra un luogo molto pericoloso, ma il ponte levatoio &egrave; abbassato. Potrebbe essere una trappola?</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="mi getto nel fossato pieno d'acqua"/><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="entro dalla porta principale" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato"><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il fossato intorno al Castello</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ehm...</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>C&rsquo;erano i coccodrilli...</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Che brutta fine! Mi dispiace.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="ricomincia" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="salone"><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il Salone del Castello</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sei entrato nel castello.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>C&rsquo;&egrave; un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Complimenti......</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" name="ricomincia" value="ricomincia" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;</body><br />
</html></pre><br />
Questo codice, se visualizzato nel browser, mostra &nbsp;i tre ambienti di gioco&nbsp;uno di seguito all'altro. <br />
<br />
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:<br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html><br />
&nbsp;&nbsp; &nbsp;<head><br />
&nbsp;&nbsp; &nbsp;<title>Gioco dei bivi col JavaScript</title><br />
&nbsp;&nbsp; &nbsp;</head><br />
&nbsp;&nbsp; &nbsp;<body><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h1>Gioco dei bivi col JavaScript</h1><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;<h2>Davanti al ponte levatoio</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sembra un luogo molto pericoloso, ma il ponte levatoio &egrave; abbassato. Potrebbe essere una trappola?</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="mi getto nel fossato pieno d'acqua"/><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="entro dalla porta principale" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&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;<h2>Il fossato intorno al Castello</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ehm...</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>C&rsquo;erano i coccodrilli...</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Che brutta fine! Mi dispiace.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="ricomincia" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&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;<h2>Il Salone del Castello</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sei entrato nel castello.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>C&rsquo;&egrave; un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Complimenti......</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" name="ricomincia" value="ricomincia" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;</body><br />
</html><br />
</pre></div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Categoria:JavascriptCategoria:Javascript2014-08-29T15:31:56Z<p>Leoncino: Creata pagina con "Category:Principale"</p>
<hr />
<div>[[Category:Principale]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=JavascriptJavascript2014-08-29T15:31:42Z<p>Leoncino: Creata pagina con "JavaScript è un linguaggio utilizzato nelle pagine web per aggiungere componenti dinamici.Category:javascript"</p>
<hr />
<div>JavaScript è un linguaggio utilizzato nelle pagine web per aggiungere componenti dinamici.[[Category:javascript]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_htmlGioco a bivi html2014-08-29T15:15:24Z<p>Leoncino: </p>
<hr />
<div>= Gioco a bivi: Avventura nel castello =<br />
<br />
Si trae ispirazione dal gioco in 5 righe di html, diffuso dal Dojo di Galway. Si tratta di costruire un percorso a scelte multiple tramite link a diverse pagine html. Inizialmente si dà priorità alla logica del gioco usando pochi tag html e nessun elemento di stile, per inserire successivamente ulteriori elementi html e di stile che permetteranno di abbellire le pagine.&nbsp;<br />
<br />
Il sorgente del gioco, con vari tipi di abbellimento grafico è scaricabile [http://kata.coderdojo.it/archivio/bivi.zip qui]<br />
<br />
== Passo 1: Logica del gioco ==<br />
<br />
È il momento di creare una cartella per contenere i vari file che saranno necessari, dopodiché si parte realizzando la pagina index.html con il seguente codice:<br />
<br />
<span style="line-height: 1.6;">index.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<body>&nbsp;<br />
<p>Sei davanti a un castello circondato da un fossato pieno di coccodrilli.<br/>&nbsp;<br />
Puoi <i>entrare</i> nel castello o <i>saltare</i> nel fossato<br/>&nbsp;<br />
<img src="castello.jpg" /></p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="entra.html">Entra</a> o <a href="salta.html"> Salta </a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
Questa pagina dà due scelte, di passare alla pagina entra.html, o alla pagina salta.html che sono le seguenti:<br />
<br />
<span style="line-height: 1.6;">entra.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<body>&nbsp;<br />
<p>Sei dentro al castello<br/>&nbsp;<br />
Complimenti</p>&nbsp;<br />
<img src="sala.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Torna Fuori</a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
<span style="line-height: 1.6;">salta.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<body>&nbsp;<br />
<p>Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto</p>&nbsp;<br />
<img src="coccodrillo.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Ricomincia</a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
<span style="line-height: 1.6;">Le pagine fanno riferimento a immagini che sono nella stessa cartella dei file html, e devono ovviamente essere già state predisposte.</span><br />
<br />
A questo punto i ragazzi possono estendere o complicare la logica aumentando il numero di scelte, e il numero di livelli.<br />
<br />
== Passo 2: abbellimento grafico ==<br />
<br />
Si inseriscono sia nuovi tag html, che elementi di stile, in particolare:<br />
<br />
'''&lt;head&gt;, &lt;title&gt;, &lt;style&gt;, &lt;h1&gt;''' come tag;<br />
<br />
diversi elementi di stile per gestire colore dei font, colore di sfondo e caratteristiche grafiche dei link.<br />
<br />
<span style="line-height: 1.6;">index.html diventa:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<head>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<title>Avventura nel castello</title>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<style>&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;p { &nbsp;&nbsp; &nbsp;color: white;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;a {&nbsp;&nbsp; &nbsp;text-decoration: none;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;</style>&nbsp;<br />
</head>&nbsp;<br />
<body style="background-color:black">&nbsp;<br />
&nbsp;&nbsp; &nbsp;<h1 style="color:lightblue">Avventura nel castello</h1>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p>Sei davanti a un castello circondato da un fossato pieno di coccodrilli.<br/>&nbsp;<br />
Puoi <i>entrare</i> nel castello o <i>saltare</i> nel fossato<br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<img src="castello.jpg" /></p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p><a href ="entra.html">Entra</a> o <a href="salta.html">Salta</a></p>&nbsp;<br />
</body>&nbsp;<br />
</html><br />
</pre><br />
<span style="line-height: 1.6;">Su questa falsariga si modificano entra.html e salta.html, facendo usare le funzioni di copia e incolla. Si mette in evidenza che è sufficiente copiare e incollare il tag '''&lt;style&gt;''' per replicare le caratteristiche grafiche della pagina index.html sulle altre</span><br />
<br />
<span style="line-height: 1.6;">entra.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<head>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<title>Avventura nel castello - Hai vinto!</title>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<style>&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;p { color: white;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;a {&nbsp;&nbsp; &nbsp;text-decoration: none;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;</style>&nbsp;<br />
</head>&nbsp;<br />
<body style="background-color:black">&nbsp;<br />
&nbsp;&nbsp; &nbsp;<h1 style="color:green">Avventura nel castello - Hai vinto!</h1>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p>Sei dentro al castello<br/>&nbsp;<br />
Complimenti</p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<img src="sala.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Torna Fuori</a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
<span style="line-height: 1.6;">salta.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<head>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<title>Avventura nel castello - Hai perso!</title>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<style>&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;p { color: white;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;a {&nbsp;&nbsp; &nbsp;text-decoration: none;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;</style>&nbsp;<br />
</head>&nbsp;<br />
<body style="background-color:red">&nbsp;<br />
&nbsp;&nbsp; &nbsp;<h1 style="color:black">Avventura nel castello - Hai perso!</h1>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p>Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto</p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<img src="coccodrillo.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Ricomincia</a>&nbsp;<br />
</body>&nbsp;<br />
</html></pre><br />
<span style="line-height: 1.6;">Si vede come le impostazioni generali di stile possano essere definite nella sezione </span>'''&lt;head&gt;'''''<b><span style="line-height: 1.6;">,</span></b>''<span style="line-height: 1.6;">inserendole una sola volta, mentre le impostazioni specifiche di un tag vadano inserite nel tag stesso, come nei tag&nbsp;</span>'''&lt;h1&gt;'''&nbsp;e&nbsp;'''&lt;body&gt;'''<span style="line-height: 1.6;">.</span><br />
[[Category:HTML|Category:HTML]]</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_htmlGioco a bivi html2014-08-29T15:11:01Z<p>Leoncino: gioco a bivi HTML</p>
<hr />
<div>= Gioco a bivi: Avventura nel castello =<br />
<br />
Si trae ispirazione dal gioco in 5 righe di html, diffuso dal Dojo di Galway. Si tratta di costruire un percorso a scelte multiple tramite link a diverse pagine html. Inizialmente si dà priorità alla logica del gioco usando pochi tag html e nessun elemento di stile, per inserire successivamente ulteriori elementi html e di stile che permetteranno di abbellire le pagine.<br />
<br />
== Passo 1: Logica del gioco ==<br />
<br />
È il momento di creare una cartella per contenere i vari file che saranno necessari, dopodiché si parte realizzando la pagina index.html con il seguente codice:<br />
<br />
<span style="line-height: 1.6;">index.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<body>&nbsp;<br />
<p>Sei davanti a un castello circondato da un fossato pieno di coccodrilli.<br/>&nbsp;<br />
Puoi <i>entrare</i> nel castello o <i>saltare</i> nel fossato<br/>&nbsp;<br />
<img src="castello.jpg" /></p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="entra.html">Entra</a> o <a href="salta.html"> Salta </a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
Questa pagina dà due scelte, di passare alla pagina entra.html, o alla pagina salta.html che sono le seguenti:<br />
<br />
<span style="line-height: 1.6;">entra.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<body>&nbsp;<br />
<p>Sei dentro al castello<br/>&nbsp;<br />
Complimenti</p>&nbsp;<br />
<img src="sala.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Torna Fuori</a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
<span style="line-height: 1.6;">salta.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<body>&nbsp;<br />
<p>Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto</p>&nbsp;<br />
<img src="coccodrillo.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Ricomincia</a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
<span style="line-height: 1.6;">Le pagine fanno riferimento a immagini che sono nella stessa cartella dei file html, e devono ovviamente essere già state predisposte.</span><br />
<br />
A questo punto i ragazzi possono estendere o complicare la logica aumentando il numero di scelte, e il numero di livelli.<br />
<br />
== Passo 2: abbellimento grafico ==<br />
<br />
Si inseriscono sia nuovi tag html, che elementi di stile, in particolare:<br />
<br />
'''&lt;head&gt;, &lt;title&gt;, &lt;style&gt;, &lt;h1&gt;''' come tag;<br />
<br />
diversi elementi di stile per gestire colore dei font, colore di sfondo e caratteristiche grafiche dei link.<br />
<br />
<span style="line-height: 1.6;">index.html diventa:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<head>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<title>Avventura nel castello</title>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<style>&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;p { &nbsp;&nbsp; &nbsp;color: white;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;a {&nbsp;&nbsp; &nbsp;text-decoration: none;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;</style>&nbsp;<br />
</head>&nbsp;<br />
<body style="background-color:black">&nbsp;<br />
&nbsp;&nbsp; &nbsp;<h1 style="color:lightblue">Avventura nel castello</h1>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p>Sei davanti a un castello circondato da un fossato pieno di coccodrilli.<br/>&nbsp;<br />
Puoi <i>entrare</i> nel castello o <i>saltare</i> nel fossato<br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<img src="castello.jpg" /></p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p><a href ="entra.html">Entra</a> o <a href="salta.html">Salta</a></p>&nbsp;<br />
</body>&nbsp;<br />
</html><br />
</pre><br />
<span style="line-height: 1.6;">Su questa falsariga si modificano entra.html e salta.html, facendo usare le funzioni di copia e incolla. Si mette in evidenza che è sufficiente copiare e incollare il tag '''&lt;style&gt;''' per replicare le caratteristiche grafiche della pagina index.html sulle altre</span><br />
<br />
<span style="line-height: 1.6;">entra.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<head>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<title>Avventura nel castello - Hai vinto!</title>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<style>&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;p { color: white;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;a {&nbsp;&nbsp; &nbsp;text-decoration: none;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;</style>&nbsp;<br />
</head>&nbsp;<br />
<body style="background-color:black">&nbsp;<br />
&nbsp;&nbsp; &nbsp;<h1 style="color:green">Avventura nel castello - Hai vinto!</h1>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p>Sei dentro al castello<br/>&nbsp;<br />
Complimenti</p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<img src="sala.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Torna Fuori</a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
<span style="line-height: 1.6;">salta.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<head>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<title>Avventura nel castello - Hai perso!</title>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<style>&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;p { color: white;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;a {&nbsp;&nbsp; &nbsp;text-decoration: none;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;</style>&nbsp;<br />
</head>&nbsp;<br />
<body style="background-color:red">&nbsp;<br />
&nbsp;&nbsp; &nbsp;<h1 style="color:black">Avventura nel castello - Hai perso!</h1>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p>Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto</p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<img src="coccodrillo.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Ricomincia</a>&nbsp;<br />
</body>&nbsp;<br />
</html></pre><br />
<span style="line-height: 1.6;">Si vede come le impostazioni generali di stile possano essere definite nella sezione </span>'''&lt;head&gt;'''''<b><span style="line-height: 1.6;">,</span></b>''<span style="line-height: 1.6;">inserendole una sola volta, mentre le impostazioni specifiche di un tag vadano inserite nel tag stesso, come nei tag&nbsp;</span>'''&lt;h1&gt;'''&nbsp;e&nbsp;'''&lt;body&gt;'''<span style="line-height: 1.6;">.[[Category:HTML]]</span></div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_htmlGioco a bivi html2014-08-29T15:10:17Z<p>Leoncino: Creata pagina con "= Gioco a bivi: Avventura nel castello = Si trae ispirazione dal gioco in 5 righe di html, diffuso dal Dojo di Galway. Si tratta di costruire un percorso a scelte multiple tr..."</p>
<hr />
<div>= Gioco a bivi: Avventura nel castello =<br />
<br />
Si trae ispirazione dal gioco in 5 righe di html, diffuso dal Dojo di Galway. Si tratta di costruire un percorso a scelte multiple tramite link a diverse pagine html. Inizialmente si dà priorità alla logica del gioco usando pochi tag html e nessun elemento di stile, per inserire successivamente ulteriori elementi html e di stile che permetteranno di abbellire le pagine.<br />
<br />
== Passo 1: Logica del gioco ==<br />
<br />
È il momento di creare una cartella per contenere i vari file che saranno necessari, dopodiché si parte realizzando la pagina index.html con il seguente codice:<br />
<br />
<span style="line-height: 1.6;">index.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<body>&nbsp;<br />
<p>Sei davanti a un castello circondato da un fossato pieno di coccodrilli.<br/>&nbsp;<br />
Puoi <i>entrare</i> nel castello o <i>saltare</i> nel fossato<br/>&nbsp;<br />
<img src="castello.jpg" /></p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="entra.html">Entra</a> o <a href="salta.html"> Salta </a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
Questa pagina dà due scelte, di passare alla pagina entra.html, o alla pagina salta.html che sono le seguenti:<br />
<br />
<span style="line-height: 1.6;">entra.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<body>&nbsp;<br />
<p>Sei dentro al castello<br/>&nbsp;<br />
Complimenti</p>&nbsp;<br />
<img src="sala.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Torna Fuori</a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
<span style="line-height: 1.6;">salta.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<body>&nbsp;<br />
<p>Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto</p>&nbsp;<br />
<img src="coccodrillo.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Ricomincia</a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
<span style="line-height: 1.6;">Le pagine fanno riferimento a immagini che sono nella stessa cartella dei file html, e devono ovviamente essere già state predisposte.</span><br />
<br />
A questo punto i ragazzi possono estendere o complicare la logica aumentando il numero di scelte, e il numero di livelli.<br />
<br />
== Passo 2: abbellimento grafico ==<br />
<br />
Si inseriscono sia nuovi tag html, che elementi di stile, in particolare:<br />
<br />
'''&lt;head&gt;, &lt;title&gt;, &lt;style&gt;, &lt;h1&gt;''' come tag;<br />
<br />
diversi elementi di stile per gestire colore dei font, colore di sfondo e caratteristiche grafiche dei link.<br />
<br />
<span style="line-height: 1.6;">index.html diventa:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<head>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<title>Avventura nel castello</title>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<style>&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;p { &nbsp;&nbsp; &nbsp;color: white;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;a {&nbsp;&nbsp; &nbsp;text-decoration: none;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;</style>&nbsp;<br />
</head>&nbsp;<br />
<body style="background-color:black">&nbsp;<br />
&nbsp;&nbsp; &nbsp;<h1 style="color:lightblue">Avventura nel castello</h1>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p>Sei davanti a un castello circondato da un fossato pieno di coccodrilli.<br/>&nbsp;<br />
Puoi <i>entrare</i> nel castello o <i>saltare</i> nel fossato<br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<img src="castello.jpg" /></p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p><a href ="entra.html">Entra</a> o <a href="salta.html">Salta</a></p>&nbsp;<br />
</body>&nbsp;<br />
</html><br />
</pre><br />
<span style="line-height: 1.6;">Su questa falsariga si modificano entra.html e salta.html, facendo usare le funzioni di copia e incolla. Si mette in evidenza che è sufficiente copiare e incollare il tag '''&lt;style&gt;''' per replicare le caratteristiche grafiche della pagina index.html sulle altre</span><br />
<br />
<span style="line-height: 1.6;">entra.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<head>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<title>Avventura nel castello - Hai vinto!</title>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<style>&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;p { color: white;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;a {&nbsp;&nbsp; &nbsp;text-decoration: none;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;</style>&nbsp;<br />
</head>&nbsp;<br />
<body style="background-color:black">&nbsp;<br />
&nbsp;&nbsp; &nbsp;<h1 style="color:green">Avventura nel castello - Hai vinto!</h1>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p>Sei dentro al castello<br/>&nbsp;<br />
Complimenti</p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<img src="sala.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Torna Fuori</a>&nbsp;<br />
</body>&nbsp;<br />
</html>&nbsp;<br />
</pre><br />
<span style="line-height: 1.6;">salta.html:</span><br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html>&nbsp;<br />
<head>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<title>Avventura nel castello - Hai perso!</title>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<style>&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;p { color: white;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;a {&nbsp;&nbsp; &nbsp;text-decoration: none;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;&nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;<br />
&nbsp;&nbsp; &nbsp;</style>&nbsp;<br />
</head>&nbsp;<br />
<body style="background-color:red">&nbsp;<br />
&nbsp;&nbsp; &nbsp;<h1 style="color:black">Avventura nel castello - Hai perso!</h1>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<p>Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto</p>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<img src="coccodrillo.jpg" /><br/>&nbsp;<br />
&nbsp;&nbsp; &nbsp;<a href ="index.html">Ricomincia</a>&nbsp;<br />
</body>&nbsp;<br />
</html></pre><br />
<span style="line-height: 1.6;">Si vede come le impostazioni generali di stile possano essere definite nella sezione </span>'''&lt;head&gt;'''''<b><span style="line-height: 1.6;">,</span></b>''<span style="line-height: 1.6;">inserendole una sola volta, mentre le impostazioni specifiche di un tag vadano inserite nel tag stesso, come nei tag&nbsp;</span>'''&lt;h1&gt;'''&nbsp;e&nbsp;'''&lt;body&gt;'''<span style="line-height: 1.6;">.</span></div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Categoria:HTMLCategoria:HTML2014-08-29T14:56:47Z<p>Leoncino: </p>
<hr />
<div>[[Category:Principale]]&nbsp;</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=Categoria:HTMLCategoria:HTML2014-08-29T14:54:23Z<p>Leoncino: Creata pagina con "&nbsp;"</p>
<hr />
<div>&nbsp;</div>Leoncinohttps://kata.coderdojo.it/wiki/index.php?title=HtmlHtml2014-08-29T14:54:10Z<p>Leoncino: </p>
<hr />
<div>HTML sta per HyperText Makup Language ed è il linguaggio con cui vengono scritte le pagine web<br />
<br />
[[Category:HTML]]</div>Leoncino