🕹️ Tetris Clásico Personalizado

¡Bienvenido al repositorio de Tetris Clásico! Este es un proyecto interactivo desarrollado con tecnologías web estándar (HTML5, CSS3 y JavaScript Vanilla), potenciado visualmente con Bootstrap 5 para un diseño adaptativo, limpio y moderno.

Esta versión cuenta con una modificación estructural clave: el tablero posee una anchura mecánica extendida, ofreciendo más espacio para la estrategia y el desplazamiento lateral de las piezas, manteniendo intacta la altura tradicional de caída.

---

🚀 Características del Proyecto

• Tablero Extendido (Modificado): Configuración optimizada a 18 columnas de ancho y 20 filas de alto, ideal para poner a prueba tu habilidad matemática y agilidad mental.
• Sistema de Puntuación Estándar: Multiplicadores clásicos basados en el nivel y la cantidad de líneas limpiadas simultáneamente (Single, Double, Triple y Tetris).
• Dificultad Progresiva: La velocidad de caída se incrementa automáticamente cada 10 líneas completadas, elevando el nivel de juego.
• Temporizador en Tiempo Real: Registra la duración exacta de tu partida para medir tu rendimiento.
• Tabla de Mejores Puntajes (High Scores): Guarda localmente tus 5 mejores puntuaciones usando localStorage, permitiéndote competir contra ti mismo directamente desde el navegador.
• Interfaz Estilizada: Fondo dinámico en alta resolución y cajas estadísticas con diseño semi-transparente oscuro y bordes de alta fidelidad.

---

🛠️ Tecnologías Utilizadas

• HTML5: Estructura semántica y uso del elemento <canvas> para el renderizado del motor gráfico 2D del juego.
• CSS3: Estilos personalizados, tipografía moderna y manejo de sombras/fondos con imágenes.
• Bootstrap 5: Framework CSS utilizado para la maquetación de contenedores, botones, tablas de puntaje y el diseño responsivo de las pantallas de juego.
• JavaScript (ES6+): Programación orientada a objetos (POO) mediante clases para estructurar la lógica del bucle de juego, gestión del estado, colisiones, renderizado y persistencia de datos.

---

🎮 Cómo Jugar

1. Abre el archivo index.html en cualquier navegador web moderno.
2. Presiona el botón "START GAME" en la pantalla de inicio.
3. Utiliza los siguientes controles del teclado:
   • ⬅️ Flecha Izquierda: Mueve la pieza hacia la izquierda.
   • ➡️ Flecha Derecha: Mueve la pieza hacia la derecha.
   • ⬇️ Flecha Abajo: Acelera la caída de la pieza (Soft Drop).
   • ⬆️ Flecha Arriba: Rota la pieza 90 grados a la derecha.
4. Cuando el tablero se llene hasta el borde superior, aparecerá la pantalla de GAME OVER, donde podrás registrar tu puntaje y presionar "Jugar de Nuevo".

---

🔧 Estructura de Archivos

├── index.html        # Estructura principal y pantallas del juego (Inicio, Tablero, Fin)
├── estilo.css        # Estilos personalizados, personalización del canvas y fondo
├── tetris.js         # Código fuente de la lógica del juego (Bucle, colisiones, puntajes)
├── fondo.jpg         # Imagen de fondo del juego con bloques de colores
├── Captura_1.png     # Imagen de captura de la portada del juego
└── Captura_2.png     # Imagen de captura del juego

---

---

Desarrollado por: Maicol Daniel Mamani Chalco