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 14 Giugno 2022