KENDALL MENDOZA

Snake Game Using Phaser Framework

Snake Game Using Phaser Framework

Modern implementation of the classic Snake game, built for the browser using a lightweight game-engine style loop instead of traditional DOM based rendering.

Implementación moderna del clásico juego Snake, construida para el navegador usando un loop de tipo game-engine en lugar de un renderizado basado en el DOM.

Project Overview

Project Overview

This demo focuses on grid based movement, collision detection and a clear separation between game state, rendering and input handling. The goal is to keep the UI shell minimal while showing how a small custom game loop can integrate cleanly with the rest of the site.

Este demo se enfoca en movimiento basado en grilla, detección de colisiones y una separación clara entre el estado del juego, el renderizado y el manejo de inputs. El objetivo es mantener una capa de UI mínima mientras se muestra cómo un loop de juego pequeño puede integrarse de forma limpia con el resto del sitio.

Tools

Herramientas

Challenges and how they were solved

Retos y cómo se resolvieron

• Keeping the game loop lightweight
  The game needed smooth movement without overcomplicating the engine. The solution was to use a simple fixed-timestep loop with a grid based coordinate system that keeps updates predictable and easy to debug.
• Mantener un loop de juego liviano
  El juego debía tener movimiento fluido sin sobrecomplicar el engine. La solución fue usar un loop de timestep fijo con un sistema de coordenadas en grilla que mantiene las actualizaciones predecibles y fáciles de depurar.
• Separating rendering from game state
  Mixing DOM changes with game logic makes debugging harder. The implementation keeps state updates and collision checks in pure JavaScript structures, and uses the canvas solely for drawing the current frame.
• Separar el renderizado del estado del juego
  Mezclar cambios en el DOM con la lógica del juego complica la depuración. La implementación mantiene las actualizaciones de estado y las colisiones en estructuras de JavaScript puras, y usa el canvas solo para dibujar cada frame.
• Handling input without ghosting
  Rapid key presses can cause conflicting direction changes. The input manager debounces direction updates so the snake never reverses into itself within a single tick.
• Manejar el input sin movimientos fantasma
  Los cambios rápidos de teclas pueden generar direcciones en conflicto. El manejador de input limita las actualizaciones de dirección para que la serpiente nunca se invierta sobre sí misma en un solo tick.
• Persisting the high score cleanly
  The game needs a simple way to remember the best run. The solution was to use browser storage guarded by basic checks so the game still works in environments where storage is limited.
• Persistir el puntaje más alto de forma sencilla
  El juego necesita una forma simple de recordar la mejor partida. La solución fue usar almacenamiento del navegador con validaciones básicas para que el juego siga funcionando incluso donde el storage es limitado.