Premi “Invio” per saltare al contenuto

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

Lo scorrere del tempo

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)

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.

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.