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

Lo scorrere del tempo

Possiamo animare qualsiasi proprietà che sia enumerabile: posizione, dimensione, rotazione, trasparenza, eccetera.

Un esempio facile potrebbe contenere un piccolo quadrato che si sposta di un pixel verso destra ad ogni iterazione di entreFrame, ma poi sparirebbe oltre il bordo del Canvas e non riusciremmo più a recuperarlo.

Ho pensato che una maniera corretta di visualizzare lo scorrere del tempo fosse la rappresentazione di un orologio, ed è venuto fuori così:

(function () {
  "use strict";
 
  var App = {
    canvasElement: undefined,
    canvasContext: undefined,
    arcAngle: 0
  };
 
  App.draw = function () {
    App.canvasContext.clearRect(0, 0, App.canvasElement.width, App.canvasElement.height);
    App.canvasContext.beginPath();
    App.canvasContext.lineWidth = 20;
    App.canvasContext.strokeStyle = '#006699';
    App.canvasContext.arc(275, 200, 150, 0, App.arcAngle);
    App.canvasContext.stroke();
  };
 
  App.enterFrame = function () {
    App.update();
    App.draw();
  };
 
  App.init = function () {
    App.canvasElement = document.getElementById("gameCanvas");
    App.canvasContext = App.canvasElement.getContext("2d");
    setInterval(App.enterFrame, 1000 / 60);
  };
 
  App.update = function () {
    var currentTime = new Date().getTime(),
        currentSeconds = (currentTime / 1000) % 60;
 
    App.arcAngle = 2 * Math.PI / 60 * currentSeconds;
  };
 
  document.addEventListener('DOMContentLoaded', App.init);
 
}());

La nuova Proprietà arcAngle è pensata per contenere un valore, espresso in radianti, per disegnare un arco. Come disegnare un Arco lo abbiamo già visto in uno degli articoli precedenti.

Nel Metodo update viene calcolato l’orario corrente e da questo orario vengono ricavati i secondi. Il valore dei secondi viene convertito in un angolo in proporzione a un minuto, ovvero un giro completo ogni 60 secondi.

Nel metodo draw ad ogni iterazione viene cancellato tutto il contenuto del Canvas e ridisegnato un arco, di volta in volta l’arco ha un’ampiezza pari al valore della Proprietà arcAngle. Ecco che improvvisamente tutto si muove.