Hai mai pensato a quanto possa essere divertente creare un piccolo gioco interattivo con il solo uso di HTML, CSS e JavaScript? Se sei agli inizi della programmazione web o vuoi semplicemente cimentarti in un progetto rapido ma coinvolgente, la Morra Cinese (o Sasso, Carta, Forbice) è un ottimo punto di partenza!
Si tratta di un gioco classico, perfetto per mettere alla prova le tue competenze di manipolazione del DOM e di logica di programmazione. Inoltre, è un ottimo esercizio per comprendere concetti fondamentali come la gestione degli eventi, la generazione casuale e la logica condizionale.
Cosa ci serve?
Per realizzare questo gioco, utilizzeremo tre tecnologie fondamentali del web:
- HTML: per creare la struttura della pagina e i pulsanti che permetteranno al giocatore di selezionare la propria mossa.
- CSS: per migliorare l’aspetto grafico della pagina, rendendola più accattivante e intuitiva.
- JavaScript: per implementare la logica del gioco, gestire le scelte del giocatore e del computer e determinare il vincitore.
Non avremo bisogno di framework o librerie esterne, anche se successivamente potremmo aggiungere effetti con librerie come Animate.css o Bootstrap per migliorare la grafica.
Strutturiamo la pagina HTML
Cominciamo con la creazione del file index.html, che definirà la struttura del nostro gioco:
<!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Morra Cinese</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Morra Cinese</h1> <div id="game"> <p>Scegli la tua mossa:</p> <button class="choice" data-choice="sasso">🪨 Sasso</button> <button class="choice" data-choice="carta">📄 Carta</button> <button class="choice" data-choice="forbice">✂️ Forbice</button> <h2 id="result"></h2> <p id="score">Giocatore: 0 | Computer: 0</p> </div> <script src="script.js"></script> </body> </html>Codice HTML
- Abbiamo inserito un titolo (
<h1>) per rendere chiaro il tema della pagina. - Un div con id
game, che conterrà tutti gli elementi del gioco. - Tre pulsanti (
<button>) con un attributodata-choiceper identificare la mossa scelta dall’utente. - Un elemento
<h2>per mostrare il risultato di ogni partita. - Un
<p>con idscoreper tenere traccia del punteggio. - Infine, il collegamento a un file JavaScript (
script.js) che gestirà la logica del gioco.
Un po’ di stile con CSS
Ora passiamo al file style.css, che migliorerà l’aspetto grafico della nostra applicazione:
body { font-family: Arial, sans-serif; text-align: center; background-color: #f4f4f4; margin-top: 50px; } button { font-size: 20px; margin: 10px; padding: 10px 20px; cursor: pointer; border: none; border-radius: 5px; } button:hover { background-color: #ddd; } #result { font-size: 24px; margin-top: 20px; font-weight: bold; }- Il body è centrato e ha un colore di sfondo chiaro per una migliore leggibilità.
- I pulsanti sono stilizzati per essere più grandi e facili da cliccare.
- Quando il mouse passa sopra un pulsante, il colore cambia (
hover). - Il risultato del gioco (
#result) è evidenziato con un carattere più grande e in grassetto.
La logica del gioco in JavaScript
Ora arriva la parte più interessante! Creiamo il file script.js e scriviamo il codice che gestirà il gioco:
const choices = ["sasso", "carta", "forbice"]; const buttons = document.querySelectorAll(".choice"); const resultText = document.getElementById("result"); const scoreText = document.getElementById("score"); let playerScore = 0; let computerScore = 0; buttons.forEach(button => { button.addEventListener("click", function() { let playerChoice = this.getAttribute("data-choice"); let computerChoice = choices[Math.floor(Math.random() * choices.length)]; let result = determineWinner(playerChoice, computerChoice); resultText.textContent = `Hai scelto ${playerChoice}. Il computer ha scelto ${computerChoice}. ${result}`; scoreText.textContent = `Giocatore: ${playerScore} | Computer: ${computerScore}`; }); }); function determineWinner(player, computer) { if (player === computer) { return "Pareggio!"; } if ((player === "sasso" && computer === "forbice") || (player === "carta" && computer === "sasso") || (player === "forbice" && computer === "carta")) { playerScore++; return "Hai vinto!"; } else { computerScore++; return "Hai perso!"; } }- Definiamo un array
choicescontenente le tre opzioni del gioco. - Selezioniamo i pulsanti e gli elementi del DOM con
document.querySelectorAllegetElementById. - Aggiungiamo un event listener ai pulsanti per catturare il click dell’utente.
- Generiamo la scelta del computer in modo casuale.
- Con la funzione
determineWinner()calcoliamo il vincitore secondo le regole del gioco. - Aggiorniamo il punteggio e il messaggio di risultato.
Abbiamo realizzato un gioco completamente funzionante utilizzando solo HTML, CSS e JavaScript. Ora puoi personalizzarlo, aggiungere effetti sonori, migliorare la grafica o persino trasformarlo in una vera e propria app!
Se hai dubbi o vuoi migliorare il progetto, lascia un commento! 🚀
