Una de las razones que en lo personal decidí aprender a programar, fue para poder realizar juegos, por diversos motivos había estado postergando introducirme a este divertido mundo. A principios de este año (2014) decidí finalmente aprender y comenzar a desarrollar juegos con JavaScript y HTML5.

En este cursor voy a introducir al desarrollo de juegos de tipo Arcade, es decir, juegos sencillos para aprender a utilizar la librería de Phaser, iniciaremos creando un juego completamente desde cero y haremos que funcione en un dispositivo móvil.

He decidido utilizar Phaser porque es una librería muy completa, cuenta con motores de física, estados, precarga de assets, uso de cámara, manejo de sprites para las animaciones en 2D y soporte para canvas y WebGL, entre muchas otras cosas más.

La física juega un papel muy importante en nuestros juegos, manejar la gravedad, calcular movimientos, tiros parabólicos, aceleraciones, choque de partículas, rebotes, fuerzas, vectores, etc. Llámenme geek, pero realmente me emociona poder poner en práctica lo aprendido en la universidad, esas clases de física y matemáticas que tanto me gustaban, aunque he de confesar que debo desempolvar esos conceptos. 

Por suerte para aquellos que no disfrutan tanto las matemáticas, no es necesario hacer todos estos cálculos por nosotros mismos, hay varios motores (engines) de física que nos ayudaran a realizar toda la matemática. Phaser cuenta con tres motores de física, en este curso nos enfocaremos en el motor de tipo Arcade, cuya física no es tan compleja y por ende es el más rápido en respondernos.

Descripción del juego

Lo primero que haremos será definir el juego que vamos a construir. Haremos algo sencillo donde se puedan exponer las principales características de Phaser.

1. Personajes: Niño, aves, dulces y piedras
2. Objetivo: Alcanzar el mayor puntaje
3. Estrategia: Recoger la mayor cantidad de dulces y esquivar las piedras.

Tendremos una plataforma donde el jugador podrá manejar al personaje principal, se podrá mover a la izquierda, derecha y brincar.

Cuando el juego comience aparecerán uno pájaros (aves) volando en la parte superior y arrojarán dulces o piedras, el jugador deberá tomar los dulces y esquivar las piedras. Si una piedra toca al jugador, el juego termina.

El nivel de complejidad avanzará conforme el jugador vaya tomando más dulces, al principio comenzarán a caer pocas piedras, conforme adquiera mayor puntaje se arrojarán más piedras al mismo tiempo. Los dulces los tiene que recoger antes de que desaparezcan. El objetivo del juego es obtener la mayor cantidad de puntos posibles.

Requerimientos técnicos

El juego debe ejecutarse en un iPad, para mover al jugador se usarán gestures o posiblemente botones, dependiendo que funcione mejor.

El juego únicamente se desplegará en landscape, no vamos a soportar portrait. Al iniciar debemos desplegar una barra de carga para informar al usuario que estamos cargando los assets en memoria.

Debemos desplegar un menu principal donde mostraremos un botón para iniciar el juego y el máximo score alcanzado anteriormente.

Cuando el usuario presione el botón jugar, iniciaremos el juego. El score aparecerá en cero y cada que el jugador tome un dulce incrementaremos el scope por 5. El juego termina cuando el jugar es tocado por una piedra, mostraremos un mensaje con su score y luego regresaremos al usuario al menu principal.

A continuación muestro una imagen con la idea principal del juego.

Idea principal

Te recomiendo registrarte al curso para recibir los nuevos tutoriales directamente a tu correo. El curso es completamente gratuito, la idea es sacar cada semana al menos un video. 

El juego se irá construyendo poco a poco para ir cubriendo los temas y conceptos necesarios para iniciarte en el desarrollo de videojuegos en HTML5.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Videojuegos en HTML5, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!