js-logo

Una corsa di cavalli virtuale in JavaScript

di

Usando il javascript crea una piccola simulazione di corsa spostando delle pedine virtuali da un lato all’altro dello schermo!

Istruzione

Le istruzioni che possiamo seguire per realizzarlo:

  • Crea tre immagini con id differenti. Puoi caricare l’immagine che vuoi ma ti consiglio piccole o di ridimensionarle a 50px x 50px
  • Posizionali con il css ai bordi dello schermo uno sotto l’altra
  • Crea una funzione js Corri() che, usando la funzione js predefinita Math.floor((Math.random() * 100) + 1), sposta gli oggetti a sinistra di un numero casuale tra 1 e 100
  • Crea un bottone Run che premuto (tante volte) richiami la funzione Corri()
  • Termina la corsa quando si arriva ad un traguardo fissato con un numero di pixel a piacere (es. ci si sposta dal pixel 0 al pixel 1000)

Opzionale

  • Disegna con tre contenitori div le tre piste dove piazzi sopra le immagini. Colorale con un colore antracite tipo asfalto
  • Metti una immagine a scacchi per disegnare il traguardo
  • Prova a iterare in modo automatico gli spostamenti del bottone Run con un ciclo
  • TOSTO Usa le funzioni = setTimeout(Corri,10); //Ripete lo spostamento per 10 millisecondi e clearTimeout(id);//Cancella l’animazione avviata da setTimeout

La pagina HTML

Prepariamo prima il codice per la pagina web che deve ospitare il nostro gioco.

<!DOCTYPE html>
<html lang="it">
<head>
	<meta charset="utf-8">
	<script src="js/corsa.js"></script>
	<link href="css/cavalli.css" type="text/css" rel="stylesheet">
</head>
<body>

<h1>La corsa di cavalli</h1>
<p>Usando il javascript crea una piccola simulazione di corsa (da un lato all'altro dello schermo!). <br >
<ul>
<li>Crea tre immagini con id differenti. Puoi caricare l'immagine che vuoi ma ti consiglio di ridimensionarle a 50px x 50px</li>
<li>Posizionali con il css ai bordi dello schermo</li>
<li>Crea una funzione js Corri() che usando la funzione Math.floor((Math.random() * 100) + 1); sposta gli oggetti a sinistra di un numero casuale tra 1 e 100</li>
<li>Crea un bottone Run che premuto (tante volte) richiami la funzione Corri()</li>
<li>Chi arriva prima in fondo allo schermo, vince. Per vedere dove si torva un oggetto, ci sono le proprietà offsetLeft e offsetTop da usare con il getElementById()
<br>
<i>Opzionale</i>
<li>Disegna con tre contenitori div le tre piste dove piazzi sopra le immagini. Colorale con un colore nero tipo asfalto</li>
<li>Prova a iterare in modo automatico gli spostamenti con un ciclo </li>
<li><b>TOSTO </b>Usa le funzioni = setTimeout(Corri,10); //Ripete lo spostamento per 10 millisecondi e clearTimeout(id);//Cancella l'animazione avviata da setTimeout</li>
</ul>
</p>

<br><br>
<img src="img/bandiera.gif" id="traguardo">
<img src="img/cavallo1.jpg" alt="cavallo1" id="cavallo1"><br><br><br>
<img src="img/cavallo2.jpg" alt="cavallo2" id="cavallo2"><br><br><br>
<img src="img/cavallo3.jpg" alt="cavallo3" id="cavallo3"><br><br><br>

<input type="button" onclick="corriSemplice()" value="Corri!">

</body>
</html>

Il file CSS

Il foglio di stile è molto semplice e minimale per il nostro scopo principale.


#traguardo
{
    position:fixed;
    left: 1000px;
    width: 30%;
}

#cavallo1{position:relative;}
#cavallo2{position:relative;}
#cavallo3{position:relative;}

Il file JS

La funzione principale JS. La versione semplice non ha grandi particolarità. Ogni immagine/cavallo sarà un nostro oggetto della pagina HTML e, come tale, avrà delle proprietà CSS tra cui la posizione. Se, ad ogni turno, prelevo la posizione degli oggetti e ci aggiungo un valore a caso, il gioco è fatto

function corriSemplice()
{

//Prelevo gli oggetti dalla pagina HTML
var cavallo1 = document.getElementById("cavallo1");
var cavallo2 = document.getElementById("cavallo2");
var cavallo3 = document.getElementById("cavallo3");

//In che posizione iniziale si trovano?
var posizione1 = cavallo1.offsetLeft; 
var posizione2 = cavallo2.offsetLeft;
var posizione3 = cavallo3.offsetLeft;

//Calcolo uno spostamento per ogni cavallo con la funzione random
var spostamento1 = Math.floor((Math.random() * 100) + 1);
var spostamento2 = Math.floor((Math.random() * 100) + 1);
var spostamento3 = Math.floor((Math.random() * 100) + 1);

//Aggiorno la posizione dei cavalli
cavallo1.style.left = posizione1 + spostamento1 + "px";
cavallo2.style.left = posizione2 + spostamento2 + "px";
cavallo3.style.left = posizione3 + spostamento3 + "px";

//Completare: come faccio a far vedere chi vince?
//Suggerimento: piazzo un oggetto/contenitore in posizione assoluta ad es. a 1000px e...

var posizione1 = cavallo1.offsetLeft;
var posizione2 = cavallo2.offsetLeft;
var posizione3 = cavallo3.offsetLeft;

if (posizione1 >= 1000)
	alert("Cavallo 1 vince")

if (posizione2 >= 1000)
	alert("Cavallo 2 vince")

if (posizione3 >= 1000)
	alert("Cavallo 3 vince")

}

Uno screen di esempio del risultato

Listati codice

Il codice completo su GitHub -> qui

Ultima modifica 3 Giugno 2023

Visite: 293