Frontend / Juego

Tetris

Juego de Tetris clásico construido con JavaScript puro, lógica de colisión y renderizado en canvas.

Resumen

Tetris parece simple hasta que intentas implementarlo: la detección de colisión es un problema matricial, la rotación de piezas debe respetar los límites del tablero y la velocidad tiene que escalar sin que el juego pierda responsividad.

Implementado con JavaScript vanilla y Canvas API — sin ningún framework — porque el punto era resolver el problema, no delegarlo. El resultado es un juego completo con sistema de puntuación, progresión por niveles y controles de teclado fluidos.

Línea de tiempo

01

Motivación

Tetris parece simple hasta que intentas implementarlo. Se eligió deliberadamente para resolver un problema clásico desde cero — sin delegar la lógica a un motor ni framework.

02

Lógica de juego

Detección de colisión matricial: cada pieza es una submatriz sobre el tablero. Rotación con validación de bordes. Limpieza de líneas completas y descenso del tablero en O(n).

03

Renderizado y progresión

Renderizado con Canvas API — control total sobre cada frame. Sistema de puntuación con multiplicador por líneas simultáneas, niveles de velocidad progresiva y gestión de game-over.

Aprendizajes

  • Canvas API da control total del renderizado a cambio de mayor complejidad.
  • La lógica de colisión en grillas requiere pensamiento matricial claro.