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

Intro

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)

Nel primo articolo di questa serie abbiamo visto cosa è HTML5 e cosa è un Canvas. Nel secondo articolo di questa serie abbiamo visto come disegnare forme e immagini all’interno di un Canvas. Oggi finalmente vedremo qualcosa muoversi, ed è il momento di fare un po’ di ordine nel nostro codice.

Il codice che iniziamo a scrivere oggi sarà la base per tutti quelli futuri, quindi è il caso di pensare bene a come organizzare file e cartelle. Per non complicarci inutilmente la vita ho deciso che avremo un unica pagina HTML e conserveremo gli altri n, m v in specifiche cartelle, una per ogni tipo di risorsa (js, css, fonts, sounds, eccetera).

Per oggi gli asset si limiteranno a un unico file JavaScript.

Un’altra novità è che da oggi tutti i file degli esempi saranno disponibili anche su GitHub e gratuitamente scaricabili con licenza MIT, trovate il link alla fine dell’articolo.

Iniziamo con la creazione del nostro unico file .html.

<!doctype html>
<html lang="it">
  <head>
    <meta charset="UTF-8">
    <title>Lesson 1</title>
    <script type="text/javascript" src="js/game.js"></script>
  </head>
  <body>
    <canvas width="550" height="400" id="gameCanvas">Il tuo browser non supporta i canvas... davvero?</canvas>
  </body>
</html>

Questo è il contenuto del file index.html. Non è molto diverso da quello che abbiamo visto fino ad ora. L’unica differenza rilevante è che caricheremo un file .js esterno anziché scrivere il codice JavaScript direttamente in pagina.

All’interno di una cartella che chiameremo js inseriamo un file chiamato game.js.

(function () {
  "use strict";
 
  // .... 
}());

Questo script in questo momento non fa assolutamente nulla, è solo un contenitore vuoto. Adesso che abbiamo lo “scheletro della nostra applicazione possiamo cominciare.

Continue reading this series:

Loading spinner

Leave a Reply

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