Crea un sencillo juego de disparos espaciales en HTML5 con EaselJS

Spanish (Español) translation by Esther (you can also view the original English article)

El año pasado, te mostré cómo crear un juego de disparos con Flash y AS3. Con el aumento de la popularidad de HTML5 (y sus capacidades), vamos a ver cómo hacer lo mismo con HTML5, JavaScript y EaselJS.

Avance del resultado final

Veamos el resultado final para el que vamos a trabajar:

Haz clic para jugar a la demo.

Paso 1: Breve resumen

Utilizando sprites prefabricados codificaremos un entretenido juego de Space Shooter en HTML5 utilizando la librería EaselJS.

El jugador podrá controlar una nave espacial y disparar a múltiples enemigos mientras viaja por el espacio.

Paso 2: Interfaz

Se utilizará una interfaz simple y futurista, esto implica mapas de bits y más. He utilizado una gran librería de sprites en la demo de este tutorial, estos son parte de los gratuitos gráficos Sinistar Clone.

Los recursos de interfaz necesarios para este tutorial se encuentran en la descarga adjunta.

Paso 3: Obtener EaselJS

La biblioteca EaselJS será utilizada para construir nuestro juego, asegúrate de leer el tutorial Getting Started si eres nuevo en esta biblioteca.

Puedes descargar EaselJS desde su página web oficial.

Paso 4: Estructura HTML

Preparemos nuestro documento HTML, es una estructura HTML simple para comenzar a escribir nuestra aplicación. Guarda esto como Shooter.html.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Shooter</title> 
	</head> 
	<body> 
	</body> 
</html>

Paso 5: Ocultar la luz móvil

Añadamos también un poco de CSS, esta línea eliminará el resaltado por defecto cuando se pulse sobre un elemento utilizando un navegador móvil; sin esto, la experiencia móvil disminuiría drásticamente.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Shooter</title> 
		 
		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> 
	 
	</head> 
	<body> 
	</body> 
</html>

Paso 6: Bibliotecas JavaScript

El siguiente código añade las librerías JavaScript necesarias para que nuestra aplicación funcione.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Shooter</title> 
		 
		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> 
 
		<script src="easel.js"></script> 
		<script src="Tween.js"></script> 
		<script src="sound.js"></script> 
		<script src="Main.js"></script> 
	</head> 
	<body> 
	</body> 
</html>

Main.js es el archivo que usaremos para almacenar todas nuestras funciones para el juego. Créalo ahora y guárdalo en la misma carpeta que Shooter.html. También necesitarás descargar las librerías EaselJS de la lista.

Paso 7: Llamar a la función Main

En las siguientes líneas llamamos a nuestra función principal; esta es la función que iniciará nuestra aplicación, será creada más adelante en nuestro código JavaScript.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Shooter</title> 
		 
		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> 
 
		<script src="easel.js"></script> 
		<script src="Tween.js"></script> 
		<script src="sound.js"></script> 
		<script src="Main.js"></script> 
 
	</head> 
	<body onload="Main();"> 
	</body> 
</html>

Paso 8: Elemento del lienzo

En esta línea se añade el Canvas. Le asignamos un ID para referenciarlo posteriormente y también establecemos su anchura y altura.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Shooter</title> 
		 
		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> 
 
		<script src="easel.js"></script> 
		<script src="Tween.js"></script> 
		<script src="sound.js"></script> 
		<script src="Main.js"></script> 
 
	</head> 
	<body onload="Main();"> 
		<canvas id="Shooter" width="320" height="480"></canvas> 
	</body> 
</html>

Paso 9: Iniciar el JavaScript

¡Empecemos a crear nuestro juego!

Abre tu editor de JavaScript preferido (cualquier editor de texto funcionará, pero no tendrás resaltado de sintaxis) y prepárate para escribir tu impresionante juego. Abre el archivo Main.js que creaste antes.

Paso 10: Definir el lienzo

Empezaremos por definir todas las variables gráficas y lógicas.

Las siguientes variables representan el elemento canvas HTML y el stage que estará vinculado a él. (La variable stage se comportará de forma similar al stage en un proyecto AS3 Flash).

 
/* Define Canvas */ 
 
var canvas; 
var stage;

Paso 11: Antecedentes

Las siguientes variables almacenan las imágenes de fondo. Se utilizan dos imágenes en mosaico para crear un fondo de desplazamiento infinito.

 
/* Background */ 
 
var bgImg = new Image(); 
var bg; 
var bg2Img = new Image(); 
var bg2;

Paso 12: Enviar

Esta es la nave que se utilizará como personaje del jugador o héroe.

 
/* Ship */ 
 
var sImg = new Image(); 
var ship;

Paso 13: Enemigo

Habrá varios enemigos en el escenario; usarán esto como gráfico de origen.

1
2	/* Enemy */
3
4	var eImg = new Image();

Paso 14: Jefe

Un jefe estará presente en el juego, más grande y con más salud que los otros enemigos. Estas variables se utilizan para instanciarlo.

 
/* Boss */ 
 
var bImg = new Image(); 
var boss;

Paso 15: Vidas

El icono "vida". Se dan tres vidas al principio, y se pierde una al ser golpeado por un enemigo.

1
2	/* Lives */
3
4	var lImg = new Image();

Paso 16: Balas

Esta es tu arma: dispara balas a los enemigos para matarlos. Esta variable almacena la imagen de origen.

1
2	/* Bullets */
3
4	var bltImg = new Image();

Paso 17: Gráficos de alerta

En el juego se utilizan dos alertas, una para cuando se gana y otra para cuando se pierde. Veremos cómo determinar una victoria o una pérdida más adelante en este tutorial.

 
/* Alert */ 
 
var winImg = new Image(); 
var loseImg = new Image(); 
var win; 
var lose;

Paso 16: Variables

Estas son las variables que usaremos, lee los comentarios en el código para saber más sobre ellas. Algunos de sus nombres se explican por sí mismos y por eso no tienen comentarios.

 
var lives = new Container(); //stores the lives gfx 
var bullets = new Container(); //stores the bullets gfx 
var enemies = new Container(); //stores the enemies gfx 
var bossHealth = 20; 
var score; 
var gfxLoaded = 0; //used as a preloader, counts the already loaded items 
var centerX = 160; 
var centerY = 240; 
var tkr = new Object(); //used as a Ticker listener 
var timerSource; //references a setInterval method

Paso 17: Sonidos

Utilizaremos efectos de sonido para mejorar la sensación del juego. Puedes encontrar los sonidos utilizados en este ejemplo en Soungle.com utilizando las palabras clave espacio, explosión y láser.

Paso 18: Función Main

La función Main() será la primera en ejecutarse cuando se cargue la página web, porque se hace referencia a ella en el atributo onload del documento HTML (mira el paso 7).

Llama a las funciones necesarias para iniciar el juego. Crearemos esas funciones en los próximos pasos, todo desde el paso 19 al 23 debe ir dentro de esta función.

 
function Main() 
{ 
	//code... 
}

Paso 19: Enlazar el lienzo

Este código obtiene el ID del lienzo HTML y lo vincula a la clase EaselJS Stage. Esto hará que la variable stage se comporte como la clase stage en AS3.

 
/* Link Canvas */ 
	 
canvas = document.getElementById('Shooter'); 
stage = new Stage(canvas);

Paso 20: Habilitar los eventos del ratón

Los eventos del ratón están deshabilitados por defecto en EaselJS para mejorar el rendimiento; como los necesitamos en el juego añadimos la siguiente línea.

1
2	stage.mouseEventsEnabled = true;

Paso 21: Cargar sonidos

Usaremos SoundJS para añadir sonidos a nuestro juego. El método addBatch de SoundJS utiliza un array de tres parámetros para cada llamada:

name: El nombre de la instancia que quieres que tenga el sonido, esto se usará para reproducir el sonido más tarde.
src: La URL del archivo de sonido.
instances: El número de instancias que se pueden reproducir al mismo tiempo.

 
/* Sound */ 
 
SoundJS.addBatch([ 
		{name:'boss', src:'boss.mp3', instances:1}, 
		{name:'explo', src:'explo.mp3', instances:10}, 
		{name:'shot', src:'shot.mp3', instances:10}]);

Paso 22: Cargar los gráficos

Este código se utiliza para precargar los gráficos con la ayuda de una función que escribiremos más adelante. Apunta cada objeto Imagen que creamos antes al archivo PNG fuente en nuestra carpeta de documentos. Se da un nombre para detectar qué imagen se carga y, por último, se llama a la función que maneja las imágenes cargadas.

 
/* Load GFX */ 
 
bgImg.src = 'bg.png'; 
bgImg.name = 'bg'; 
bgImg.onload = loadGfx; 
 	 
bg2Img.src = 'bg2.png'; 
bg2Img.name = 'bg2'; 
bg2Img.onload = loadGfx; 
 	 
sImg.src = 'ship.png'; 
sImg.name = 'ship'; 
sImg.onload = loadGfx; 
 
eImg.src = 'enemy1.png'; 
eImg.name = 'enemy'; 
eImg.onload = loadGfx; 
 
bImg.src = 'boss.png'; 
bImg.name = 'boss'; 
bImg.onload = loadGfx; 
 
lImg.src = 'live.png'; 
lImg.name = 'live'; 
lImg.onload = loadGfx; 
 
bltImg.src = 'bullet.png'; 
bltImg.name = 'bullet'; 
bltImg.onload = loadGfx; 
 
winImg.src = 'win.png'; 
winImg.name = 'win'; 
winImg.onload = loadGfx; 
 
loseImg.src = 'lose.png'; 
loseImg.name = 'lose'; 
loseImg.onload = loadGfx;

Paso 23: Establecer el marcador

La clase Ticker proporciona un "tick" centralizado, emitido a un intervalo establecido. Podemos utilizar su función tick() para ejecutar cierto código con una frecuencia regular.

El siguiente código establece la velocidad de fotogramas a 30 y define el escenario como el oyente de los ticks.

La clase TweenJS escuchará este tick para realizar las animaciones.

 
/* Ticker */ 
 
Ticker.setFPS(30); 
Ticker.addListener(stage);

Paso 24: Función de precarga

Cada vez que se cargue un gráfico se ejecutará esta función. Asignará cada imagen a un objeto bitmap y comprobará que todos los elementos están cargados antes de proceder a llamar a addGameView.

 
function loadGfx(e) 
{ 
	if(e.target.name = 'bg'){bg = new Bitmap(bgImg);} 
	if(e.target.name = 'bg2'){bg2 = new Bitmap(bg2Img);} 
	if(e.target.name = 'ship'){ship = new Bitmap(sImg);} 
	 
	gfxLoaded++; 
	 
	if(gfxLoaded == 9) 
	{ 
		addGameView(); 
	} 
}

Paso 25: Añadir vista de juego

Cuando todos los gráficos están cargados se llama a la función addGameView. Esta función añadirá la nave, el contador de vidas, la puntuación y los fondos al escenario.

 
function addGameView() 
{ 
	ship.x = centerX - 18.5; 
	ship.y = 480 + 34; 
	 
	/* Add Lives */ 
	 
	for(var i = 0; i < 3; i++) 
	{ 
		var l = new Bitmap(lImg); 
		 
		l.x = 248 + (25 * i); 
		l.y = 463; 
		 
		lives.addChild(l); 
		stage.update(); 
	} 
	 
	/* Score Text */ 
	 
	score = new Text('0', 'bold 14px Courier New', '#FFFFFF'); 
	score.maxWidth = 1000;	//fix for Chrome 17 
	score.x = 2; 
	score.y = 476; 
	 
	/* Second Background */ 
	 
	bg2.y = -480; 
	 
	/* Add gfx to stage and Tween Ship */ 
	 
	stage.addChild(bg, bg2, ship, enemies, bullets, lives, score); 
	Tween.get(ship).to({y:425}, 1000).call(startGame); 
}

Paso 26: Mover la nave

La nave del jugador será controlada por el ratón, y usamos esta función para manejar eso:

 
function moveShip(e) 
{ 
	ship.x = e.stageX - 18.5; 
}

e.stageX se refiere a la coordenada x del ratón, y esta función es llamada cada vez que el ratón se mueve.

Paso 27: Disparar

Nuestra nave podrá disparar balas para destruir y protegerse de los enemigos. Esta función se ejecutará cada vez que el usuario haga clic en el escenario y colocará una bala delante de la nave que posteriormente será movida por la función update(). También reproduce un sonido de disparo.

 
function shoot() 
{ 
	var b = new Bitmap(bltImg); 
	 
	b.x = ship.x + 13; 
	b.y = ship.y - 20; 
	 
	bullets.addChild(b); 
	stage.update(); 
	 
	SoundJS.play('shot'); 
}

Paso 28: Añadir la función de enemigo

No sería un shooter sin algo a lo que disparar. Aquí se utiliza un setInterval() para crear un enemigo cada 1000 milisegundos (puedes cambiar ese valor en el siguiente paso) que luego es movido por la función update().

 
function addEnemy() 
{ 
	var e = new Bitmap(eImg); 
	 
	e.x = Math.floor(Math.random() * (320 - 50)) 
	e.y = -50 
	 
	enemies.addChild(e); 
	stage.update(); 
}

Paso 29: Iniciar el juego

Estas líneas añadirán las escuchas necesarias al escenario y al temporizador; esto incluye eventos del ratón, eventos temporizados (a través de setInterval) y eventos del Ticker que actualizarán el juego cada fotograma.

 
function startGame() 
{ 
	stage.onMouseMove = moveShip; 
	bg.onPress = shoot; 
	bg2.onPress = shoot; 
	 
	Ticker.addListener(tkr, false); 
	tkr.tick = update; 
	 
	timerSource = setInterval('addEnemy()', 1000); 
}

Paso 30: Mover el fondo

El fondo se mueve en cada fotograma para simular el viaje espacial; cuando el sprite del fondo inferior alcanza el límite del escenario se mueve de nuevo a la parte superior, creando un bucle infinito.

1
2	function update()
3	{
4	/* Move Background */
5
6	bg.y += 5;
7	bg2.y += 5;
8
9	if(bg.y >= 480)
10	{
11	bg.y = -480;
12	}
13	else if(bg2.y >= 480)
14	{
15	bg2.y = -480;
16	}

Paso 31: Mover las balas

Las siguientes líneas de código comprueban si hay balas en el escenario; si es así, las balas se mueven hacia arriba.

 
/* Move Bullets */ 
	 
	for(var i = 0; i < bullets.children.length; i++) 
	{ 
		bullets.children[i].y -= 10; 
	}

Paso 32: Eliminar las balas fuera de escena

Agreguemos algunas líneas para detectar la posición de la bala, y usemos esto para destruir una bala cuando ya no sea visible.

 
/* Move Bullets */ 
	 
	for(var i = 0; i < bullets.children.length; i++) 
	{ 
		bullets.children[i].y -= 10; 
		 
		/* Remove Offstage Bullets */ 
		 
		if(bullets.children[i].y < - 20) 
		{ 
			bullets.removeChildAt(i); 
		} 
	}

Paso 33: Mostrar al jefe

Añadiremos un gran jefe malo al juego. Cuando el usuario alcance una determinada puntuación, el jefe aparecerá:

 
/* Show Boss */ 
	 
	if(parseInt(score.text) >= 500 && boss == null) 
	{ 
		boss = new Bitmap(bImg); 
				 
		SoundJS.play('boss'); 
				 
		boss.x = centerX - 90; 
		boss.y = -183; 
				 
		stage.addChild(boss); 
		Tween.get(boss).to({y:40}, 2000)   //tween the boss onto the play area 
	}

Paso 34: Mover enemigos

Los enemigos, al igual que las balas, también se mueven cada fotograma. Este código encuentra todos los enemigos en el escenario usando el contenedor enemies, y los mueve cada 5px hacia abajo.

 
/* Move Enemies */ 
	 
	for(var j = 0; j < enemies.children.length; j++) 
	{ 
		enemies.children[j].y += 5;

Paso 35: Eliminar los enemigos fuera del escenario

También comprobamos las posiciones de los enemigos para destruirlos cuando ya no sean visibles.

 
/* Move Enemies */ 
	 
	for(var j = 0; j < enemies.children.length; j++) 
	{ 
		enemies.children[j].y += 5; 
		 
		/* Remove Offstage Enemies */ 
		 
		if(enemies.children[j].y > 480 + 50) 
		{ 
			enemies.removeChildAt(j); 
		}

Paso 36: Colisión bala-enemigo

Se comprueba si las balas del contenedor colisionan con los enemigos; cuando esto ocurre, ambos se retiran del escenario, se reproduce un sonido y se actualiza la puntuación.

 
for(var k = 0; k < bullets.children.length; k++) 
{ 
	/* Bullet - Enemy Collision */ 
	 
	if(bullets.children[k].x >= enemies.children[j].x && bullets.children[k].x + 11 < enemies.children[j].x + 49 && bullets.children[k].y < enemies.children[j].y + 40) 
	{ 
		bullets.removeChildAt(k); 
		enemies.removeChildAt(j); 
		stage.update(); 
		SoundJS.play('explo'); 
		score.text = parseFloat(score.text + 50); 
	}

Paso 37: Colisión Bala - Jefe

El siguiente código maneja las colisiones del jefe, utiliza el mismo método usado en el bucle de colisión bala-enemigo. Aquí usamos la variable bossHealth para determinar cuando el jefe es derrotado.

 
/* Bullet - Boss Collision */ 
			 
	if(boss != null && bullets.children[k].x >= boss.x && bullets.children[k].x + 11 < boss.x + 183 && bullets.children[k].y < boss.y + 162) 
	{ 
		bullets.removeChildAt(k); 
		bossHealth--; 
		stage.update(); 
		SoundJS.play('explo'); 
		score.text = parseInt(score.text + 50); 
	} 
}

Paso 38: Colisión barco-enemigo

Aquí comprobamos si un enemigo colisiona con la nave del jugador; si lo hace, se reproduce un sonido, se elimina una vida y se anima la nave.

 
/* Ship - Enemy Collision */ 
		 
	if(enemies.hitTest(ship.x, ship.y) || enemies.hitTest(ship.x + 37, ship.y)) 
	{ 
		enemies.removeChildAt(j); 
		lives.removeChildAt(lives.length); 
		ship.y = 480 + 34; 
		Tween.get(ship).to({y:425}, 500) 
		SoundJS.play('explo'); 
	} 
}

Paso 39: Comprobar si se gana o se pierde

El jugador gana cuando el jefe pierde toda su salud y pierde si pierde todas sus propias vidas. Las siguientes líneas detectan esas situaciones y llaman a una función de alerta utilizando el parámetro correcto.

 
/* Check for win */ 
	 
	if(boss != null && bossHealth <= 0) 
	{ 
		alert('win'); 
	} 
	 
	/* Check for lose */ 
	 
	if(lives.children.length <= 0) 
	{ 
		alert('lose'); 
	} 
}

Paso 40: Alerta

La Alerta muestra al jugador información sobre el estado del juego; se muestra cuando se alcanza un evento del juego. Elimina los oyentes del juego y muestra el mensaje apropiado.

 
function alert(e) 
{ 
	/* Remove Listeners */ 
		 
	stage.onMouseMove = null; 
	bg.onPress = null; 
	bg2.onPress = null; 
	 
	Ticker.removeListener(tkr); 
	tkr = null; 
	 
	timerSource = null; 
	 
	/* Display Correct Message */ 
	 
	if(e == 'win') 
	{ 
		win = new Bitmap(winImg); 
		win.x = centerX - 64; 
		win.y = centerY - 23; 
		stage.addChild(win); 
		stage.removeChild(enemies, boss); 
	} 
	else 
	{ 
		lose = new Bitmap(loseImg); 
		lose.x = centerX - 64; 
		lose.y = centerY - 23; 
		stage.addChild(lose); 
		stage.removeChild(enemies, ship); 
	} 
	 
	bg.onPress = function(){window.location.reload();}; 
	bg2.onPress = function(){window.location.reload();}; 
	stage.update(); 
}

Paso 41: Prueba

¡Guarda tu trabajo (si no lo has hecho) y abre el archivo HTML en el navegador para ver tu juego HTML5 en funcionamiento!

Conclusión

Ya has aprendido a crear un juego de Space Shooter con todas sus características básicas, intenta ampliarlo utilizando lo que ya sabes. Un buen comienzo sería hacer que los enemigos o el jefe devuelvan los disparos al jugador.

Espero que te haya gustado este tutorial, ¡gracias por leer!