Desarrolla una aplicación móvil que funcione como un catálogo de juegos, integrando archivos HTML creados con asistencia de inteligencia artificial para ejecutarlos directamente desde una interfaz organizada y funcional.
Este proyecto consiste en el desarrollo de un contenedor de aplicaciones
que permite organizar y ejecutar diversos juegos desde un menú de
selección. El sistema utiliza una estructura basada en archivos HTML5
almacenados internamente, los cuales son cargados a través de un
componente de visualización web para ofrecer una experiencia fluida y
directa en dispositivos móviles.
El proceso se centra en la generación de contenido mediante el uso de
herramientas de inteligencia artificial, lo que facilita la obtención del
código necesario para cada juego sin complicaciones. De esta manera, el
usuario puede gestionar una lista personalizada de títulos, configurando
la navegación entre el menú principal y la zona de juego de forma
eficiente.
|
| Menú principal de la aplicación con la lista de juegos disponibles para el usuario. |
Lista de Juegos Integrados
Tres en Raya (Tic-Tac-Toe): Un juego de estrategia donde dos jugadores
compiten por alinear tres símbolos en un tablero de tres por tres.
|
| Interfaz del juego Tres en Raya ejecutándose mediante el componente de visualización web. |
Ping Pong (Pong): Un simulador de tenis de mesa que pone a prueba los
reflejos para evitar que la pelota salga del área de juego.
|
| Vista del funcionamiento del juego de Ping Pong dentro del contenedor de la aplicación. |
Snake (La Serpiente): El clásico juego de habilidad donde se controla
una serpiente que debe alimentarse y crecer sin chocar con los bordes o
consigo misma.
|
| Representación del juego de la Serpiente Clásica cargado desde los archivos internos del proyecto. |
Memorama: Un desafío de memoria visual que consiste en encontrar parejas
de cartas idénticas ocultas en un tablero.
|
| Pantalla del juego de Memorama con la disposición de las cartas para el inicio de la partida. |
Carreras de Autos: Un juego de velocidad donde el objetivo es conducir
un vehículo esquivando obstáculos a lo largo del camino.
|
| Ejecución del juego de Carreras de Autos integrado en la estructura de pantallas de la aplicación. |
Space Invaders: Un juego de disparos lateral donde el usuario debe
defenderse de oleadas de enemigos mientras evita los ataques entrantes.
|
| Vista del juego Space Invaders mostrando la interacción del usuario con los elementos defensivos. |
📌Prompt para la IA:
Para obtener el código de cada juego, utiliza el siguiente texto en Google Gemini. Es importante que busques la sección que dice {ESCRIBE_AQUÍ_EL_NOMBRE_DEL_JUEGO}, borres ese texto y escribas el nombre del juego que necesites.
👇
Actúa como un desarrollador Senior de Videojuegos en HTML5 y experto en optimización de rendimiento móvil. Tu tarea es crear el juego completo llamado {ESCRIBE_AQUÍ_EL_NOMBRE_DEL_JUEGO} contenido estrictamente en un solo archivo HTML (incluyendo CSS y JavaScript interno).
Requisitos Técnicos Críticos:
Modo Un Jugador (CPU): Si el juego es de competencia (como Gato, Pong o Piedra, Papel o Tijera), debes programar una lógica de Inteligencia Artificial (CPU) para que el usuario pueda jugar solo contra la computadora.
Zero External Assets: No utilices imágenes, sonidos o librerías externas (como Phaser o jQuery). Usa Canvas API o DOM con CSS puro para los gráficos. Si necesitas sonidos, genera efectos básicos mediante Web Audio API.
Controles Táctiles: El juego debe ser 100% jugable en dispositivos móviles. Implementa eventos de touchstart y asegúrate de que no haya problemas de zoom o scroll accidental.
Responsivo: El diseño debe adaptarse a cualquier tamaño de pantalla (Mobile-First).
Optimización: Usa requestAnimationFrame para el bucle del juego. El código debe ser limpio, modular y seguir las mejores prácticas (evitar fugas de memoria).
Interfaz de Usuario: Incluye una pantalla de inicio con un botón "Jugar", un marcador de puntuación en tiempo real y una pantalla de "Game Over" con opción a reiniciar.
Estética: Un estilo visual moderno, limpio y minimalista.
Por favor, entrega únicamente el código del archivo HTML completo.
👆
📥A continuación, tienes disponible el botón para descargar el archivo .aia de este proyecto. Una vez descargado, puedes subirlo directamente a tu cuenta de MIT App Inventor y probar su funcionamiento de inmediato.
Detalles del Archivo
Nombre del archivo: JuegosHTMLV1.aia
Tamaño: 19KB
¿Cómo importar el archivo a mis proyectos?
- El archivo lo debes de importar en MIT App Inventor en la opción de proyectos e importar proyecto desde mi ordenador.
¿Cómo probar el proyecto?
- En MIT App Inventor presiona en la opción Conectar y AI Companion.
- Se genera un código QR o de 6 caracteres.
- Descarga la aplicación MIT AI2 Companion de forma gratuita en Google Play o App Store.
- Escanea el código QR o ingresa el código de 6 caracteres.
