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;