Guida Html5 la tua risorsa web sul nuovo markup html5 il linguaggio javascript e lo sviluppo di giochi su browser.
TUTORIALS

Sviluppare un gioco HTML5 in 3 minuti

- 29-05-2014 - Letture: 4915

Sembra quasi una prova da Guinnes dei primati ma voglio mostrare al mondo quanto sia semplice realizzare un gioco (seppure molto semplice) in HTML5 e Javascript

Sviluppare un gioco HTML5 in 3 minuti

Per prima cosa prepariamo l'occorrente per lo sviluppo:

Un editor di testi !

Tutto quà ? Beh, può sembrare poco ma non è necessario chissà quale IDE di sviluppo  per creare qualcosa di funzionante...

Il gioco che ci apprestiamo a realizzare è il Pong, una pietra miliare della storia dei videogame.

Cronometro alla mano iniziamo creando il file index.html  che conterrà la pagina container del Canvas e il richiamo ai sorgenti del gioco:

<html>
<head>
<title> Pong in HTML5 </title> 
</head>
<body onLoad=" init(); ">
    <center>
        <canvas id="canvas" width="500" height="350" style=" cursor:none;
          background-color:#333; ">
        Attenzione, questo browser non supporta i canvas.
        </canvas>
    </center>
    <script src="./game.js"></script>
</body>
</html>

All'interno del parametro onLoad del body inseriamo la funzione che verrà eseguita appena la pagina sarà caricata completamente nel browser.

L'unica vera novità riguarda l'elemento Canvas ossia una finestra grafica che contiene la schermata del nostro gioco.

Vediamo ora cosa inserire nel file game.js che contiene tutto il codice sorgente Javascript:

function gameLoop()
{
	aggiornaLogica();
	disegnaScena();
}

function init(){
   canvas.addEventListener('mousemove', mousemove, false);
   canvas.addEventListener('click', mouseclick, false);
   // Ripete il gameLoop() ogni 20 millisecondi
   intervallo = window.setInterval(gameLoop,20);
}

// Dichiarazione variabili globali
canvas = document.getElementById("canvas");
contesto = canvas.getContext("2d");

var scorea = 0, scoreb = 0;
var ballx = (canvas.width / 2);
var bally = (canvas.height / 2);
var ballvx = 0, ballvy = 0;
var posy = 150;
var cpuy = 100;

Come prima cosa si dichiara un elemento Canvas e si acquisisce il contesto 2D inserendolo nella variabile globale contesto. Le variabili successive servono a memorizzare alcuni dati di gioco come la posizione della pallina e il punteggio di partenza.

All'interno della funzione init (che come ricordo viene eseguita al termine del caricamento della pagina) di dichiara un EventListener sul click del mouse e sul suo movimento. Si procede poi a dichiarare l'esecuzione della funzione gameLoop ogni 20 millisecondi.

Ma vediamo ora le funzioni di controllo del mouse:

 

function mousemove (ev) {
  if (ev.layerX || ev.layerX == 0) { // Firefox
    posy = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera & Chrome
    posy = ev.offsetY;
  }
}

function mouseclick (ev) {
	if (ballvx == 0) {  ballvx = 10; ballvy = 0.4; }
}
 

La pressione del mouse determinerà semplicemente il lancio della pallina all'inizio del gioco, mentre l'evento di movimento del mouse aggiorna la coordinata Y della racchetta.

Vediamo ora la funzione di disegno della scena grafica:

 
function disegnaScena()
{
	// pulisco il canvas
	contesto.clearRect(0,0,canvas.width,canvas.height);
	
	// definisco lo stile di riempimento
	contesto.fillStyle = "#fff";
	
	// disegno le barre
	contesto.fillRect(20,posy - 40,10,80);
	contesto.fillRect(canvas.width - 30,cpuy - 40,10,80);
    
	// disegno la pallina
	contesto.fillRect(ballx,bally,8,8);
	
	// scrivo i punteggi
	contesto.fillText("PLAYER: " + scorea,40,20);
	contesto.fillText("CPU: " + scoreb,canvas.width - 80,20);
}

 

Qui vediamo il comando che cancella la schermata di gioco, poi dopo viene definito lo stile di riempimento bianco per disegnare gli elementi grafici composti da 3 rettangoli. Infine vengono tracciati i punteggi del computer del del giocatore.

Vediamo per terminare la funzione di gestione della logica del gioco:

 

function aggiornaLogica()
{
	  // controllo cpu
	  if (cpuy < bally) cpuy +=6;
	  if (cpuy > bally) cpuy -=6;
	 
	  // aggiorno dati e posizioni degli oggetti nella scena
	  if (posy < 40) posy = 40;
	  if (posy > canvas.height - 40) posy = canvas.height - 40;
	  
	  if (cpuy < 40) cpuy = 40;
	  if (cpuy > canvas.height - 40) cpuy = canvas.height - 40;
	  
	  ballx += ballvx;
	  bally += ballvy;

	  
	  // URTI PALLINA
	  if ((ballvy > 0) && (bally >= canvas.height - 3)) ballvy = -ballvy;  
	  if ((ballvy < 0) && (bally <= 3))  ballvy = -ballvy; 
	  
	  if ((ballvx > 0) && (ballx >= canvas.width - 30) && (ballx <= canvas.width - 15)) {
		  
		  if ((bally >= cpuy - 40) && (bally <= cpuy + 40)) { 
		  				ballvx = - ((Math.random() * 5) + 10);
						ballvy = (Math.random() * 16) - 8;
		  }
	  }
	  
	  if (ballx > canvas.width) {  
	  		scorea ++; ballx = (canvas.width / 2);  
	  		bally = (canvas.height / 2); ballvx = 0; ballvy = 0; 
	  }
	  
	  // URTI USER
	  if ((ballvx < 0) && (ballx >= 25) && (ballx <= 40)) {
		  
		  if ((bally >= posy - 40) && (bally <= posy + 40)) { 
		  				ballvx = ((Math.random() * 5) + 10);
						ballvy = (Math.random() * 16) - 8;
		  }
	  }
	  
	  if (ballx < 0 ) { 
	  		scoreb ++; 
			ballx = (canvas.width / 2);	
			bally = (canvas.height / 2); 
			ballvx = 0; ballvy = 0; 
	  }
}

 

Ad ogni ciclo del gameloop la posizione della pallina viene incrementata di un valore arbitrario.

Questa funzione all'apparenza più complessa non fa altro che confrontare la posizione X e Y della pallina per gestire i rimbalzi e l'eventuale punto assegnato quando si superano i limiti orizzontali della schermata. Una volta effettuato il punto la pallina torna nella posizione centrale in attesa del click del mouse.

Il gioco è fatto, seppur molto semplice e poco ottimizzato questo Pong si realizza in pochissimo tempo ed è un buon esempio per iniziare ad avvicinarsi alla programmazione di giochi basati su Canvas.

 

Articoli correlati
Loading comments
ebook sviluppare giochi in html5 e javascript
Il sito Guida HTML5 è stato realizzato da TheArchitect
Copyright © 2017 All Rights Reserved -
Nome e Cognome
Email valida
Username
Password
* Cliccando su REGISTRATI accetti le nostre regole sulla privacy
ATTENZIONE: controllare sempre la cartella spam nella casella di posta, inquanto è possibile che alcuni provider inseriscano automaticamente la mail di attivazione in questa cartella.

CHIUDI
X

Password dimenticata ? Inserisci il tuo indirizzo email e ti invieremo i dati di accesso

Email valida
ATTENZIONE: controllare sempre la cartella spam nella casella di posta, inquanto è possibile che alcuni provider inseriscano automaticamente la mail di attivazione in questa cartella.

CHIUDI
X
Powered by: World(129)