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

Introduzione

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.

Potrebbero interessarti anche...

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.