javascript

Juego de la serpiente en JavaScript: versión 2

Introducción

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…

  • Ya no es necesario jQuery (ya estamos en el 2018, incluso hay robots en Marte y es una vergüenza seguir usándolo). Además, sólo se usaba para los selectores, lo cual puede ser fácilmente remplazado por querySelector
  • Ahora sí toma la pantalla completa, sin scrolls o barras (era molesto porque al usar el teclado, la ventana bajaba o subía)
  • Lo mejor es: ahora ya no sigue avanzando cuando choca contra una pared

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á.

Versión 2 del juego de la serpiente

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í:

Juego de la serpiente – Pantalla de bienvenida

Y jugando así

Snake juego en proceso

Probar online o ver código fuente

Si quieres ver el código, ve al repositorio en GitHub. En caso de que quieras probar el juego directamente, visita este enlace.

Eliminado jQuery

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.

La serpiente ya no avanza más allá de la pared

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.

Pantalla completa

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.

Sobre los sprites

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:

Snake con sprites cambiados en iphone 5

Esa captura es de cómo se vería en un iPhone 5, pero recuerda que se adapta a cualquier pantalla.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Cancelar trabajo de impresión con C++

En este post te quiero compartir un código de C++ para listar y cancelar trabajos…

1 día hace

Copiar bytes de Golang a JavaScript con WebAssembly

Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…

4 semanas hace

Imprimir PDF con Ghostscript en Windows de manera programada

Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…

4 semanas hace

Hacer pruebas en impresora térmica Bluetooth Android

Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…

1 mes hace

Limpiar clave PEM

Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…

1 mes hace

Foco con Telegram, apagador de 3 vías, relevador y ESP8266

Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…

2 meses hace

Esta web usa cookies.