Como he visto que mi implementación del juego de la serpiente ha ganado un poco de visitas (lo que significa que puede que alguien lo use, y qué pena que esté incompleto) decidí darle mantenimiento. Y por lo tanto, he escrito la versión 2 del juego de snake en JavaScript. Esto trae nuevos cambios…
querySelector
Veamos cómo logramos eso, además de explicar las cosas paso por paso. El código fuente está en GitHub, y la versión para jugar en el navegador la dejaré abajo. Vamos allá.
Bueno, comencemos recordando que había una versión 1. Puedes visitar el post aquí. Ahora veamos los cambios.
Ahora al inicio se ve así:
Y jugando así
Si quieres ver el código, ve al repositorio en GitHub. En caso de que quieras probar el juego directamente, visita este enlace.
En la versión 1 mencionaba que está escrito en JavaScript puro, no sé por qué mentí o no me di cuenta, pero no era cierto: usaba jQuery como dependencia.
Usábamos este framework para escuchar los clicks, el document ready o los keyups. Esto fácilmente es remplazable.
Por ejemplo, $(document).ready()
es remplazado por document.addEventListener("DOMContentLoaded")
. El listener de las teclas o toques se remplaza con elemento.addEventListener
, y finalmente para obtener el canvas podríamos usar getElementById
o querySelector
, preferí querySelector.
Este era un bug que hacía que la serpiente siguiera avanzando después de que te dijera que perdiste. Se solucionó comprobando si colisionaba antes de dibujarla.
Esto es más de estilos para darle al canvas el 100 % de la pantalla, ahora usamos window.innerWidth
en lugar de document.body.innerWidth
y lo mismo con el height.
Ya lo dije antes (creo) pero lo repito ahora: el juego utiliza sprites que carga a través de imágenes. Eso quiere decir que, en lugar del punto que se ve, podrías poner la imagen de una manzana y se dibujaría sin problemas.
Igualmente para las paredes puedes usar una imagen que sea de una textura de una pared, y se dibujaría así. Es decir, todo es completamente personalizable; yo lo hice en versión retro porque así era cuando solía jugar en un Nokia.
Por ejemplo, aquí le cambié la manzana y las paredes, así como el fondo:
Esa captura es de cómo se vería en un iPhone 5, pero recuerda que se adapta a cualquier pantalla.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.
Ver comentarios