Parzibyte's blog

Blog de conocimiento gratuito: linux, programación, open source, bases de datos, android, frameworks, web e informática en general.

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

(más…)

Mi implementación del juego de la serpiente en Javascript

Snake game en JS

En mi infancia me gustaba jugar al juego de Snake en un nokia. No pensé que algún día en el futuro podría hacer una “copia” del mismo. Claro que no es una réplica exacta y faltan muchas cosas, pero al menos funciona.

Así que igual y a otra persona le sirve. Está escrito en javascript puro, utiliza imágenes para los sprites; por lo que puedes personalizarlos. Se adapta a la pantalla completa y se juega con las flechas del teclado.

Juego

 

See the Pen Juego de la serpiente by Luis Cabrera Benito (@parzibyte) on CodePen.

Por cierto, no es la misma experiencia el jugarlo insertado que jugarlo en una página separada. Aquí puedes abrirlo en una nueva pestaña.

Simplemente toca o haz click y comenzarás a jugar. Espero poder darle seguimiento cuando tenga tiempo. Ponerle un puntaje, sonidos, eliminar el bug que hace que avance uno más incluso cuando perdiste, detectar colisiones con la misma serpiente, agregar obstáculos y niveles, etcétera.

Finalmente aquí dejo el código en GitHub por si sirve de algo.

Actualización

Ya existe la versión 2 de este juego, en donde se solucionan errores y otras cosas. El resultado es este.