Cómo hice en 48 horas el juego HTML5 "Hold the Cloud" (Parte 1)

Voy a desgranar cada una de las fases del desarrollo del juego HTML5 y Javascript, Hold the Cloud, que presenté a la competición JS13KGames. Me llamó tanto la atención una competición que planteaba hacer juegos en tan solo 13 kb (incluyendo librerías, imágenes, código, etc) que ante tal reto no podría hacer otra cosa que ponerme manos a la obra e intentarlo.

Y la verdad que estoy satisfecho del resultado. Primero porque he cumplido con el objetivo: hacer un juego bajo ese tamaño y que se haya publicado para competir. Segundo por hacerlo en 48 horas durante un fin de semana y siendo además mi primer juego. Probablemente sea mejorable -y tienes el código en GitHub para hacerlo tú mismo- pero comparto el siguiente contenido para quien le resulte útil. También, recomiendo la lectura previa de la introducción al desarrollo de juegos HTML5+Javacript que escribí unos días antes.

La idea del juego HTML5

Me enteré de la competición JS13KGames casi de casualidad el jueves 23 de agosto, así que el viernes a media tarde cuando llegué a casa me puse a barajar ideas de sobre qué hacer el juego. Pensé que hacer algo de marcianitos o del espacio, estaba muy visto en este género así que lo deseché. Después se me ocurrió una idea de ping pong vertical pero ya había alguno parecido.

Imagen de la nube utilizada en la versión alfa, antes de la optimización

Entonces pensé en algo lo más raro posible, en el sentido de poco visto, que pudiera aportar yo mismo. Me vino a la mente una prueba médica que se realiza a los asmáticos para medir la inflamación de los bronquios, consistente en soplar mediante un tubito durante menos de un minuto en una pequeña consola para sostener una nube entre dos franjas. Supuse que no se iba a presentar ningún juego así, así que en menos de 1 hora ya tenía la idea.

Por entonces no había ningún juego publicado aún y no sabía ni cómo debía ser la presentación. Así que al ser libre, decidí poner algo de texto explicando de qué iba todo eso, los controles y la propia área de juego. Que por cierto, es un área delimitada para poder jugar correctamente en tablets y móviles. Esto lo hice así simplemente porque daban más puntos por ser multiplataforma y porque ya que me ponía a aprender y experimentar, iba a hacerlo bien ¿no? 😉

Desarrollando el prototipo

Primero, maqueté lo esencial sin imágenes ni efectos y después empecé con el manejo y controles del usuario.

Controles

Por un lado, se valida las teclas pulsadas mediante la función keyEventHandler(). Después, procesa la función processUserInput(), que determina si la nube ha tocado algún límite para terminar la partida o si no, verifica si hay que subirla o bajarla actualizando sus coordendas, después de renderizarlo se encargará otra función.

Los eventos que lo desatan son onKeyDown y onKeyUp en PCs y onTouchStart y onTouchEnd en tabletas y smartphones, todos invocados en el BODY.

Renderizado

Por cada ciclo del juego, producido en updateGame() cada 24 milisegundos, se pinta de nuevo los objetos en la pantalla. Esto significa que se actualiza la posición de la nube, la posición de las barras horizontales, etc. invocando a la función render().

Sistema de niveles

En la variable maxLevels se indican cuántos hay, en este caso 13 por la competición. Después hay una función para comenzar un nivel, startLevel() y para finalizarlo, endLevel(), donde cada una de ella muestra los mensajes y el nivel correspondiente en pantalla.

También hay funciones auxiliares:

1. getMaxY() Obtiene el límite superior
2. getMinY() Obtiene el inferior
3. getSkyLevelHeight() Calcula la altura del cielo, utilizando el nivel actual. A mayor nivel, más velocidad.

Captura de la versión alfa. Medianoche del viernes 24

Sobre la media noche del viernes al sábado, ya tenía lo esencial del prototipo, lo que fue unas 6 horas brutas o 5 netas de trabajo. Por supuesto, quedaba mucho.

En la segunda parte, hablaré sobre los añadidos posteriores, algunas curiosidades y la optimización que hice.

Actualización: Lee la 2ª parte de cómo hice el juego HTML “Hold the Cloud” aquí