Crea un juego interactivo para pacientes infantiles con IA

Descarga la guía paso a paso

Paso a paso

Paso 1: Generar el código con ChatGPT

1.  Accede a ChatGPT. Entra en ChatGPT y abre un nuevo chat.

2.   Inicia un nuevo chat y utiliza este ejemplo de prompt que te dejamos a continuación para seguir paso a paso este caso de uso. Puedes modificar el prompt a tu gusto. 

Usa este prompt como referencia

Actúa como un especialista en crear aplicaciones web. Tu tarea es generar un archivo HTML, CSS y JavaScript para un juego educativo para niños pequeños sobre la diabetes que cumpla con las siguientes especificaciones:  

1.Diseño con Tailwind CSS: 

• Usa Tailwind CSS para los estilos. 
• Fondo rosa claro (bg-pink-200). 
• El contenido debe estar centrado en la pantalla con una tarjeta blanca grande (bg-white), redondeada (rounded-2xl) y con sombra (shadow-2xl).  

2. Estructura del juego: 

• Pantalla de inicio: Muestra un emoji de cara sonriente en tamaño grande (text-6xl), un mensaje de bienvenida con "¡Hola soy DIBI y tengo Diabetes! (en negrita) ¿Puedes ayudarme con mi diabetes? Contesta a estas preguntas y aprendamos juntos", un campo para ingresar el nombre del jugador y un botón para comenzar. 
• Pantalla de preguntas: Incluye un emoji grande (text-6xl) que representa el estado del jugador, una pregunta con opciones de respuesta y una puntuación. 
• Pantalla final: Muestra un emoji grande de celebración (text-6xl), un mensaje de agradecimiento y dos botones: uno para volver a jugar y otro para volver al inicio. 

3. Lógica del juego en JavaScript: 

• Al iniciar, el jugador ingresa su nombre y responde 10 preguntas sobre diabetes almacenadas en un array de objetos. Las 10 preguntas deben estar en primera persona y tener un lenguaje adaptado a niños pequeños. 
• Cada pregunta tiene tres opciones, con una correcta indicada en el objeto.  
• La puntuación inicial es de 100 puntos. 
• Si la respuesta es correcta, la puntuación aumenta 10 puntos; si es incorrecta, disminuye 10 puntos. 
• Dependiendo de la puntuación, el emoji cambia (🤩= 200- 120 puntos, 🙂= 110 - 80 puntos, 😢= 70 - 0 puntos). 
• Al finalizar, la puntuación se guarda en localStorage y se muestra un ranking con las últimas 10 puntuaciones en un contenedor con el nombre del jugador y la puntuación en la parte superior derecha de la pantalla siempre presente, no se oculta. 

4. Interactividad y animaciones: 

• Los botones, con las esquinas totalmente redondeadas y color azul pastel, cambian de color al pasar el mouse (hover:bg-yellow-400 en botones principales y hover:bg-green-500 en las respuestas). Además, el color de la tipografía en los botones cambia a blanco cuando se hace el hover. 
• Hay una muy pequeña demora antes de mostrar la siguiente pregunta. 
• Las secciones se ocultan y muestran dinámicamente según el progreso del juego. 

Genera el código completo con HTML, CSS (Tailwind) y JavaScript en un solo archivo, asegurando que funcione correctamente. Además, genera el archivo html para descargar al finalizar. 

3.   Revisa la respuesta de ChatGPT. Verifica que el código incluya correctamente la interfaz, la mecánica del juego y la puntuación. 

4.   Usa la función de previsualización de ChatGPT. Cuando se esté generando el código, se abrirá una ventana de lienzo donde podrás ver el código y previsualizar el resultado haciendo clic en “Previsualizar”. 

Paso 2: Correcciones y descarga

5.  Verifica que el juego funcione correctamente. Si encuentras errores o quieres ajustes, pídeselos a ChatGPT en la misma conversación. En el lienzo, también puedes abrir la consola directamente para ver los errores y corregirlos. 

6.  Descarga el código generado. Pide a ChatGPT que genere el archivo HTML descargable si no te lo ha proporcionado. También puedes copiar el código en un editor de texto como Word y guárdalo como (nombre que quieras ponerle).html. 

💡 Si quieres modificar cualquier aspecto puedes hacerlo directamente en ChatGPT antes de descargar el archivo. 

Paso 3:  Publicar el juego en GitHub Pages

1.  Crea una cuenta en GitHub en github.com
2.  Crea un nuevo repositorio. Haz clic en "New Repository" y asigna el nombre que quieras. Selecciona la opción "Public" para que cualquier persona pueda jugarlo. 

3.  Sube el archivo del juego. En la sección de "Code”, haz clic en "Uploading an existing file". Carga o arrastra el archivo .html y haz clic en "Commit changes" para guardar. 

4.  Renombrar nuestro archivo HTML. Para que la página cargue correctamente vamos a renombrar nuestro archivo. Haz clic en “Code” y selecciona el archivo que hemos subido. En la ventana de edición haz clic en “edit”, cambia el nombre del archivo a index.html y guarda los cambios haciendo clic en “Commit changes”. 

💡 Es necesario renombrar nuestro archivo con la denominación index.html para que funcione correctamente. 

5.  Publica el juego con GitHub Pages. Ve a la pestaña "Settings" del repositorio. Busca la sección "Pages" y selecciona la opción "main" en el apartado “Brunch”, a continuación, haz clic en “save”. Acabamos de seleccionar la carpeta principal donde GitHub podrá buscar y cargar nuestro archivo index.html.  

6.  En el mismo apartado de “Pages”, GitHub generará un enlace público donde el juego será accesible. 

💡 Consejo: GitHub puede tardar varios minutos en hacer visible tu archivo público. Una vez generado, guarda el enlace y compártelo.