HTML and CSS Reference
In-Depth Information
elementi grafici, ma semplicemente a disegnare su una tavola di precise dimensioni. Que-
sto porta maggiori benefici quando gli oggetti da gestire sono molteplici, perché il browser
non deve gestirli, ma siamo noi a renderizzarli come un'unica fotografia. Si parla di foto-
grafia, perché nei giochi la tecnica più usata per creare immagini in movimento è creare
un infinito ciclo (chiamato game loop ), che ha il compito di occuparsi della logica e del
disegno del fotogramma. In JavaScript questo si traduce in una chiamata alla funzione se-
tInterval , in modo da chiamare del codice a intervalli regolari. Nell'esempio 10.20 ag-
giungiamo quindi questa chiamata, in modo che crei 60 frame al secondo, che è il frame
rate tipico dei giochi.
Esempio 10.20
function start() {
context = canvas.getContext("2d");
// Ciclo del gioco, in millisecondi
setInterval(function () { update(); draw(); }, 1000 / 60) ;
}
Le funzioni chiamate sono due: update per le logiche e draw per il disegno. Per lo scopo,
nel primo metodo aggiorniamo a ogni frame la posizione della palla (variabili ballx e
bally ) e se questa supera i confini del canvas ne invertiamo il senso ( vx e vy in base
all'asse).
Esempio 10.21
function update() {
// Rimbalza in alto o in basso
if (bally > height - ballSize || bally < ballSize) {
vy = vy * -1;
count++;
}
// Rimbalza a sinistra o a destra
if (ballx > width - ballSize || ballx < ballSize) {
vx = vx * -1;
count++;
}
// Sposto la palla
 
Search WWH ::




Custom Search