Categories
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

Lo scorrere del tempo

This post is part of the series Realizzare Giochi in HTML5

Other posts in this series:

  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 (Current)

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.

Continue reading this series:

Loading spinner

Leave a Reply

Your email address will not be published. Required fields are marked *