Gioco del sasso, carta, forbice in JavaScript

Gioco semplice che nasconde però qualche insidia per il programmatore meno esperto. Vediamo come fare.

Versione 1 – Non interattivo

Facciamo una pima versione del gioco in modalità “non interattiva”. Ovvero, facciamo un semplice bottone per cominciare a giocare e il software js deve simulare l’estrazione automatica dei simboli di entrambi i giocatori, verificando che vince turno dopo turno e stampando il vincitore alla fine di tre turni. L’esercizio è un’ottima scusa per vedere l’uso dell’evento click, l’uso della funzione standard random, dell’uso delle funzioni js con tanto di passaggio di parametri.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Sasso Carta Forbice</title>

    <script>
	function random()
	{
		let n = Math.floor(Math.random() * 2);
		return n;
	}

	function stampaSimbolo(valore)
	{
		if (valore == 0)
			return "sasso";
			
		if (valore == 1)
			return "carta";
			
		if (valore == 2)
			return "forbice";	

		return "ERRORE";		
	}
	
	function confronta(a, b)
	{
		//imposto 
		//0 -> sasso
		//1 -> carta
		//2 -> forbici 
		//ritorno A -> ha vinto giocatore A
		//ritorno B -> ha vinto giocatore B 
		//ritorno P -> pareggio
		
		if (a == 0 && b == 0)
		{
			return "P";
		}

		if (a == 1 && b == 1)
		{
			return "P";
		}

		if (a == 2 && b == 2)
		{
			return "P";
		}  
		
		if (a == 0 && b == 1)
		{
			return "B";
		}            

		if (a == 1 && b == 0)
		{
			return "A";
		}

		if (a == 0 && b == 2)
		{
			return "A";
		}            

		if (a == 2 && b == 0)
		{
			return "B";
		}  

		if (a == 1 && b == 2)
		{
			return "B";
		} 			

		if (a == 2 && b == 1)
		{
			return "A";
		} 
	}

	function gioca()
	{
		const turniPartita = 3;
		let turno = 0;
		let punteggioA = 0;
		let punteggioB = 0;
		let estrazioneA;
		let estrazioneB;

		while(turno < turniPartita)
		{
			//faccio lanciare due simboli ai giocatori
			estrazioneA = random();
			estrazioneB = random();
			//estrazioneA = setInterval(random, 1000);
			//estrazioneB = setInterval(random, 1000);
			document.getElementById("risultatoA").innerHTML += stampaSimbolo(estrazioneA)+"<br>";
			document.getElementById("risultatoB").innerHTML += stampaSimbolo(estrazioneB)+"<br>";
			
			//confronto le estrazioni per determinare chi vince il turno
			let round = confronta(estrazioneA,estrazioneB);
			
			if (round == 'A')
				punteggioA = punteggioA + 1;
				
			if (round == 'B')
				punteggioB = punteggioB + 1;

			turno = turno + 1;			
		}
		if (punteggioA>punteggioB)
		{
			document.getElementById("risultatoA")
				.innerHTML += "HAI VINTO";
			document.getElementById("risultatoB")
				.innerHTML +=	"HAI PERSO";	
		}
		else
		{
			document.getElementById("risultatoA")
				.innerHTML += "HAI PERSO <br>";
			document.getElementById("risultatoB")
				.innerHTML +=	"HAI VINTO <br>";	
		}

	}

    </script>
  </head>
  <body>
    <h1>Benvenuto nel gioco sasso carta forbici!</h1>
	<h2>Il programma simula l'estrazione di due simboli per il giocatore A e B 
	    tra sasso carta e forbice e dopo 3 turni dice chi ha vinto</h2>

    <div class="row">
        <div class="col text-center">
		Giocatore A
		<div id="risultatoA"></div>
		</div>
        <div class="col-3 text-center"><button class="btn btn-primary" onclick="gioca();">Gioca!</button></div>
        <div class="col text-center">
		Giocatore B
		<div id="risultatoB"></div>
		</div>
    </div>

   <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  </body>
</html>

Versione 2 – Giocatore singolo

Se siamo già ad un livello di js più esperto, possiamo ridisegnare il nostro gioco sfruttando altre soluzioni. Ad esempio, possiamo simulare che ci sia un utente umano contro la macchina. L’utente umano, ovviamente, può selezionare il simbolo da lanciare nel turno, ad esempio cliccando una figura apposita. La gestione degli eventi possiamo poi relegarla interamente al codice js con eventHandler.

TO DO

Ultima modifica 28 Marzo 2022

Lascia un commento