30 Javasript: La prima animazione.

Questa pagina contiene la struttura di un programma in cui una figura si muove sullo schermo.
Le parti con scritto “// da completare” sono a tuo carico!

<canvas id="tela" width="800" height="600"> </canvas>

<script>

// attiviamo la grafica

canvas = document.getElementById("tela");

g = canvas.getContext("2d");

g.transform(1,0,0,-1,0,600);

 

// dimensioni canvas

larghezza = 800;

altezza = 600;

 

// posizione della figura

posx = 10; // posizione X

posy = 10; // posizione Y

lato = 5; // misura del lato

// velocità della figura

vx = 10; // velocità X

vy = 12; // velocità Y

 

function quadrato(x,y, lato) {

// da completare

}

 

function aggiornaPosizione() {

// aggiorna la posizione X usando la velocità X

posx += vx;

/ se si esce dallo schermo invertire la velocità

// da completare

// aggiorna la posizione Y usando la velocità Y

// se si esce dallo schermo invertire la velocità

// da completare

}

 

function animazione() {

// cancella schermo

g.fillStyle = "black";

g.fillRect(0,0,larghezza,altezza);

// aggiorna posizione figura

aggiornaPosizione();

// disegna quadrato

g.strokeStyle = "white";

quadrato(posx, posy, lato);

 

// esegui ancora la funzione “animazione”

requestAnimationFrame(animazione);

}

 

// chiamata della funzione “animazione” per far partire il programma.

animazione();

 

</script>