Intro
This post is part of the series Realizzare Giochi in HTML5
Other posts in this series:
- Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I
- Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
- 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:
Realizzare un Gioco in HTML5 Ep. IV: Assets e Preload
