Premi “Invio” per saltare al contenuto

Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi

Il Loop del Gioco

Questo articolo è parte della collana Realizzare Giochi in HTML5

Altri articoli in questa collana:

  1. Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I
  2. Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
  3. Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi (Corrente)

Affinché qualcosa si muova sullo schermo abbiamo bisogno di eseguire le operazioni di disegno a intervalli regolari.

(function () {
  "use strict";
 
  var App = {
    canvasElement: undefined,
    canvasContext: undefined
  };
 
  App.enterFrame = function () {
    document.write('. ');
  };
 
  App.init = function () {
    App.canvasElement = document.getElementById("gameCanvas");
    App.canvasContext = App.canvasElement.getContext("2d");
    setInterval(App.enterFrame, 1000 / 60);
  };
 
  document.addEventListener('DOMContentLoaded', App.init);
 
}());

Il Metodo setInterval richiama una determinata funzione a intervalli regolari. L’intervallo è definito in millesimi di secondo, il valore 1000 / 60 rappresenta un frameRate di 60 fotogrammi al secondo.

Il Metodo enterFrame al momento non farebbe nulla di interessante, ma per poter apprezzare il funzionamento ho aggiunto un comando che scrive un punto all’interno della pagina, così è possibile apprezzare un qualche movimento fino a che non avremo scritto una funzione migliore.

loading spinner

Continua a leggere questa collana:

Aggiungi il primo commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.