7 days of WordPress themes, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Game Development
  2. Game Design

Crear un juego de Pong en HTML5 con EaselJS

Read Time: 12 mins

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:


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.


Paso 6: Bibliotecas Javascript

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

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.


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.


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.


Paso 11: Antecedentes

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


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.


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.


Paso 14: Vista del juego

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


Paso 15: Puntuación

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


Paso 16: Variables

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


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.


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().


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().


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().


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().


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().


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.


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:


Paso 26: Iniciar los botones de escucha

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


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.


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.

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.


Paso 30: Movimiento del jugador

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


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.


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:


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.


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.


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.


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.


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.


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.


Paso 39: Alerta

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


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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.