Crear un juego de Pong en HTML5 con EaselJS

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

En este tutorial, crearemos un clon del clásico juego Pong en HTML5, utilizando la librería EaselJS. El juego tendrá múltiples pantallas, efectos de sonido, y un oponente (muy simple) de IA.

Paso 1: Breve resumen

Utilizando gráficos prefabricados codificaremos un entretenido juego de Pong en HTML5 utilizando la librería EaselJS, que proporciona una interfaz similar a Flash para el lienzo de HTML5. Para una introducción a EaselJS, mira este artículo de Activetuts+.

El jugador podrá controlar una paleta usando el ratón y jugar contra el oponente controlado por el ordenador para conseguir puntos.

Paso 2: Interfaz

Se utilizará una interfaz sencilla con un estilo neofuturista; esto implica múltiples formas, botones, mapas de bits y más.

Los gráficos necesarios para este tutorial se encuentran en la descarga adjunta.

Paso 3: Obtener EaselJS

La biblioteca EaselJS será utilizada para construir nuestro juego, asegúrate de leer el tutorial de inicio si eres nuevo en esta biblioteca.

Puedes descargar la última versión de EaselJS desde su web oficial. Sin embargo, puede ser incompatible con el código aquí, por lo que sugiero utilizar la versión de la biblioteca que se incluye con la descarga de la fuente.

Paso 4: Estructura HTML

Vamos a preparar nuestro documento HTML. Empezaremos con lo más básico, un esquema básico:

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

Paso 5: Ocultar el resaltado del móvil

También debemos añadir un poco de CSS para eliminar el resaltado por defecto que se aplica cuando se toca un elemento en un navegador móvil. Sin esto, la experiencia móvil disminuiría drásticamente.

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

Paso 6: Bibliotecas Javascript

El siguiente código añade las librerías javascript necesarias para que nuestra aplicación funcione.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Pong</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>/

Además de EaselJS, también utilizaremos TweenJS (para manejar las transiciones de pantalla y el bucle del juego) y SoundJS (para los efectos de sonido).

Main.js es el archivo que usaremos para mantener nuestro propio código JS.

Paso 7: Llamar a la función principal

En las siguientes líneas llamamos a nuestra función Main(). Esta es la función que iniciará nuestra aplicación; será creada más adelante en el tutorial, dentro de Main.js.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Pong</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: Etiqueta del lienzo

En esta línea se crea un lienzo HTML5; le asignamos un ID para poder referenciarlo posteriormente y también establecemos su anchura y altura.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Pong</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="Pong" width="480" height="320"></canvas> 
	</body> 
</html>

Paso 9: Crear Main.js

¡Empecemos a crear nuestro juego!

Abre tu editor de JavaScript preferido (cualquier editor de texto funcionará, pero no tendrás resaltado de sintaxis) y prepárate para escribir el código. Recuerda guardar el archivo como Main.js en la carpeta de tu proyecto.

Paso 10: Definir el lienzo

Empezaremos por definir todas las variables gráficas y lógicas.

Las siguientes variables representan el elemento HTML canvas y el stage que estará vinculado a él. La variable stage se comportará de forma similar a la stage AS3.

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

Paso 11: Antecedentes

Esta variable almacena la imagen de fondo del título.

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

Paso 12: Vista del título

Esta es la Vista de Título, la primera pantalla interactiva que aparece en nuestro juego. Estas variables almacenan sus componentes.

 
/* Title View */ 
 
var mainImg = new Image(); 
var main; 
var startBImg = new Image(); 
var startB; 
var creditsBImg = new Image(); 
var creditsB; 
 
var TitleView = new Container();

Paso 13: Créditos

Esta vista mostrará los créditos, el año y el copyright del juego, estas variables se utilizarán para almacenarlo.

 
/* Credits */ 
 
var creditsViewImg = new Image(); 
var credits;

Paso 14: Vista del juego

Las siguientes variables almacenan los gráficos individuales que aparecen en la Vista de Juego:

 
/* Game View */ 
 
var playerImg = new Image(); 
var player; 
var ballImg = new Image(); 
var ball; 
var cpuImg = new Image(); 
var cpu; 
var winImg = new Image(); 
var win; 
var loseImg = new Image(); 
var lose;

Paso 15: Puntuación

Los valores de puntuación serán manejados por las siguientes variables:

 
/* Score */ 
 
var playerScore; 
var cpuScore;

Paso 16: Variables

Estas son las variables que usaremos, lee los comentarios en el código para entender para qué sirven:

 
var xSpeed = 5; //Horizontal speed of the ball 
var ySpeed = 5; //Vertical speed of the ball 
var gfxLoaded = 0; //used as a preloader, counts the already loaded items 
var tkr = new Object; //used as an event listener to the Ticker

Paso 17: Crear efectos de sonido

Utilizaremos efectos de sonido para mejorar la sensación del juego. Los sonidos de este ejemplo fueron creados con la excelente herramienta gratuita as3sfxr y convertidos a MP3 con Audacity.

Todos los sonidos necesarios se encuentran en la descarga de la fuente. Si quieres crear los tuyos propios, necesitarás cuatro:

hit.mp3: se reproduce cuando la pelota golpea una pala
playerScore.mp3: se reproduce cuando el jugador marca
enemyScore.mp3: se reproduce cuando el enemigo anota
wall.mp3: se reproduce cuando el balón toca el límite superior o inferior

Paso 18: Función principal

La función Main() será la primera en ejecutarse cuando se cargue la página web, porque se hace referencia a ella en el atributo onload del documento HTML (véase el paso 7).

Llamará a las funciones necesarias para iniciar el juego.

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

Paso 19: Enlazar el lienzo

Este código obtiene el ID del lienzo HTML y lo vincula a la clase EaselJS Stage. Esto hará que la variable stage se comporte como la clase stage en AS3. Añade esto a Main().

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

Paso 20: Habilitar los eventos del ratón

Los eventos del ratón están desactivados por defecto en EaselJS para mejorar el rendimiento. Como los necesitamos en el juego, añadimos la siguiente línea. Añade esto a Main().

1
2	stage.mouseEventsEnabled = true;

Paso 21: Cargar sonidos

Usaremos SoundJS para añadir sonidos a nuestro juego; escribe el siguiente código para importar los sonidos que usaremos. Añade esto a Main().

 
/* Sound */ 
 
SoundJS.addBatch([ 
	{name:'hit', src:'hit.mp3', instances:1}, 
	{name:'playerScore', src:'playerScore.mp3', instances:1}, 
	{name:'enemyScore', src:'enemyScore.mp3', instances:1}, 
	{name:'wall', src:'wall.mp3', instances:1}]);

Paso 22: Cargar los gráficos

Este código se utiliza para precargar los gráficos, con la ayuda de una función que escribiremos más adelante. Establece los objetos Image que creamos antes para que apunten a los archivos PNG de origen relevantes en nuestra carpeta de documentos.

Se le da un nombre a cada una, para poder detectar qué imagen se carga después, y por último se llama a la función que maneja las imágenes cargadas.

Añade esto a Main().

 
/* Load GFX */ 
 
bgImg.src = 'bg.png'; 
bgImg.name = 'bg'; 
bgImg.onload = loadGfx; 
 
mainImg.src = 'main.png'; 
mainImg.name = 'main'; 
mainImg.onload = loadGfx; 
 
startBImg.src = 'startB.png'; 
startBImg.name = 'startB'; 
startBImg.onload = loadGfx; 
 
creditsBImg.src = 'creditsB.png'; 
creditsBImg.name = 'creditsB'; 
creditsBImg.onload = loadGfx; 
 
creditsViewImg.src = 'credits.png'; 
creditsViewImg.name = 'credits'; 
creditsViewImg.onload = loadGfx; 
 
playerImg.src = 'paddle.png'; 
playerImg.name = 'player'; 
playerImg.onload = loadGfx; 
 
ballImg.src = 'ball.png'; 
ballImg.name = 'ball'; 
ballImg.onload = loadGfx; 
 
cpuImg.src = 'paddle.png'; 
cpuImg.name = 'cpu'; 
cpuImg.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 una emisión centralizada de ticks o latidos en un intervalo establecido. Esto se puede utilizar para desencadenar el bucle del juego.

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

La clase TweenJS escuchará este tick para realizar las animaciones. Añade esto a Main().

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

Paso 24: Función de precarga

Cada vez que se cargue un gráfico se ejecutará esta función. Asignará cada imagen a un objeto de mapa de bits y comprobará que todos los elementos están cargados antes de proceder.

 
function loadGfx(e) 
{ 
	if(e.target.name = 'bg'){bg = new Bitmap(bgImg);} 
	if(e.target.name = 'main'){main = new Bitmap(mainImg);} 
	if(e.target.name = 'startB'){startB = new Bitmap(startBImg);} 
	if(e.target.name = 'creditsB'){creditsB = new Bitmap(creditsBImg);} 
	if(e.target.name = 'credits'){credits = new Bitmap(creditsViewImg);} 
	if(e.target.name = 'player'){player = new Bitmap(playerImg);} 
	if(e.target.name = 'ball'){ball = new Bitmap(ballImg);} 
	if(e.target.name = 'cpu'){cpu = new Bitmap(cpuImg);} 
	if(e.target.name = 'win'){win = new Bitmap(winImg);} 
	if(e.target.name = 'lose'){lose = new Bitmap(loseImg);} 
	 
	gfxLoaded++; 
	 
	if(gfxLoaded == 10) // remember to change this if you add more images 
	{ 
		addTitleView(); 
	} 
}

Paso 25: Añadir vista de título

Cuando todos los gráficos están cargados, la vista de título se añade al escenario mediante la siguiente función:

 
function addTitleView() 
{ 
	startB.x = 240 - 31.5; 
	startB.y = 160; 
	startB.name = 'startB'; 
	 
	creditsB.x = 241 - 42; 
	creditsB.y = 200; 
	 
	TitleView.addChild(main, startB, creditsB); 
	stage.addChild(bg, TitleView); 
	stage.update();

Paso 26: Iniciar los botones de escucha

Esta función añade los listeners necesarios a los botones TitleView (es parte de addTitleView()):

1
2	startB.onPress = addGameView;
3	creditsB.onPress = showCredits;
4	}

Paso 27: Mostrar créditos

La pantalla de créditos se muestra cuando el usuario hace clic en el botón de créditos; se añade un oyente del ratón a la imagen completa para eliminarla.

 
function showCredits() 
{ 
	// Show Credits 
		 
	credits.x = 480; 
		 
	stage.addChild(credits); 
	stage.update(); 
	Tween.get(credits).to({x:0}, 300); 
	credits.onPress = hideCredits; 
}

Paso 28: Ocultar los créditos

Cuando se haga clic en la pantalla de créditos, ésta se interpolará hacia atrás y se retirará del escenario.

 
// Hide Credits 
 
function hideCredits(e) 
{ 
	Tween.get(credits).to({x:480}, 300).call(rmvCredits); 
} 
 
// Remove Credits 
 
function rmvCredits() 
{ 
	stage.removeChild(credits); 
}

Detengámonos aquí para probar lo que hemos hecho hasta ahora. Haz clic aquí para ver una demostración de los hitos.

Recuerda que algunas líneas han sido comentadas ya que algunas funciones aún no han sido creadas.

Recuerda que el hito está incluido en los archivos fuente, así que si por alguna razón tu archivo no imita a este, compara tu fuente con la mía para ver qué puede estar causando eso.

Paso 29: Mostrar la vista del juego

Las siguientes líneas eliminan el TitleView del escenario y añade los elementos GameView al escenario. Se añade un receptor de ratón en el fondo, para iniciar el juego cuando se haga clic.

 
function addGameView() 
{ 
	// Destroy Menu & Credits screen 
	 
	stage.removeChild(TitleView); 
	TitleView = null; 
	credits = null; 
	 
	// Add Game View 
	 
	player.x = 2; 
	player.y = 160 - 37.5; 
	cpu.x = 480 - 25; 
	cpu.y = 160 - 37.5; 
	ball.x = 240 - 15; 
	ball.y = 160 - 15; 
	 
	// Score 
	 
	playerScore = new Text('0', 'bold 20px Arial', '#A3FF24'); 
	playerScore.maxWidth = 1000;	//fix for Chrome 17 
	playerScore.x = 211; 
	playerScore.y = 20; 
	 
	cpuScore = new Text('0', 'bold 20px Arial', '#A3FF24'); 
	cpuScore.maxWidth = 1000;	//fix for Chrome 17 
	cpuScore.x = 262; 
	cpuScore.y = 20; 
	 
	stage.addChild(playerScore, cpuScore, player, cpu, ball); 
	stage.update(); 
	 
	// Start Listener  
	 
	bg.onPress = startGame; 
}

Paso 30: Movimiento del jugador

El jugador se moverá junto con la posición vertical del ratón:

 
function movePaddle(e) 
{ 
	// Mouse Movement 
	 
	player.y = e.stageY; 
}

Paso 31: Iniciar el juego

Este código se ejecuta cuando el jugador hace clic en el fondo del juego, añade el oyente del ratón que activa la función en el paso anterior, y añade un Ticker para controlar el bucle del juego.

Presta atención a la forma en que se crea el ticker: es el equivalente a un evento Timer en AS3.

 
function startGame(e) 
{ 
	bg.onPress = null; 
	stage.onMouseMove = movePaddle; 
	 
	Ticker.addListener(tkr, false); 
	tkr.tick = update; 
}

Paso 32: Reiniciar

Cuando se anota un punto (por el jugador o el ordenador), las palas y la pelota vuelven a su posición original y el juego se detiene:

 
function reset() 
{ 
	ball.x = 240 - 15; 
	ball.y = 160 - 15; 
	player.y = 160 - 37.5; 
	cpu.y = 160 - 37.5; 
	 
	stage.onMouseMove = null; //stop listening to the mouse 
	Ticker.removeListener(tkr); //pause the game 
	bg.onPress = startGame; 
}

Paso 33: Movimiento del balón

Si el juego no está pausado, la pelota se moverá en cada fotograma usando las variables que creamos antes.

 
function update() 
{ 
	// Ball Movement  
 
	ball.x = ball.x + xSpeed; 
	ball.y = ball.y + ySpeed;

Paso 34: Movimiento de la CPU

Este código controla el movimiento de la computadora; la paleta se mueve de manera que siga la pelota mientras tiene cierto margen de error.

1
2	if(cpu.y < ball.y) {
3	cpu.y = cpu.y + 2.5;
4	}
5	else if(cpu.y > ball.y) {
6	cpu.y = cpu.y - 2.5;
7	}

Paso 35: Colisiones en la pared

Aquí comprobamos si la pelota está en el borde superior o inferior del lienzo; si es así, se invierte la velocidad vertical y se reproduce un sonido.

1
2	if((ball.y) < 0) { ySpeed = -ySpeed; SoundJS.play('wall');};//Up
3	if((ball.y + (30)) > 320) { ySpeed = -ySpeed; SoundJS.play('wall');};//down

Paso 36: Puntuaciones

Ahora los lados izquierdo y derecho. Este código también modifica la puntuación, llama a la función de reinicio y reproduce un sonido diferente según el lado que haya tocado la pelota.

 
/* CPU Score */ 
 
if((ball.x) < 0) 
{ 
	xSpeed = -xSpeed; 
	cpuScore.text = parseInt(cpuScore.text + 1); 
	reset(); 
	SoundJS.play('enemyScore'); 
} 
 
/* Player Score */ 
 
if((ball.x + (30)) > 480) 
{ 
	xSpeed = -xSpeed; 
	playerScore.text = parseInt(playerScore.text + 1); 
	reset(); 
	SoundJS.play('playerScore'); 
}

Paso 37: Colisiones entre pelotas y paletas

El siguiente código comprueba si la pelota está colisionando con una paleta, comparando la posición de la paleta con las coordenadas de la pelota. Si las cajas delimitadoras de ambos se cruzan, hay una colisión, por lo que invertimos la velocidad x de la pelota y reproducimos un sonido.

 
/* Cpu collision */ 
 
if(ball.x + 30 > cpu.x && ball.x + 30 < cpu.x + 22 && ball.y >= cpu.y && ball.y < cpu.y + 75) 
{ 
	xSpeed *= -1; 
	SoundJS.play('hit'); 
} 
 
/* Player collision */ 
 
if(ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75) 
{ 
	xSpeed *= -1; 
	SoundJS.play('hit'); 
}

Paso 38: Comprobar si se gana/se acaba el juego

Puedes modificar la condición de finalización en las siguientes líneas, por defecto está fijada en 10 puntos.

 
/* Check for Win */ 
 
if(playerScore.text == '10') 
{ 
	alert('win'); 
} 
 
/* Check for Game Over */ 
 
if(cpuScore.text == '10') 
{ 
	alert('lose'); 
}

Paso 39: Alerta

Esta función detendrá el juego y mostrará una alerta, cuyo contenido dependerá del resultado del juego.

 
function alert(e) 
{ 
	Ticker.removeListener(tkr); 
	stage.onMouseMove = null; 
	bg.onPress = null 
	 
	if(e == 'win') 
	{ 
		win.x = 140; 
		win.y = -90; 
	 
		stage.addChild(win); 
		Tween.get(win).to({y: 115}, 300); 
	} 
	else 
	{ 
		lose.x = 140; 
		lose.y = -90; 
	 
		stage.addChild(lose); 
		Tween.get(lose).to({y: 115}, 300); 
	} 
}

Paso 40: Prueba

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

Conclusión

¡Prueba a modificar las variables del juego para crear tu propia versión del mismo!

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