Introducción
El paso de un juego de mesa físico a una experiencia web interactiva no consiste en calcar su estética en una pantalla, sino en extraer su lógica motriz. Este proyecto toma como referencia Zona Inestable, un juego de mesa fundamentado en la vulnerabilidad de la materia. Sin embargo, en lugar de generar una réplica digital, se aísla el concepto de "gravedad" como variable central de diseño para construir una experiencia completamente nueva. El objetivo es replicar la tensión física y el colapso mediante herramientas de programación web, ademas de presentar lo que fue el juego de mesa en un formato Landing mas tradicional.
Del concepto "Gravedad" al fundamento
En el juego análogo, la gravedad es una fuerza ineludible que obliga a los participantes a entender el centro de masa de la estructura, calculando la inercia del péndulo y el peso de los componentes para evitar un colapso. Para sistematizar esta dinámica, se elaboró la Partitura de Interacción (PIX) del juego físico. Este documento desglosa el diálogo táctil y cognitivo: el montaje modular, la alteración del equilibrio y las limitaciones corporales impuestas por la ruleta.
Desarrollo iterativo de prototipo a código
Wireframe inicial
Se establece la arquitectura de la información y la distribución espacial de los componentes. Este esquema de baja fidelidad define la jerarquía de los contenidos de la página, priorizando la usabilidad y el flujo de navegación del usuario antes de aplicar cualquier decisión gráfica o estética.
Maqueta en Figma
Se diseña la interfaz de usuario (UI) aplicando la identidad visual del proyecto. Se establecen paletas de color, tipografías, proporciones y el comportamiento responsivo, creando un prototipo estático de alta fidelidad que sirve como mapa exacto y regla de medida para el desarrollo técnico.
Prompt y referencias visuales
El diseño visual se traduce a instrucciones lógicas y precisas (prompts) para modelos de lenguaje artificial. Se definen requerimientos técnicos, restricciones de diseño y lógicas de interacción, utilizando la maqueta de Figma como referencia estricta para guiar la comprensión de la IA.
Input y generación de código
A partir de las instrucciones ingresadas, el modelo genera el código estructural (HTML), las hojas de estilo (CSS) y la lógica funcional (JavaScript). En esta etapa se materializan mecánicas complejas, como el cálculo de variables físicas en Matter.js y el renderizado nativo en Canvas.
Etapa de testeo
El código generado se ejecuta en el navegador para evaluar su rendimiento e iterar sobre los errores. Se realiza un proceso continuo de depuración (debugging), ajustando variables de colisión, inercia, animaciones responsivas y eventos de audio hasta lograr la estabilidad total del sistema.
Publicación en Github
Una vez validada la experiencia técnica y visual, el código fuente se consolida y se sube a un sistema de control de versiones. Se utiliza la herramienta GitHub Pages para el despliegue final, asegurando el alojamiento del sitio y permitiendo el acceso público a la interfaz digital.
Desarrollo de la Landing Page
El desarrollo de la Landing Page se plantea como un espacio de transición narrativa que conecta la materialidad del juego físico con la abstracción del simulador digital. Su función principal es predisponer al usuario, introduciendo el concepto de inestabilidad a través del propio comportamiento de la interfaz. Para ello, se estructuró un entorno programado desde cero en HTML5, CSS3 y JavaScript puro, prescindiendo deliberadamente de librerías externas para garantizar una carga ligera y un control absoluto sobre el rendimiento. La arquitectura de la página aprovecha el evento de scroll y los observadores de intersección.
Desarrollo de la Experiencia Interactiva
¿Por qué se tomaron estas decisiones técnicas?
Físicas y Colisiones: Se integró el motor de físicas Matter.js. Mediante la configuración de variables como la resistencia al movimiento (frictionAir) y la capacidad de rebote (restitution), se logró dotar a una figura geométrica bidimensional de un "peso" perceptible.
Renderizado matemático: Se utilizó la Canvas API de HTML5 para reemplazar las vistas estáticas por gráficos generados en tiempo real. Esta API calcula sombras radiales dinámicas en base a la distancia del jugador y dibuja vectores de fractura estructural sobre los elementos de cristal dependiendo de la fuerza del impacto.
Diseño Sonoro Reactivo: A través de la Web Audio API, los eventos sonoros (fricción, derribo) no son simples reproducciones en bucle, sino que el volumen y el tono (pitch) de los audios de rodamiento están directamente sincronizados con la magnitud de la aceleración del avatar, ofreciendo retroalimentación sensorial inmediata.
Estructura e Interacciones
Pantallas Superpuestas
(Overlays de estado)
- Pantalla de Advertencia: Control de audio y botón de inicio.
- Pantalla de Transición: Carga hacia el simulador interactivo.
Navegación Global
(Header)
- Identidad Visual: Logotipo y título ("Zona Inestable").
- Menú de Anclas: Navegación rápida por secciones.
Pantalla Inicial
(Home)
- Título Interactivo: Tipografía reactiva al cursor.
- Microinteracción: Demolición detonada por clic.
Contenido Estructurado
(Secciones de Scroll)
- Referente: Introducción al juego de mesa físico.
- Reglas & Mecánicas: Tarjetas con video integrado.
- Componentes: Muestrario de piezas en 3D.
Cierre de Interfaz
(Footer)
- Créditos y enlaces institucionales e[ad] PUCV.
Interfaz de Usuario
(HUD - Head-Up Display)
- Controles: Retorno al Landing y botón de reinicio.
- Menú de Estados: Modificadores de gravedad.
- Datos: "Puntos" e indicador de "Objetivo".
Pantallas de Control
(Overlays)
- Ruleta: Sorteo de condición de victoria.
- Fin de Partida: Panel de decisiones y modo libre.
Simulación Física
(Canvas 2D / Matter.js)
- Avatar: Esfera controlable mediante aceleración.
- Topografía: Cuadrículas y zonas de vacío.
- Reacción: Estratos de cristal con daño estructural.
- Audio: Eventos sonoros variables (Web Audio API).
Esta segunda Partitura de Interacción (PIX) detalla específicamente el flujo de la experiencia digital. Registra la secuencia de acciones y respuestas del sistema en la interfaz digital 'Gravitud', documentando cómo se aplican las físicas de Matter.js, la gestión del Web Audio API y las mecánicas de puntuación en el entorno virtual.
