Corso di JavaScript & Programmazione Web: 9 – Animazioni e interattività avanzata

9 Animazioni e giochi 2D con JavaScript

Obiettivi didattici:

• Imparare a usare setInterval e setTimeout per eseguire codice in ritardo o a intervalli regolari.

• Animare elementi HTML in modo semplice.

• Introdurre l’uso di Canvas per creare giochi 2D.

• Creare un esercizio pratico: gioco “Indovina il numero”.

---

1. setTimeout e setInterval

Questi metodi servono a eseguire codice dopo un certo ritardo o a intervalli regolari.

Sintassi di setTimeout:

setTimeout(function() {
  console.log("Eseguito dopo 2 secondi");
}, 2000); // 2000 millisecondi = 2 secondi

Sintassi di setInterval:

let timer = setInterval(function() {
  console.log("Questo si ripete ogni secondo");
}, 1000);

// Per fermare l'intervallo:
clearInterval(timer);

Uso pratico: animazioni, countdown, aggiornamento dati dinamici.

---

2. Manipolazione animata di elementi HTML

Possiamo muovere un elemento usando style e setInterval.

Esempio: box che scorre a destra

<div id="box" style="width:50px;height:50px;background:red;position:absolute;left:0;"></div>
<script>
let pos = 0;
let box = document.getElementById('box');

let interval = setInterval(function() {
  if(pos >= 300) clearInterval(interval); // ferma animazione
  pos += 2;
  box.style.left = pos + 'px';
}, 20);
</script>

Spiegazione:

• L’elemento si muove di 2px ogni 20ms.

• Quando raggiunge 300px, l’animazione si ferma.

---

3. Introduzione a Canvas

Canvas permette di disegnare grafica 2D direttamente con JavaScript.

Esempio base: cerchio animato

<canvas id="myCanvas" width="400" height="200" style="border:1px solid black;"></canvas>
<script>
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

let x = 50;
let dx = 2;

function draw() {
  ctx.clearRect(0,0,canvas.width, canvas.height); // pulisce il canvas
  ctx.beginPath();
  ctx.arc(x, 100, 20, 0, Math.PI*2); // cerchio
  ctx.fillStyle = "blue";
  ctx.fill();
  x += dx;
  if(x > canvas.width-20 || x < 20) dx = -dx; // rimbalzo
  requestAnimationFrame(draw);
}

draw();
</script>

Spiegazione:

• requestAnimationFrame crea animazioni più fluide di setInterval.

• clearRect cancella il frame precedente.

• Il cerchio rimbalza sui bordi del canvas.

---

4. Esercizio: Gioco “Indovina il numero”

Obiettivo: il computer sceglie un numero casuale tra 1 e 100 e l’utente deve indovinarlo.

HTML + JavaScript completo:

<h2>Indovina il numero!</h2>
<p>Inserisci un numero tra 1 e 100:</p>
<input type="number" id="guess" min="1" max="100">
<button id="check">Prova</button>
<p id="message"></p>

<script>
let secret = Math.floor(Math.random()*100) + 1; // numero casuale
let attempts = 0;

document.getElementById('check').addEventListener('click', function() {
  let guess = parseInt(document.getElementById('guess').value);
  attempts++;
  let msg = '';
  
  if(guess === secret) {
    msg = `Complimenti! Hai indovinato in ${attempts} tentativi.`;
  } else if(guess < secret) {
    msg = 'Troppo basso!';
  } else {
    msg = 'Troppo alto!';
  }

  document.getElementById('message').textContent = msg;
});
</script>

Spiegazione:

• Math.random() genera un numero casuale.

• L’utente inserisce il numero e clicca “Prova”.

• Lo script confronta con il numero segreto e mostra un messaggio.

• Si contano i tentativi con la variabile attempts.

---

5. Approfondimenti

• Per animazioni più complesse si usa requestAnimationFrame invece di setInterval.

• Canvas può essere combinato con immagini, sprite e collisioni per creare giochi 2D più elaborati.

• Si possono aggiungere timer, punteggio e livelli usando variabili e setInterval.

---

6. Test rapido

1. Differenza tra setTimeout e setInterval?
   Risposta: setTimeout esegue il codice una volta dopo un ritardo; setInterval ripete il codice a intervalli regolari.

2. Come si pulisce un canvas prima di ridisegnare?
   Risposta: ctx.clearRect(0,0,canvas.width,canvas.height)

3. Come generare un numero casuale tra 1 e 100?
   Risposta: Math.floor(Math.random()*100)+1

4. Quale metodo è consigliato per animazioni fluide?
   Risposta: requestAnimationFrame.