Obiettivo: Realizzare un programma che implementi una semplice avventura testuale utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.

Codice:

Viene in seguito illustrato il codice utilizzato per implementare una semplice avventura testuale. Questa avventura è caratterizzata da una sequenza di scene attraverso le quali è possibile muoversi premendo due differenti pulsanti. I due pulsanti permettono di cambiare scena attraverso due differenti funzioni javascript (Funzione1() e Funzione2()).
Nello specifico, dal punto di vista del codice HTML, la pagina è caratterizzata da:

• Un titolo principale (“L’Isola del Mistero”) (<h1>).
• Una descrizione della scena corrente (<p>).
• Immagine della scena corrente (<img>).
• Due differenti pulsanti  che permettono di cambiare scena (<button>).

Viene in seguito riportato uno screenshot relativo all’avventura testuale.

Differentemente, dal punto di vista del codice JAVASCRIPT, il codice è costituito da 5 differenti array. Ogni array è utilizzato per aggiornare la singola scena in seguito alla pressione di uno dei due pulsanti. E’ importante considerare che ad ogni specifico indice degli array corrisponde ad una specifica scena. 
In seguito sono descritti i 5 array impiegati nel codice javascript

• Array delle descrizioni (descrizione [])
• Array delle opzioni associate al pulsante1 (opzioni1 [])
• Array delle opzioni associate al pulsante2 (opzioni2 [])
• Array degli stati successivi associati al pulsante1 (next1 [])
• Array degli stati successivi associati al pulsante2 (next2 [])

Obiettivo: Realizzare un programma che implementi il gioco della Roulotte utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.

Codice:

Viene in seguito illustrato il codice utilizzato per implementare una semplice versione del gioco della Roulotte.
Nello specifico, la pagina è caratterizzata da:

• Un titolo principale (“Roulette”).
• Immagine della roulette (che si trova in img/Roulette.png).
• Visualizzazione del saldo (fisso a 100$).
• Input per inserire un numero proposto dal giocatore.
• Bottone SPIN per avviare l’estrazione. Premendo il tasto SPIN viene eseguita la funzione Spin() che genera un numero randomico e lo scrive nel relativo spazio.
• Visualizzazione del numero estratto, inizialmente impostato su “0”.

Modifiche:
Al fine di terminare il gioco è necessario introdurre una serie di modifiche:

• Completare il codice gestendo i casi di vittoria e sconfitta (il giocatore perde dei soldi nel caso di sconfitta oppure vince dei soldi nel caso di vittoria)
• Aggiungere una animazione legata alla vincita o alle possibili vincite.
• Dare la possibilità all’utente di scegliere la puntata.
• Dare la possibilità all’utente di scegliere se puntare sul colore oppure sul numero
• Aggiungere suoni nel caso di vincite

E’ possibile scaricare il progetto completo cliccando sul link:
https://www.arduinofacile.it/wp-content/uploads/2025/03/Roulette.zip

Obiettivo: Realizzare un programma che implementi il gioco del TRIS utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.

Codice:

Viene in seguito illustrato il codice utilizzato per implementare una semplice versione del gioco del TRIS.
Nello specifico, la pagina è caratterizzata da:

• Nove immagini rappresentanti la matrice 3×3 del TRIS (inizialmente impostate su img/0.png immagine vuota). Premendo su ogni immagine viene lanciata una funziona denominata Premuto alla quale viene passato un parametro che riporta l’informazione del pulsante che è stato premuto attraverso un identificativo da 0 a 8. Premendo i pulsanti cambiano le immagini riportate sul matrice 3×3 diventano rispettivamente croci oppure cerchi.
• Due paragrafi (i.e., giocatore1 e giocatore2 che dovrebbero riportare lo status delle vittorie di ogni giocatore).

Modifiche:
Al fine di terminare il gioco è necessario introdurre una serie di modifiche:

• Completare il codice associando la funzione Premuto a tutte le immagini della matrice 3×3.
• Introdurre un meccanismo utile per determinare il giocatore vincitore.
• Impedire all’utente di premere una casella già scelta.
• Aggiungere una animazione legata alla vincita o alle possibili vincite.
• Aggiungere un contatore delle vittorie.
• Introdurre una intelligenza artificiale per giocare contro il computer.
• Aggiungere suoni nel caso di vincite

E’ possibile scaricare il progetto completo cliccando sul link:
https://www.arduinofacile.it/wp-content/uploads/2025/03/Tris.zip

Obiettivo: Realizzare un programma che implementi una Slot Machine utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.

Codice:

Viene in seguito illustrato il codice utilizzato per implementare una semplice versione di una Slot Machine.
Nello specifico, la pagina è caratterizzata da:

• Tre immagini riportanti i simboli di una slot machine (inizialmente impostati su img/0.png)
• Un campo input (disabilitato) sul quale viene visualizzato il saldo.
• Un pulsante “Spin” il quale avvia la funzione javascript Spin(). Quando il pulsante viene premuto, il saldo diminuisce di 1$ e vengono generati tre numeri casuali per determinare il risultato della slot. Se il numero è inferiore a 50, viene imposta l’immagine su “img/0.png”, altrimenti su “img/1.png”. Inoltre viene riprotodotto un suono di spinning (spin.wav).
• È presente anche un’area per inserire soldi, ma la funzione non è ancora implementata.

Modifiche:
Al fine di rendere il gioco più avvincente è possibile introdurre una serie di modifiche:

• Completare il codice aggiungendo le immagini mancanti e gestire in modo corretto le probabilità di vincita e le relative vincite.
• Introdurre una legenda riportante le possibili vincite.
• Introdurre una pagina di accesso alla slot machine nella quale deve essere riportata la data dell’utilizzatore. L’utente può accedere alla solto solo nel caso in cui risulti maggiorenne.
• Aggiungere una animazione legata alla vincita o alle possibili vincite.
• Modificare l’aspetto della slot introducendo un numero maggiore di immagini (ad esempio matrice 3×3)
• Aggiungere suoni nel caso di vincite

E’ possibile scaricare il progetto completo cliccando sul link:
https://www.arduinofacile.it/wp-content/uploads/2025/03/SlotMachine.zip

Obiettivo: Effettuare una semplice somma tra dati inseriti in una pagina web utilizzando il linguaggio di programmazione javascript.

Pre-requisiti:

HTML #1 Titoli, Paragrafi, Liste, Immagini, Ritorni a capo

HTML #3 CSS

Teoria

JavaScript è un linguaggio di programmazione versatile e potente, utilizzato principalmente per creare contenuti interattivi e dinamici su pagine web. Introdotto nel 1995, è diventato uno dei pilastri dello sviluppo web, insieme a HTML e CSS. Grazie alla sua natura interpretata e alla compatibilità con tutti i browser moderni, JavaScript permette di manipolare il DOM (Document Object Model) per aggiornare contenuti, gestire eventi e migliorare l’esperienza utente senza dover ricaricare la pagina. Con l’avvento di tecnologie come Node.js, JavaScript è andato oltre il frontend, consentendo lo sviluppo di applicazioni server-side e multipiattaforma. Inoltre, le numerose librerie e framework, come React, Angular e Vue.js, hanno ampliato le possibilità di sviluppo, rendendolo un linguaggio essenziale per i programmatori moderni.

Codice HTML:
Il codice HTML presentato definisce una semplice pagina web che consente agli utenti di effettuare una somma tra due numeri utilizzando JavaScript. Ecco i dettagli del suo funzionamento:

• Titolo della pagina: È presente un’intestazione <h1> che descrive lo scopo della pagina: “Effettuare una semplice somma in Javascript”.
• Input: Due elementi consentono agli utenti di inserire i numeri da sommare. Nello specifico questi due elementi caratterizzati dal tag input sono identificati da due differenti identificativi inputA e inputB. Il primo campo viene inizializzato con un valore predefinito di 0. Il secondo campo, con un valore predefinito di 1.
• Output: L’output, viene gestito attraverso un paragrafo caratterizzato dall’identificativo output. Tale valore viene modificato dallo script javascript e definito come la somma dei due input.
• Pulsante: Un pulsante viene utilizzato per lanciare lo script javascript il quale presi i valori dei due input calcola il valore dell’output e va a modificare il relativo codice HTML.

Codice JAVASCRIPT:
La funzione document.getElementById() è uno dei metodi più utilizzati da Javascript. Tale funzione consente di selezionare un elemento HTML specifico della pagina utilizzando il suo attributo id. Questo metodo è ampiamente utilizzato per interagire e manipolare dinamicamente gli elementi del documento.

Ad esempio per ottenere il valore di uno specifico elemento è possibile utilizzare il seguente codice:

var a = parseInt(document.getElementById(“inputA”).value);

Mentre per modificare un elemento della pagina HTML si utilizza il seguente codice:

document.getElementById(“output”).innerHTML = “Risultato: ” + c;