Desarrollo de juegos con HTML5 (Parte final)

Continuamos con el videojuego de la serpiente. Para leer la primera parte pueden consultar este enlace: Desarrollo de juegos con HTML5 (Primera parte).

Partiremos de lo que ya teníamos que lo pueden ver aquí y llegaremos al juego terminado que lo pueden encontrar aquí. Recordemos que los controles que usamos son las teclas a,s,d y w para mover hacia la izquierda, abajo, derecha y arriba, respectivamente.
Ahora que completaremos el juego vale aclarar que por ser un ejemplo hemos simplificado algunos aspectos.

• El jugador no suma puntos cada vez que la serpiente se alimenta
• La serpiente no se moverá más rápido a medida que se alimente

El código fuente de esta parte final lo podemos ver aquí: serpiente.js

Completando la Serpiente

Es hora de hacer crecer la serpiente. Para ello agregamos un método que hace que se haga más grande. La idea es añadir un nuevo elemento al array de cuadrados. La posición del nuevo Cuadro estará dada por la dirección actual de la serpiente. A partir de ahora, debemos pensar a la serpiente con un cuerpo de varios cuadrados. Entonces el método avanzar se vuelve más complicado. Lo que debe hacer ahora es recorrer el array desde el final hacia el principio e ir cambiando los Cuadros de posición. El penúltimo pasa a ser el último y así sucesivamente. Primero se mueve todo el cuerpo y finalmente el primer Cuadro (que sería la cabeza de la serpiente) simplemente se mueve un lugar de acuerdo a la dirección actual. El método enroscada se encarga de determinar si la cabeza de la serpiente se chocó contra su propio cuerpo devolviendo true o false. Si lo analizamos, veremos que lo único que hace es controlar que la cabeza no coincida con alguna parte de su cuerpo. 

Alimento

La comida de la serpiente no será más que un Cuadro que aparecerá de forma aleatoria en la cuadrícula y que al ser devorado, desaparecerá y reaparecerá en otra ubicación. El Cuadro se inicializa al crearlo. La función Math.random() se utiliza para generar un número aleatorio. La expresión que la rodea no es más que para acotar el número generado para que caiga dentro de la cuadrícula. Vale aclarar que para este ejemplo no se tuvo en cuenta que al crear el alimento, este no aparezca justo sobre el cuerpo de la serpiente.
Luego aparecen los métodos getX y getY para saber en qué posición apareció la comida y dibujar para representarlo en el canvas. 

Vuelta a Juego

Volvamos a ver el método correr de Juego, pero más en detalle. La serpiente avanzará en todo momento, luego se verificarán las condiciones del juego en chequear. Veamos ese método que hemos agregado. Por un lado obtiene la cabeza de la serpiente y verifica que se haya pasado de los bordes de la cuadrícula o que se haya enroscado. Por otro lado, vemos que chequea que la cabeza se haya encontrado con el alimento. En caso de que así sea, la serpiente crecerá y se creará un nuevo alimento. Regresemos a correr. Luego del chequeo limpiamos el canvas, dibujamos el mundo, luego la comida y finalmente la serpiente.
Falta ponerle un final al juego. Para eso agregamos los métodos fin y reset. Ocurrirań cuando en chequear se verifiquen las condiciones que explicamos. El método fin muestra un mensaje y llama a reset. Este se encarga de borrar el intervalo, es decir que luego de ejecutarse this.intervalo.clear ya no se sigue ejecutando correr de forma periódica. Luego se vuelve a instanciar Juego y vuelve a comenzar todo desde cero. 

Conclusión

Hemos dado un paso más en el desarrollo de video juegos en relación con lo que habíamos visto en el ejemplo anterior de la nave espacial. Más allá de esta implementación, que puede pensarse incluso de muchas otras maneras. Y más allá del resultado, que puede obtenerse quizás más fácilmente mediante el paradigma de programación estructurada, lo que debemos extraer es la utilidad de desarrollar capas de abstracción que manejen el canvas de HTML5. Una buena clase de abstracción puede constituir un potente motor para el desarrollo de video juegos y aplicaciones. El desacople es la clave para poder utilizar la clase como una librería. Cuando hablamos de desacople, estamos diciendo que podríamos sacar la pseudo-clase Cuadro de este juego y llevarlo a otro que también use cuadrículas, como por ejemplo el famoso Tetris, y utilizarlo allí.
Nuevamente hemos visto como la programación orientada a objetos juega un papel fundamental para poder llevar adelante este tipo de desarrollos. Y a la vez, como JavaScript atenta contra este paradigma al no poder dar un soporte nativo. Allí es cuando aparece la necesidad de incorporar un framework de JavaScript que permita programar con orientación a objetos de forma más sencilla. Con alguno de ellos presentaremos nuestros siguientes ejemplos.

Más sobre Diseño y desarrollo Web

Acerca de Alejandro Arturo De Luca

Desarrollador apasionado por las tecnologías web, con experiencia en lenguajes (x)HTML, CSS, PHP, Java, Javascript, AJAX y MySQL. También en sistemas de publicación CMS como WordPress y frameworks como Code Igniter. Además se especializa en sistemas GNU/Linux siendo también un difusor del Software Libre. En el ámbito laboral se desempeñó como programador web, webmaster y como administrador de sistemas llevando adelante procesos de migración a Software Libre. Estudia la carrera de Licenciatura en Análisis de Sistemas en la Facultad de Ingeniería de la UBA y se desempeña como programador freelance.