Documentación Técnica

1. Introducción al proyecto

MICROODS es una plataforma web educativa diseñada para concienciar sobre los Objetivos de Desarrollo Sostenible (ODS) de las Naciones Unidas a través de la gamificación.

El objetivo principal es acercar los ODS al público general, especialmente a los jóvenes, utilizando mecánicas de juego rápidas y directas que transmitan un mensaje claro de sostenibilidad en menos de 15 segundos por partida.

2. Concepto del proyecto

El diseño de la plataforma toma como inspiración los juegos tipo Arcade rápidos y minijuegos WarioWare. Los microjuegos son experiencias flash (cortas, de entre 6 a 20 segundos) con mecánicas extremadamente simples que el jugador debe entender intuitivamente de un vistazo.

Cada vez que se completa un microjuego, la dificultad y la velocidad se incrementan ligeramente, probando los reflejos, la capacidad cognitiva y la retención del conocimiento sobre desarrollo sostenible por parte del usuario.

3. Arquitectura del Proyecto

La arquitectura sigue principios básicos del desarrollo Front-end web (Vanilla):

HTML5 / CSS3: Para la estructura semántica y la interfaz de usuario (UI), priorizando flexbox, CSS Grid y animaciones CSS (keyframes) para una experiencia fluida sin dependencias externas pesadas.
JavaScript (ES Modules): La lógica pesada corre sobre JS en modelo orientado a objetos (Clases). Usamos la separación modular (`export` e `import`) para mantener el código limpio y escalable.
DOM (Document Object Model): En lugar de usar Canvas API o WebGL sistemáticamente, la mayoría de juegos iteran y reposicionan nodos en el DOM, lo cual facilita la accesibilidad y depuración para interfaces UI sencillas.
Base de Datos (Firebase Firestore): Integración BaaS (Backend as a Service) sin servidor para guardar las puntuaciones globales de forma persistente.

4. Estructura de Carpetas

/MICROODS
 ├── css/                # Archivos de estilos (Globales, Arcade, Animaciones)
 ├── img/                # Assets gráficos, iconos y fondos
 ├── js/
 │   ├── microgames/     # Clases individuales de cada juego instanciables
 │   ├── game-manager.js # Controlador del bucle de juego Arcade
 │   └── firebase.js     # Configuración y servicios de BBDD
 ├── pages/
 │   ├── docs/           # [Tú estás aquí] Documentación del código
 │   │   └── microgames/ # Documentación manual de lógica individual
 │   ├── microgames/     # Vistas HTML (Tutoriales, Modo Arcade)
 │   └── marcador.html   # Vista Leaderboard
 └── index.html          # Landing page principal
                

5. Sistema de Microjuegos (El Bucle Arcade)

GameManager (`js/game-manager.js`)

Actúa como orquestador central que rota aleatoriamente el arsenal de microjuegos disponibles.

Vidas y Puntuación: El jugador comienza con 3 vidas. Cada victoria suma +1 al score global, y cada derrota resta una vida. Al llegar a 0, termina y pasas al Game Over.
Dificultad Progresiva: Cada 3 juegos superados, la variable `this.level` (interna) se incrementa, acortando temporizadores, subiendo la velocidad de objetos y exigiendo puntuaciones meta (`targetObjects`) mayores.
Clase BaseGame (`base-game.js`): Plantilla núcleo de la que heredan todos. Estipula interfaces universales de ciclo de vida: `setupGame()`, `startTimer()`, `update()`, y `cleanup()`.

6. Sistema de Leaderboard (Firebase)

Para persistencia de datos utilizamos las librerías CDN de Firebase Firestore versión 9/Modular.

import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-app.js";
import { getFirestore, collection, addDoc, getDocs, orderBy, query, limit } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-firestore.js";
                

`saveScore(playerName, score)`: Método asíncrono que almacena un nuevo documento con la fecha (`timestamp`) y puntaje. Permite a los usuarios competir por el top 10 mundial.
`getLeaderboard()`: Genera una consulta (Query) ordenada por score descendente con un límite de 10 nodos. Rellena la tabla dinámica de marcador.html.

7. Tecnologías Utilizadas

🖥️ HTML5 y CSS3 (Standard)
⚡ JS ES6+ Vainilla (OOP, Fetch API, DOM API, RequestAnimationFrame)
🔥 Firebase (Firestore Database)
🚀 GitHub Pages (Hospedaje de ficheros estáticos CI/CD automatizado)