Un pequeño juego puede dar una razón para explorar tu web antes de ver una promoción. En este ejemplo, Simón encuentra pistas, combina objetos y abre una salida; al terminar obtiene un código que se puede probar en una tienda de demostración. Aquí te enseño cómo crear un escape room con IA para tu web, desde el encargo hasta las comprobaciones finales.
No necesitas empezar escribiendo código. La ruta es: probar el ejemplo, decidir tu historia y tu recompensa, copiar el encargo y pedir a un asistente que prepare y abra los archivos. Después revisas el juego antes de integrarlo en tu página.
Los prompts completos están en las tarjetas del final. Tienes también las capturas, el proyecto de práctica y una guía PDF para seguirlo con calma.
Mira el resultado: el reel de ESCAPE
Este es el reel del ejemplo: del tablón al inventario y de la salida al cupón. El cierre «Comenta ESCAPE» corresponde a Instagram; desde aquí puedes abrir directamente el juego y los recursos, sin dejar ningún comentario.
Leer la transcripción del reel
Puedes crear un minijuego en tu web para que tu público participe y consiga un cupón de descuento.
Observas el tablón, deduces el código y abres el estuche.
La llave abre el armario. Combinas lo que encuentras y activas el proyector.
Al salir, aparece el cupón. Lo copias, eliges un producto y lo aplicas en la tienda.
Para montarlo con IA, pide el juego, una recompensa al terminar y el enlace a tus productos.
Comenta ESCAPE y te envío por privado el juego y el prompt para crear el tuyo.
Qué necesitas antes de empezar
- Un ordenador y un navegador. Para probar la demostración también sirve el móvil.
- Un asistente que pueda trabajar con archivos web. La ruta que explico utiliza Codex en la app de escritorio de ChatGPT; también puedes usar otra herramienta que entregue y pruebe el proyecto.
- Una idea sencilla: negocio, público, personaje, lugar y recompensa. Puedes empezar con un recurso descargable si no tienes tienda.
- Una imagen propia del personaje, si quieres mantenerlo. Mejor de cuerpo entero, con los accesorios visibles. Si no tienes mascota, pide primero un personaje sencillo.
Probar el juego y descargar nuestros archivos no requiere una cuenta. Para crear tu versión con IA sí necesitas acceso al asistente elegido y a las funciones que vayas a usar; sus límites dependen de tu cuenta. No necesitas conectar una tienda ni contratar un servicio para hacer la primera prueba.
Si aún no tienes la app, sigue la guía oficial de instalación. Una vez dentro, elige Codex en el selector de ChatGPT, abre una carpeta para este proyecto y trabaja en ella. Para comparar alternativas, tienes nuestro índice de herramientas por tarea.
Qué demuestra este ejemplo. La papelería, sus productos y el cupón ESCAPE10 son una simulación. No se realizan compras ni se aplica ese código a productos reales de SimplificaconIA. El juego funciona; la conexión con una tienda real es una fase posterior.
Cómo crear tu escape room con IA, paso a paso
Paso 1. Prueba el ejemplo y entiende la cadena de pistas
Abre el juego a pantalla completa y pulsa Entrar en el estudio. Explora con los botones del escenario o los de la barra inferior. Tablón muestra una pista; Estuche permite introducir la respuesta. Si te atascas, pulsa Una pista.
Lo importante al crear tu versión es que cada acción tenga una causa: la pista abre algo, ese objeto permite avanzar y el último paso revela la recompensa. Evita añadir objetos bonitos que no sirvan para nada o respuestas que el jugador tenga que adivinar sin información.
Comprueba que una respuesta incorrecta muestre ayuda sin borrar lo conseguido. En el inventario puedes seleccionar dos objetos y pulsar Combinar objetos. Cuando un objeto preparado está seleccionado, toca el lugar donde quieras usarlo.
Paso 2. Escribe los datos de tu versión
Antes de copiar el prompt, prepara estas respuestas. No necesitas vocabulario técnico: sirven frases normales.
| Dato | Ejemplo para una prueba |
|---|---|
| Negocio y público | Una papelería para personas que organizan proyectos. |
| Personaje y escenario | Mi mascota en un estudio que se ha quedado cerrado. |
| Reto | Encontrar una pista, abrir un estuche y preparar una proyección. |
| Recompensa | Mostrar un cupón de demostración del 10 %, sin compras. |
| Siguiente paso | Un botón para ver dos productos de ejemplo. |
En tu caso puedes cambiar la papelería por una academia, una librería o una campaña de un negocio. Para la primera versión, una habitación, pocas pistas y una sola recompensa son más fáciles de revisar que un juego con muchas pantallas.
Paso 3. Copia el encargo, adjunta tu referencia y pide una primera versión
- Ve al final de esta guía y copia la tarjeta Crear un escape room con IA para una web y un cupón.
- Pégala en el chat de tu proyecto y sustituye los campos entre corchetes por los datos del paso anterior.
- Si vas a usar tu personaje, adjunta su imagen con el control de archivos de tu asistente. Indica que es la referencia que debe conservar.
- Envía el encargo. Si faltan datos, respóndelos antes de que empiece a construir.
El mismo encargo está en la página del ejemplo, bajo El prompt. Allí tienes el botón Copiar prompt completo y una descarga en TXT, un archivo de texto que puedes abrir y copiar si lo prefieres.
Una primera entrega útil debe incluir una versión que puedas abrir, sus archivos y una explicación de lo que funciona. Pide al asistente que abra el proyecto en el navegador y te dé la dirección de prueba. Una dirección que empieza por http://localhost o http://127.0.0.1 funciona en tu ordenador; todavía no es una web pública.
Si solo recibes un bloque de código o una captura, falta una parte del encargo. Pide que guarde los archivos en la carpeta del proyecto, compruebe sus imágenes y abra el resultado. No necesitas copiar trozos de JavaScript entre archivos si tu asistente puede prepararlos por ti.
Paso 4. Revisa el movimiento, los controles y la recompensa
Juega desde el principio con la tarjeta Revisar un escape room y su cupón sin hacer compras como lista de comprobación. Hazlo también sin saber la solución: ¿se entiende dónde tocar y para qué sirve cada objeto? Mira que el personaje mantenga su aspecto y que los botones se puedan usar en el móvil.
En la demostración, al abrir la salida aparece ESCAPE10. Pulsa Copiar código y después Ver productos. El botón debe llevar a un destino concreto, no dejar al jugador en una pantalla sin continuación.
En la tienda de prueba elige un producto, revisa el campo Código de descuento y pulsa Aplicar descuento. Con el cuaderno de 12,00 €, la reducción mostrada es de 1,20 € y el total queda en 10,80 €. Aplicarlo de nuevo debe conservar ese total, sin descontar otra vez.
Paso 5. Guarda los archivos y llévalo a tu web
Primero conserva una copia que funcione. Si usas el proyecto descargable de esta guía, sigue este orden:
- Descarga el ZIP y elige Extraer todo en Windows, o descomprímelo con la opción de tu sistema.
- Abre la carpeta
escape-simon. Dentro encontrarásindex.html,tienda.htmly las carpetasjuego,refyout. - Conserva esos archivos y carpetas juntos.
index.htmles la página de entrada;juego/index.htmles el juego;tienda.htmles la simulación de productos. - Abre la carpeta en tu asistente y pídele que arranque el proyecto en un servidor local y abra el navegador. El archivo
LEEME.txtincluye también la alternativa para quien ya tenga Python.
Puedes abrir el HTML con doble clic para una primera consulta, pero la comunicación entre el juego y la tienda conviene probarla desde la dirección local que te dé el asistente. Si ves imágenes rotas, comprueba primero que has extraído todo el ZIP y que no has movido solo el HTML fuera de su carpeta.
Para publicarlo, pide que prepare una carpeta independiente en tu alojamiento, por ejemplo /mi-juego/, y que te indique la URL HTTPS final. Sube la carpeta completa por el gestor de archivos de tu alojamiento o con la ayuda de quien mantenga tu web. Abre esa dirección desde otro dispositivo antes de enlazarla en una campaña.
Cómo mostrar el juego dentro de WordPress
La opción más sencilla es un botón hacia la URL del juego. Si prefieres verlo dentro de una página, aloja primero los archivos y utiliza un bloque HTML personalizado para incrustarlo. Es una ventana hacia el juego publicado: no tienes que pegar todo su código dentro del artículo.
- Abre la página que quieras editar en WordPress.
- Añade un bloque escribiendo /html y elige HTML personalizado. En Elementor, utiliza el widget HTML.
- Introduce un iframe con tu URL HTTPS y un título que explique qué contiene. La dirección debe ser la de tu juego, no la de un archivo de tu ordenador.
- Revisa la vista previa, ajusta la altura y comprueba el móvil antes de guardar.
<iframe src="https://tu-dominio.com/mi-juego/"
title="Juego de escape de mi negocio"
style="width:100%;min-height:1100px;border:0"
loading="lazy"></iframe>Cambia https://tu-dominio.com/mi-juego/ por tu dirección real. La altura es un punto de partida: ajusta lo que necesite tu diseño. La documentación de HTML personalizado de WordPress explica el bloque. Si tu rol o editor elimina el iframe al guardar, pide a quien administra la web que lo integre con un método permitido; conserva las protecciones del sitio.
Cómo pasar del cupón de prueba a un descuento real
Mostrar un código en pantalla no crea una promoción en una tienda. El comercio debe reconocerlo y comprobar su porcentaje, productos, fechas y límites. Además, un código escrito en JavaScript puede encontrarse o compartirse: no demuestra por sí solo que una persona haya resuelto el juego.
Si tienes WooCommerce, una ruta básica es Marketing → Cupones → Añadir cupón: define el código, el tipo de descuento, su importe y la caducidad; revisa las restricciones de productos y los límites de uso. La opción Uso individual evita combinarlo con otros cupones cuando esa sea tu condición. Comprueba el carrito en un entorno de pruebas antes de anunciarlo.
Tienes los campos y opciones en la documentación oficial de cupones de WooCommerce. Si necesitas entregar códigos individuales solo a quien termine el reto, pide una integración que valide ese logro y emita el cupón desde el servidor. Es una ampliación del ejemplo, no una función conectada por descargarlo.
Lista de comprobación antes de compartirlo
- Se entiende qué hay que hacer desde la primera pantalla.
- Todas las respuestas se pueden deducir con las pistas disponibles.
- Un error no consume objetos necesarios ni bloquea la partida.
- La recarga conserva el progreso y el reinicio pide confirmación.
- La pantalla final permite copiar el código y llegar a los productos.
- Cambiar de artículo recalcula el descuento y aplicarlo dos veces no lo acumula.
- Textos, imágenes, botones y formularios se ven bien en móvil.
- La versión publicada abre por HTTPS y carga sus archivos.
- Si hay promoción real, sus condiciones y validación están comprobadas en la tienda.
Errores habituales y cómo resolverlos
| Qué te ocurre | Qué debes pedir o revisar |
|---|---|
| La IA entrega solo una imagen | Pide archivos web funcionales, inventario y una partida que se pueda terminar. |
| Se pierden las imágenes | Extrae la carpeta completa y conserva las rutas. Pide al asistente que compruebe los recursos al abrirla. |
| El personaje cambia de aspecto | Adjunta la misma referencia al corregir cada escena y conserva los rasgos aprobados. |
| Una acción incorrecta rompe el recorrido | Describe el clic exacto y el resultado esperado. Corrige esa transición y vuelve a probar desde el inicio. |
| El cupón se muestra pero la tienda lo rechaza | Comprueba que existe en el comercio y que el producto, la fecha y los límites permiten usarlo. |
| El juego se corta en móvil | Revisa botones, formulario, inventario y altura del iframe con una pantalla estrecha; no solo la portada. |
Dudas antes de crear tu primera versión
¿Tengo que saber programar?
Puedes empezar con el encargo y el proyecto de práctica. Aun así, necesitas revisar lo que la IA entrega. Para conectar una promoción real, conviene que lo compruebe alguien que conozca tu plataforma de comercio.
¿Tiene que ser un descuento?
No. Puedes entregar una plantilla, un capítulo, una pista adicional o un recurso descargable. Define la recompensa antes de construir el juego y explica cómo se recibe al terminar.
¿Puedo usar mi mascota y mis colores?
Sí: aporta tu referencia y describe los colores y el tono. Utiliza imágenes y materiales propios o con permiso de uso. Revisa el resultado a tamaño pequeño para que el personaje y los controles sigan reconociéndose.
¿El ejemplo ya está conectado a una tienda que cobra?
No. La papelería es una prueba de interacción y cálculo. No tiene un checkout real ni procesa pedidos. Configurar una tienda y su promoción es un trabajo distinto de mostrar la demostración.
Descargas para seguir la guía
El PDF reúne los pasos, las capturas y los dos prompts. El ZIP contiene el ejemplo de Simón con su carpeta de archivos y un LEEME. Para ver el resultado sin preparar nada, utiliza el juego online.
Si quieres preparar primero tu personaje, puedes seguir la guía de personajes animados. Para elegir otras instrucciones útiles, entra en la biblioteca de prompts.
¿Quieres los prompts para crear y revisar tu juego?
Justo debajo tienes las tarjetas para copiar el encargo y revisar el proyecto. Sustituye los corchetes por tus datos, adjunta la referencia cuando corresponda y trabaja en la misma carpeta para que el asistente pueda corregir lo que ya existe.
