Tetris

Implementación del clásico Tetris en JavaScript vanilla, usando HTML5 Canvas y CSS. Sin dependencias externas, sin frameworks, sin proceso de build: solo abrir y jugar.

---

Tabla de contenidos

• Tetris
  • Tabla de contenidos
  • Qué hace el proyecto
  • Cómo ejecutar el juego
    • Opción 1: abrir el archivo directamente
    • Opción 2: servidor local (recomendado)
  • Controles
  • Cómo funciona
    • 1. index.html
    • 2. style.css
    • 3. game.js
    • Flujo del juego
  • Tecnologías
  • Estructura del proyecto
  • Personalización
  • Licencia

---

Qué hace el proyecto

Es una versión jugable del Tetris clásico con todas las mecánicas que esperarías:

• Tablero de 10 × 20 celdas.
• Las 7 piezas estándar (I, O, T, S, Z, J, L) con colores diferenciados.
• Rotación con wall kicks básicos (pequeños desplazamientos para que la pieza pueda rotar pegada a la pared).
• Soft drop (bajada acelerada) y hard drop (caída instantánea).
• Pieza fantasma (ghost piece): muestra dónde aterrizará la pieza actual.
• Vista previa de la siguiente pieza.
• Sistema de puntuación clásico de Tetris (100 / 300 / 500 / 800 multiplicado por nivel).
• Niveles que aumentan cada 10 líneas y aceleran la caída.
• Pausa y Game Over con opción de reinicio.

---

Cómo ejecutar el juego

No hay nada que instalar ni compilar. Tienes dos opciones:

Opción 1: abrir el archivo directamente

open index.html        # macOS
xdg-open index.html    # Linux
start index.html       # Windows

Opción 2: servidor local (recomendado)

Cualquier servidor estático funciona. Algunos ejemplos:

# Con Python 3
python3 -m http.server 8000

# Con Node.js (npx)
npx serve .

# Con PHP
php -S localhost:8000

Después abre http://localhost:8000 en el navegador.

---

Controles

Tecla	Acción
← / →	Mover la pieza horizontalmente
↑ o X	Rotar la pieza en sentido horario
↓	Soft drop (bajar más rápido)
Espacio	Hard drop (caída instantánea)
P	Pausar / reanudar

---

Cómo funciona

El juego se compone de tres archivos que cooperan:

1. index.html

Define la estructura visual:

• Un <canvas id="board"> de 300 × 600 píxeles donde se renderiza el tablero.
• Un panel lateral con SCORE, LINES, LEVEL, vista de la siguiente pieza y la lista de controles.
• Un overlay para los estados PAUSA y GAME OVER.

2. style.css

Aporta el aspecto visual con estética dark / retro arcade: fondo oscuro, tipografía monoespaciada para los marcadores y backdrop blur en los overlays.

3. game.js

Contiene toda la lógica del juego. A grandes rasgos:

• Modelo del tablero: una matriz ROWS × COLS donde cada celda guarda 0 (vacía) o un índice de color (1–7) que identifica la pieza.
• Piezas: definidas como matrices cuadradas. Para rotar se calcula la transposición + reverso de filas (rotateCW).
• Detección de colisiones (collide): comprueba que ninguna celda de la pieza salga del tablero ni se solape con bloques ya fijados.
• Wall kicks (tryRotate): si la rotación choca, intenta desplazar la pieza ±1 y ±2 columnas antes de descartar el giro.
• Game loop (loop): basado en requestAnimationFrame, acumula el tiempo transcurrido y baja la pieza una fila cuando se supera dropInterval.
• Limpieza de líneas (clearLines): recorre el tablero de abajo hacia arriba; cada fila completa se elimina y se inserta una vacía en la cima.
• Puntuación: usa la tabla clásica [0, 100, 300, 500, 800] multiplicada por el nivel actual; el hard drop suma 2 puntos por celda recorrida y el soft drop 1 punto por fila.
• Nivel y velocidad: el nivel sube cada 10 líneas; la velocidad de caída se calcula como max(100, 1000 − (level − 1) × 90) milisegundos.
• Ghost piece (ghostY): proyecta la posición final de la pieza actual hacia abajo y la dibuja con globalAlpha = 0.2.

Flujo del juego

init()
  ├─ createBoard()                  → matriz vacía
  ├─ next = randomPiece()
  ├─ spawn()                        → mueve next a current y genera nueva next
  └─ requestAnimationFrame(loop)
        ↓
   loop(timestamp)
     ├─ acumula dt
     ├─ si dt ≥ dropInterval → baja la pieza o llama a lockPiece()
     ├─ draw()  (grid + tablero + ghost + pieza actual)
     └─ requestAnimationFrame(loop)

   keydown → mover / rotar / soft-drop / hard-drop / pausa

Cuando una pieza recién generada ya colisiona al aparecer (spawn), se dispara endGame() y se muestra el overlay de Game Over.

---

Tecnologías

• HTML5 — marcado y dos elementos <canvas> (tablero y vista previa).
• CSS3 — flexbox, variables de color, backdrop-filter y box-shadow.
• JavaScript (ES6+) vanilla — const/let, arrow functions, spread operator, Array.from, template literals…
• Canvas 2D API — para todo el renderizado del juego.
• requestAnimationFrame — para el bucle de juego sincronizado con el navegador.

Sin dependencias. No hay package.json, ni bundler, ni transpilador.

---

Estructura del proyecto

03-tetris/
├── index.html      # Estructura del DOM y canvas
├── style.css       # Estilos del juego (dark theme)
├── game.js         # Toda la lógica del Tetris (~300 líneas)
└── README.md

---

Personalización

Algunos parámetros fáciles de tunear en game.js:

Constante	Significado	Por defecto
COLS	Columnas del tablero	10
ROWS	Filas del tablero	20
BLOCK	Tamaño en píxeles de cada celda	30
COLORS	Paleta de colores por tipo de pieza	7 colores
LINE_SCORES	Puntos por 1, 2, 3 o 4 líneas eliminadas	[0,100,300,500,800]
dropInterval	Velocidad inicial de caída en ms	1000

Si cambias COLS, ROWS o BLOCK, recuerda ajustar también width y height del <canvas id="board"> en index.html para que coincida (COLS × BLOCK × ROWS × BLOCK).

---

Licencia

Proyecto de uso libre con fines educativos y de práctica.