7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Games

Aprenda CreateJS construyendo un juego de Pong HTML5

Scroll to top
Read Time: 13 mins

Spanish (Español) translation by Juan Pablo Diaz Cuartas (you can also view the original English article)

La web se mueve rápido, ¡tan rápido que nuestro tutorial original de EaselJS ya está desactualizado! En este tutorial, aprenderá a usar el nuevo conjunto de aplicaciones CreateJS creando un clon de Pong simple.


Vista previa del resultado final

Echemos un vistazo al resultado final para el que trabajaremos:

The PONG gameThe PONG gameThe PONG game

Dele "click" para jugar

Este tutorial se basa en el juego Create a Pong de Carlos Yanez en HTML5 con EaselJS, que a su vez se basa en su guía Getting Started With EaselJS. Los gráficos y efectos de sonido están tomados del tutorial anterior.


Paso 1: Crea index.html

Este será nuestro archivo index.html principal:

Como puede ver, es bastante corto y consiste principalmente en cargar las bibliotecas CreateJS.

Desde el lanzamiento de CreateJS (que básicamente agrupa todas las bibliotecas EaselJS separadas) ya no tenemos que descargar los archivos JS y alojarlos en nuestro sitio web; los archivos ahora se colocan en un CDN (Content Delivery Network) que nos permite cargar estos archivos de manera remota lo más rápido posible.

Repasemos el código:

Esta línea elimina el resaltado móvil que puede aparecer cuando intenta jugar el juego en un dispositivo móvil. (El resaltado móvil hace que el objeto lienzo quede resaltado y, por lo tanto, ignora los movimientos de los dedos).

A continuación, tenemos la carga de las bibliotecas CreateJS:>

Este código carga los archivos JS desde CreateJS CDN y básicamente nos permite usar cualquiera de las funciones CreateJS en nuestro código

A continuación, cargaremos el complemento SoundJS Flash, que proporciona soporte de sonido para los navegadores que no son compatibles con el audio HTML5. Esto se hace usando un SWF (un objeto Flash) para cargar los sonidos.

En este caso, no usaremos el CDN; en su lugar, descargaremos la biblioteca SoundJS desde http://createjs.com/#!/SoundJS/download y colocaremos los archivos soundjs.flashplugin-0.2.0.min.js y FlashAudioPlugin.swf en una carpeta local llamada assets.

Último entre los archivos JS, cargaremos el archivo Main.js que contendrá todo el código de nuestro juego:

Finalmente, pongamos un objeto Canvas en nuestro escenario.

Ahora podemos comenzar a trabajar en el código del juego.


Paso 2: las variables

Nuestro código de juego estará dentro de un archivo llamado Main.js, así que cree y guarde esto ahora.

Antes que nada, definamos variables para todos los objetos gráficos en el juego:

He agregado un comentario para cada variable para que sepas lo que vamos a cargar en esa variable

A continuación, los puntajes:

Vamos a necesitar variables para la velocidad de la pelota:

Puede cambiar estos valores a lo que desee, si desea que el juego sea más fácil o más difícil.

Si eres desarrollador de Flash, sabes que Flash onEnterFrame es muy útil cuando creas juegos, ya que hay cosas que deben suceder en cada cuadro. (Si no está familiarizado con esta idea, consulte este artículo en Game Loop).

Tenemos un equivalente para onEnterFrame en CreateJS, y ese es el objeto ticker, que puede ejecutar código cada fracción de segundo. Vamos a crear la variable que se vinculará a ella:

A continuación tenemos el preloader, que usará los nuevos métodos PreloadJS.

  • preloader - contendrá el objeto PreloadJS.
  • manifest -contendrá la lista de archivos que necesitamos cargar.
  • totalLoaded - esta variable contendrá la cantidad de archivos ya cargados.

Por último, pero no por ello menos importante, en nuestra lista de variables, tenemos TitleView, que guardará varios gráficos para mostrarlos juntos (como Flash DisplayObjectContainer).

Pasemos a la función Principal ...


Paso 3: la función principal ()

Esta función es la primera función que se ejecuta después de cargar todos los archivos JS de index.html. Pero, ¿cómo se llama a esta función?

Bueno, ¿recuerdas esta línea del archivo index.html?

Este fragmento de código indica que una vez que se carguen las bibliotecas HTML (y JS), se debe ejecutar la función Principal.

Repasemoslo:

Analicemos cada parte:

Aquí vinculamos el objeto PongStage Canvas del archivo index.html a la variable canvas y luego creamos un objeto Stage desde ese lienzo. (El escenario nos permitirá colocar objetos en él).

mouseEventsEnabled nos permite usar eventos de mouse, por lo que podemos detectar movimientos y clics del mouse.

Aquí configuramos dónde reside el complemento de sonido de Flash para aquellos navegadores en los que no se admite el audio HTML5

En la variable de manifiesto, colocamos una matriz de archivos que queremos cargar (y proporcionamos una identificación única para cada uno). Cada sonido tiene dos formatos: MP3 y OGG, porque diferentes navegadores son (en) compatibles con diferentes formatos.

Aquí configuramos el objeto preloader usando PreloadJS. PreloadJS es una nueva adición a las bibliotecas CreateJS y bastante útil.

Creamos un nuevo objeto PreloadJS y lo colocamos en la variable preloader, luego asignamos un método a cada evento (onProgress, onComplete, onFileLoad). Finalmente usamos el preloader para cargar el manifiesto que creamos anteriormente.

Aquí agregamos el objeto Ticker a la etapa y establecemos la frecuencia de cuadro a 30 FPS; lo usaremos más adelante en el juego para la funcionalidad enterFrame.


Paso 4: Creando las Funciones del Preloader

Repasemos las funciones:

  • handleProgress - en esta función, podrá seguir el porcentaje del progreso de carga utilizando este parámetro: event.loaded. Puede usar esto para crear, por ejemplo, una barra de progreso.
  • handleComplete - se llama a esta función una vez que se han cargado todos los archivos (en caso de que desee colocar algo allí).
  • handleFileLoad - como cargamos dos tipos de archivos (imágenes y sonidos), tenemos esta función que manejará cada uno por separado. Si se trata de una imagen, creamos una imagen de mapa de bits y la colocamos en una variable (cuyo nombre es el mismo que el ID de la imagen cargada) y luego llamamos a la función handleLoadComplete (que escribiremos a continuación); si es un sonido, simplemente llamamos inmediatamente a handleLoadComplete.

Ahora veamos la función handleLoadComplete que acabo de mencionar:

Es una función bastante sencilla; aumentamos la variable total cargada (que contiene el número de activos cargados hasta el momento) y luego verificamos si el número de elementos en nuestro manifiesto es el mismo que el número de activos cargados, y si es así, vaya a la pantalla del menú principal.


Paso 5: Creando el menú principal

The Main MenuThe Main MenuThe Main Menu

Nada especial aquí. Colocamos las imágenes del botón Fondo, botón de inicio y créditos en el escenario y vinculamos los manejadores de eventos onPress a los botones de Inicio y Créditos.

Aquí están las funciones que muestran y eliminan la pantalla de créditos y el tweenTitleView que inicia el juego:


Paso 6: El código del juego

The PONG gameThe PONG gameThe PONG game

Hemos llegado a la parte principal de este tutorial, que es el código del juego en sí.

En primer lugar, debemos agregar todos los activos requeridos a la etapa, por lo que hacemos eso en la función addGameView:

De nuevo, una función bastante sencilla que coloca los objetos en la pantalla y agrega un mouseEvent a la imagen de fondo, de modo que cuando el usuario haga clic en el juego se iniciará (llamaremos a la función startGame).

Repasemos la función startGame:

Aquí, como puede ver, además de agregar un evento onMouseMove que moverá nuestra paleta. Agregamos el evento tick, que llamará a la función de actualización en cada cuadro.

Repasemos las funciones movePaddle y reset:

En movePaddle, básicamente colocamos la paleta del usuario en la coordenada y del mouse.

En el reinicio, hacemos algo similar a agregarGameView, excepto que aquí no agregamos ningún elemento gráfico porque ya están en la pantalla.

Usando la función de alerta, mostraremos la ventana emergente ganadora y perdedora:


Paso 7: The Game Loop

Ahora, para la última parte de nuestro tutorial, trabajaremos en la función de actualización (que ocurre en cada fotograma del juego, similar a la función onEnterFrame de Flash):

Parece aterrador, ¿no? No se preocupe, revisaremos cada parte y lo discutiremos.

En cada cuadro, la bola se moverá de acuerdo con sus valores de velocidad x , y

Aquí tenemos la IA básica de la computadora, en la que la paleta de la computadora simplemente sigue la pelota sin ninguna lógica especial. Simplemente comparamos la ubicación del centro de la paleta (por lo que agregamos 32 píxeles al valor de la Y de la CPU) con la ubicación de la bola, con un pequeño desplazamiento, y movemos la paleta hacia arriba o hacia abajo según sea necesario.

Si la pelota golpea el borde superior o el borde inferior de la pantalla, la bola cambia de dirección y tocamos el sonido de golpe de pared.

El acceso al puntaje es simple: si la pelota pasa los bordes izquierdo o derecho, aumenta la puntuación del jugador o la CPU respectivamente, reproduce un sonido y restablece la ubicación de los objetos usando la función de restablecimiento que hemos discutido anteriormente.

Aquí tratamos con colisiones de la pelota con las paletas; cada vez que la pelota golpea una de las paletas, la pelota cambia de dirección y se reproduce un sonido

Si la paleta del jugador sale de los límites, la colocamos dentro de los límites.

En este fragmento, verificamos si el puntaje de alguno de los jugadores ha alcanzado los 10 puntos, y si es así mostramos la ventana emergente ganadora o perdedora al jugador (según su estado ganador).


Conclusión

Eso es todo, has creado un juego de pong completo usando CreateJS. Gracias por tomarse el tiempo para leer este tutorial.

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 Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.