MEGAPROMPT — Colección de juegos educativos "Misión Semiótica"

 #

> Prompt listo para pegar en un asistente de código y reproducir la colección completa

> (un único archivo HTML con cuatro juegos educativos de semiótica, estilo victoriano,

> con mecánica de refuerzo del aprendizaje).

---

## 1. Rol y encuadre

Actúa como **experto en desarrollo web frontend (HTML5, CSS3 y JavaScript vanilla)** y en

**diseño instruccional**. Vas a crear una **colección de juegos educativos gamificados** para un

curso universitario de **Semiótica de la Imagen**, entregada como **un único archivo HTML

autocontenido y offline**.

## 2. Objetivo pedagógico

Que estudiantes de diseño/comunicación visual **apliquen principios de semiótica y antropología

visual** (niveles denotativo, connotativo y mítico-ideológico; tipos de signo de Peirce; figuras

retóricas; códigos culturales) mediante una experiencia tipo **investigación detectivesca al estilo

Sherlock Holmes**.

## 3. Público

Equipos de 2 a 4 estudiantes (secciones de 20–35), nivel intermedio/avanzado, alta familiaridad

digital.

## 4. Entregable y arquitectura

- **Un solo archivo `.html`** que abra con doble clic, sin servidor ni dependencias instalables.

- Una **pantalla "hub" (gabinete)** que liste los juegos en tarjetas.

- Cada juego es **independiente** y se ejecuta **aislado en un `<iframe srcdoc>`** para evitar

  colisiones de CSS/JS. Embebe el HTML completo de cada juego **codificado en base64 (UTF-8)** y

  decodifícalo con `TextDecoder` al abrirlo; un botón "‹ Gabinete" reinicia el `srcdoc` y vuelve al hub.

- Usa **Bootstrap 5** (CDN) donde convenga y **estado en memoria** (sin `localStorage`/

  `sessionStorage`, por restricciones de iframe).

- La pieza principal debe ser además **PWA** (manifest + service worker, con *fallback* embebido

  para `file://`).

## 5. Los cuatro juegos

1. **Misión Semiótica (PWA principal):** recorrido en las **5 fases del modelo IUTPC** (Inicio,

   Utilidad, Transformación, Práctica, Cierre). Registro obligatorio de equipo (nombres, correo

   institucional validado, código de clase). Incluye un **juego de cartas investigativo**

   (escena → indicio → testimonio → evidencia → sospechoso → coartada) con **flip 3D, desbloqueo

   encadenado, glassmorphism y efecto tilt/holográfico**, preguntas abiertas y cerradas, **informe

   semiótico imprimible** (completo y solo respuestas), cierre con puntaje, rango, insignias y

   **"Dos estrellas y un deseo"**.

2. **Anagramas Semióticos:** descifrar términos (signo, ícono, índice, símbolo, denotación,

   connotación, mito, código, metáfora, metonimia, paradigma, sintagma…). Pista de letra opcional

   con costo de puntos.

3. **Campo de Indicios (buscaminas):** lógica clásica de buscaminas (flood-fill, números, banderas,

   zona segura inicial). Pisar un "falso indicio" dispara el refuerzo. Controles táctiles con

   pulsación larga.

4. **Asteroides del Signo (estilo Asteroids):** nave con giro 360°, impulso, pantalla envolvente y

   asteroides que se parten al dispararles, cada uno etiquetado con un término; destruir solo los

   que cumplen la consigna. Controles de teclado y táctiles.

## 6. Mecánica clave: REFUERZO DEL APRENDIZAJE (obligatoria en todos)

**Cada vez que el jugador se equivoca**, en lugar de solo marcar "incorrecto", el juego despliega un

panel formativo con cuatro elementos y permite reintentar:

- **Pista** (orienta sin dar la respuesta: "observa el contraste", "revisa el contexto cultural",

  "piensa en la relación parte–todo").

- **Dato** (hecho conceptual relevante).

- **Elemento analógico** (una analogía cotidiana que ilumina el concepto).

- **Pregunta de refuerzo** (cerrada, debe acertarse para continuar; suma puntos).

La retroalimentación es **breve, motivadora y deductiva**: el error es oportunidad de aprendizaje.

Las preguntas cerradas dan indicios, nunca la respuesta directa.

## 7. Estética y estilo visual

**Victoriano inglés** (finales s. XVIII–XIX): fondos oscuros, **acentos dorados y burdeos**, marcos

decorativos con esquinas y filigranas (`❦`), simetría, tipografía clásica (Cinzel / Cinzel

Decorative / EB Garamond con *fallback* serif), textura sutil de papel. Atmósfera solemne, elegante

y académica coherente entre el hub y los cuatro juegos. **Totalmente responsivo** (móvil incluido)

con controles táctiles.

## 8. Tecnología

HTML5 semántico (`section`, `article`, `data-*`, formularios), CSS3 (transform 3D `rotateY/rotateX`,

`transform-style: preserve-3d`, `backface-visibility`, `backdrop-filter`, `:has()` para *blur*

selectivo, `@keyframes` con `hue-rotate`), JavaScript vanilla con estado progresivo (objeto

`estadoCaso`/equivalente), `<canvas>` + `requestAnimationFrame` para los juegos de acción.

Microanimaciones con anime.js **opcionales y con shim no-op** si la CDN no carga.

## 9. Criterios de calidad

- Cero errores en consola; degrada con elegancia sin red (fuentes y CDN opcionales).

- No avanzar por azar: desbloqueos y validaciones reflejan el progreso real.

- Código autocontenido, sin *backend*.

- **Pie de página institucional fijo en todas las vistas:**

  `Mg. Mario Quiroz Martinez — Curso de Semiótica de la Imagen 2026`.

## 10. Salida esperada

Devuelve el **archivo HTML único completo y listo para ejecutar**, con el hub y los cuatro juegos

embebidos y aislados, verificado para que cada juego cargue en su iframe y el regreso al hub

reinicie su estado.