Desarrollo del juego Stack Game en 2D con JavaScript

·1h 19m

Introducción al proyecto

En este episodio, se desarrolla una versión en 2D del popular juego Stack Game, utilizando exclusivamente JavaScript, CSS y HTML. Se busca crear una experiencia fluida sin dependencias externas.

Conceptos técnicos y lógica de programación

Para abordar este proyecto, se aplican principios fundamentales de lógica de programación para videojuegos, tales como:

Estados del juego: Gestión de los modos bounce (movimiento lateral), fall (caída) y game over.
Gestión del bucle de juego: Uso de window.requestAnimationFrame para repintar el canvas frame a frame, lo cual es más performante que intentos de repintado granular.
Colisiones: Detección precisa de límites laterales y vertical para ajustar la pieza actual respecto a la anterior.

Optimización y mejores prácticas

Se discutió extensamente la carga de scripts en el navegador:

"Lo ideal a día de hoy, pleno 2024, casi 2025, es que utilicéis el type module, que tenéis la posibilidad de utilizar los imports dentro y además va a ser de tipo defer."

Retos de desarrollo

El desafío principal reside en la lógica de recorte (ajuste de piezas): Cuando una pieza no se alinea perfectamente con la inferior, el sistema debe calcular la diferencia de posición para recortar la parte sobrante y generar un nuevo objeto de escombros (debris).

Temas

JavaScript Programación Juegos2D Canvas Frontend Lógica de programación Desarrollo web

Capítulos

6 chapters