Categorie
ECMAscript Giochi Giochi HTML5 Tutorial Tutorial JavaScript

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

Finalmente è giunto il momento di animare qualcosa, in questo articolo vedremo come gestire il tempo e realizzeremo un orologio ad archi.

Loading spinner

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.

Continua a leggere questa collana:

Loading spinner

Lascia un commento