Cómo hacer un juego de Flappy Bird en HTML5 y Javascript

Flappy Bird podrá ser el juego más desesperante que pudo existir, y sin embargo a nivel técnico es quizá uno de los juegos más fáciles y adictivos que se pueden crear. Se que hoy en día ya la gente se olvidó de subir la típica calculadora, sino el clon súper fácil de Flappy Bird, pero es que la facilidad con la que puedes hacer un objeto elevarse y después hacerlo descender en base a una aceleración es un buen ejemplo para entender las físicas de un videojuego.

Por esa razón es que encontré un tutorial muy bueno para hacer el juego de Flappy Bird con HTML5 y Javascript. El proyecto es de la autoría del blog less milk, el cuál tiene como propósito hacer por semana un videojuego nuevo, y para esta ocasión tocó hacer Flappy Bird.

El tutorial está dividido en 2 partes. En la primera parte se ven los fundamentos para crear el juego y en realidad es el único que necesitan para terminarlo, aunque sólo se verán cuadrados y ningún gráfico, por lo que no es tampoco recomendable sólo tomar este tutorial.

Tutorial | Demo de la primera parte

Para la segunda parte lo que se ve es agregar efectos como la rotación del ave cuando va cayendo y elevándose, de tal forma que sea más real a la versión final. Otro elemento es el sonido. En realidad no se agregan gráficos porque según leí en el tutorial lo único que hay que hacer es reemplazar los cuadrados de color por las imágenes que queremos usar.

Tutorial | Demo de la segunda parte

Entonces, ojalá les guste este tutorial para que aprendan principios de videojuegos en HTML5. No es tan difícil siempre que sepamos escoger el framework que nos facilite más el trabajo, y además aprendemos a organizar bien nuestro código, para que no luzca enorme.