Sviluppare un gioco HTML5 in 3 minuti



by   |  LETTURE 12360

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.