Videogioco-HTML5

Creare un videogioco in HTML 5

Giovedì 14 aprile 2011

by vRoby

INTRODUZIONE

Con la versione 5 html mostra i muscoli e si scrolla (o almeno ci prova) di dosso flash e java

HTML5 porta con se molte novità legate alla geolocalizazione ed altre migliorie. Una delle più azzeccate è pero la tag canvas. Nata in (aime sigh.) apple questa feature permette di inserire in una pagina html una zona grafica molto simile a uno schermo su cui è possibile disegnare con il javascript.

In pratica è possibile usare il javascript come linguaggio per applicazioni grafiche. L’utilizzo è un po complesso tuttavia ho trovato un ottima libreria che semplifica di molto la creazione di un videogioco con html 5: easel.js

SI PARTE !

Faremo un micro breakout.

Per chi non lo sapesse è un semplice erede di pong e predecessore del mitico arcanoid. la pallina parte dal basso e sale rimbalza sui muri laterali e sopra nela parte bassa sta la racchetta comandata dal giocatore che evita la perdita della pallina verso il basso.A seconda di dove tocca la racchetta la pallina risale.

Iniziamo!!

per prima cosa importiamo il progetto vuoto che potete scaricare da qui

MICRO BREAK-OUT

Dovete scompattare e rinominiamo i file base.* in mbo(micro break out). Ora apriamo gimp e disegnamo un background (velocemente è solo estetica) la racchetta e la pallina. Per il background è suggeribile usare un jpg più leggero da scaricare mentre per pallina e racchetta usiamo il formato png e il canale alpha per la trasparenza. HTML5 non dispone di colorkey ma solo delle trasparenze con IL canale alpha.

Quindi iniziamo ad inserire un po di codice:

Il file mbo.html è la pagina html che ospita il canvas e i tag audio per gli eventuali suoni e la colonna sonora del nostro gioco da questo file vengono caricati i file javascript easel.js input.js e il nostro mbo.js. Quest’ultimo conterrà il nostro gioco.

Javascript è un linguaggio a oggetti ma per un programma cosi banale non è il caso di complicarsi troppo la vita.Usiamo una via di mezzo, alcuni oggetti ma non troppo. Fa da se che vogliamo sviluppare a livello professionale dovremo usare in modo più profondo questi noiosi artifizi.

CODICE

Cominciamo a vedere il codice di mbo.js

ci sono gia diversi oggeti impiantati:

var canvas;
var stage;

e alcuni commentati ...uno di questi fa esattamente al caso nostro

//caricamento bitmap
var img_background=new Image(); img_background.src="media/background.jpg";
var background= new Bitmap(img_background);

con questi tre comandi abbiamo aggiunto alla displaylist di easel il background copiamo e reioncolliamo lo stesso codice cambiando tutti i nomi background con racchetta cosi:

//racchetta
var img_racchetta=new Image(); img_racchetta.src="media/racchetta.png";
var racchetta= new Bitmap(img_racchetta);

e lo facciamo anche con pallina quindi dichiariamo 2 variabili

var pallina_vx;
var pallina_vy;

ci serviranno per spostare la pallina

e dichiariamo infine

var game;

che useremo per lo stato del gioco ;)

entriamo nella routine init qui colleghiamo gli oggetti al canvas e li inseriamo nella display list

gli oggetti e le variabili li abbiamo dichiarati fuori dalla routines cosicche possono essere visibili in tutto il codice

la prima parte è già scritta e non la tocchiamo ci sono anche parti per l’audio ma per il momento ci concentriamo sulla parte video

//find canvas and load images, wait for last image to load
canvas = document.getElementById("Canvas");
stage = new Stage(canvas);

questo codice appunto collega il canvas al nostro oggetto e inserisce il nostro stage che è il contenitore di radice della libreria easel. E’ gia implementato nel progetto vuoto tanto è sempre uguale.

//background
background.x=0;
background.y=0;
stage.addChild(background);

con questi comandi posizioniamo la bitmap Background e la colleghiamo al nostro stage le coordinate sono in tutto e per tutto uguali a quelle dei display con l’angolo in alto a sinistra alla coordinata 0,0

//racchetta
racchetta.x=320;
racchetta.y=460;
racchetta.regX=32;
racchetta.regY=0;
stage.addChild(racchetta);

con questo posizioniamo la racchetta. inoltre poizioniamo la coordinata di riferimento in alto al centro della bit map e non a sinistra come di default. questo per ragioni legate alle coordinate

lo stesso con pallina (ometto il codice è molto simile)

infine settiamo il tempo di aggiornamento usando l’oggetto ticker e la variabile game allo stato di 0

// we want to do some work before we update the canvas,
// otherwise we could use Ticker.addListener(stage);
Ticker.setFPS(50);
Ticker.addListener(window);
  
game=0;
  

bene siamo pronti

entriamo nella routine dove faremo svolgere il gioco la routine tick che verra invocata automaticamente 50 volte ogni secondo

la routine è divisa in 3 sezioni

la prima è contenuta in un

if (game==0)

e contiene lo stato del gioco prima del via resetta le coordinate

questa riga verifica la pressione del tasto spazio

if(key[KEY_SPACE])game=1;

l’array key definito nel file input.js contiene la mappa dei tasti premuti 1 se è premuto il tasto e 0 se non è premuto KEY_SPACE invece è il valore 32 corrispondente alla barra spaziatrice

quindi premendo spazio il gioco cambia a stato 1

e la routine tick andrà ad eseguire la seconda sezione del suo codice

Questa sezione di codice è divisa in 4 parti

la gestione della racchetta con i tasti che spostano le coordinate di visualizzazione

la gestione della pallina con gli aggiornamenti di coordinata

la gestione dei rimbalzi

e il ritorno allo stato 0 se la pallina è persa

infine questo codice

// update the stage:
stage.update();

provvede ad aggiornare il canvas ogni 50 esimo di secondo

il nostro gioco è gia piu di una manciata di righe di testo a voi il resto.

Pagina_principale	Ordine_cronologico	Componentistica	Supporti-di-memoria