← Volver al Índice

Aula Equipada

Documentación Técnica

1. Ficha Técnica

  • Nombre: Aula Equipada
  • ODS: ODS 4 - Educación de Calidad
  • Objetivo: Entregar material escolar (libros, mochilas) a los alumnos que lo soliciten antes de que acabe el tiempo.

2. Mecánica y Flujo de Juego

El juego utiliza la API de Drag and Drop nativa de HTML5. En pantalla aparecen "alumnos" que requieren un objeto aleatorio. El jugador debe hacer clic sostenido en los suministros (mesa virtual) y arrastrar el contenedor correspondiente sobre el alumno adecuado.

  1. El DOM genera n alumnos dependiendo del nivel de dificultad.
  2. A los alumnos se les asigna un tipo de material.
  3. El jugador arrastra el material sobre el alumno (evento dragstart, drop).
  4. Si acierta, el alumno se marca como satisfecho. Si falla o se queda sin tiempo, se pierde la partida.

3. Lógica de Programación

Hereda de BaseGame. La inicialización de componentes DOM se hace dinámicamente en el setupGame() usando document.createElement('div') en vez de HTML estático. Esto permite escalar el número de alumnos con this.level.

Eventos Principales

  • dragstart: Disparado al agarrar el suminisitro. Guarda el ID del ítem en e.dataTransfer.setData('text/plain', itemType).
  • dragover: Necesario prevenir el comportamiento por defecto con e.preventDefault() para permitir soltar elementos en los alumnos.
  • drop: Evalúa si el contenedor receptor solicitaba la string contenida en el dataTransfer.

Variables Importantes

this.requiredMaterials = 3 + this.level; // Número de alumnos escalable this.materialsDelivered = 0; // Contador para trigger de victoria this.itemTypes = ['book', 'pencil', 'notebook']; // Conjunto de posibles exigencias

4. Sistema de Victoria/Derrota

Victoria: En el evento drop, cada vez que se compara favorablemente el suministro, se incrementa this.materialsDelivered. Cuando this.materialsDelivered === this.requiredMaterials, se invoca this.finish(true).

Derrota: BaseGame evalúa el timeLeft. Si llega a 0 mediante el decaimiento por setInterval automático antes de completar los entregas, invoca this.finish(false).

5. Posibles Mejoras Futuras

  • Añadir que los alumnos penalicen si sueltas un material incorrecto quitando tiempo.
  • Incluir animaciones de transición CSS al momento del drop exitoso (partículas).
  • Soporte de API Táctil (Touch Events) ya que el Drag and Drop nativo suele fallar en dispositivos móviles antiguos.