Continuamos nuestra fascinante serie de experimentos con ChatGPT, y hoy he hecho un descubrimiento que me ha sorprendido: ¡es posible crear juegos en HTML y jugarlos directamente en el navegador!
La capacidad de crear juegos interactivos utilizando solo HTML, CSS y JavaScript es una herramienta poderosa y accesible para cualquier persona, incluso si no tiene experiencia avanzada en programación. Lo mejor de todo es que no necesitas instalar ningún software adicional ni entornos complejos de desarrollo. Con un simple editor de texto, como el Bloc de notas (o cualquier otro que prefieras), ya puedes comenzar a desarrollar tu propio juego y disfrutarlo desde cualquier navegador web, sin importar el dispositivo.
En el artículo anterior, vimos cómo crear un juego en solo 5 minutos usando un lenguaje de programación llamado Python (puedes leer el artículo aquí si te interesa). Para desarrollar un juego en Python, necesitábamos algunos pasos preliminares sencillos, como instalar software gratuito en nuestra computadora. Sin embargo, con HTML, parece que solo necesitamos herramientas basicas que todos los ordenadores ya tienen.
Vamos a ver cómo hacerlo:
Paso 1: Pide a ChatGPT el código del juego
En este ejemplo, vamos a crear el clásico juego Snake.
Hola ChatGPT, me podrías dar el código HTML para crear un juego de Snake?
Paso 2: Copia y pega el código en cualquier editor de texto
Para editar y lanzar el juego de Snake que te proporcioné, puedes utilizar cualquier editor de texto que te permita guardar archivos con extensión .html. Aquí tienes algunos de los editores de texto más populares:
- Notepad++: Un editor de texto gratuito para Windows, ligero y fácil de usar.
- Visual Studio Code: Un editor de código fuente gratuito y multiplataforma desarrollado por Microsoft, con soporte para múltiples lenguajes y extensiones.
- Sublime Text: Un editor de texto sofisticado y altamente personalizable, disponible para Windows, macOS y Linux.
- Brackets: Un editor de texto moderno y de código abierto centrado en el desarrollo web.
- TextEdit: Si usas macOS, este editor viene preinstalado. Asegúrate de seleccionar «Formato» > «Convertir a texto sin formato» antes de guardar.
- Gedit: El editor de texto predeterminado en muchas distribuciones de Linux, simple y efectivo.
Paso 3: Guarda el archivo con la extensión .html
Asegúrate de guardarlo con la extensión .html, por ejemplo, juego-snake.html.
Paso 4: Ejecuta el juego
Para lanzar el juego, simplemente haz clic derecho sobre el archivo y selecciona la opción «Abrir con > Google Chrome» (o el navegador que prefieras).
Puedes utilizar Chrome, Firefox, Edge o cualquier otro navegador web.
¡Listo! En tan solo 2 minutos, ya has creado tu propio juego.
Este es el resultado que deberías ver:
¡Increíble, verdad! Además, ¿no te parece como volver atrás en el tiempo, cuando pasabas horas jugando a este clásico? Hay algo nostálgico y especial en recrear esos juegos simples que nos brindaron tanta diversión, y ahora tener la posibilidad de construirlos por nosotros mismos, con unas pocas líneas de código, lo hace aún más emocionante.
Mejorar el juego
Si queremos ver nuestro juego en una versión aún mejor, es tan simple como pedírselo a ChatGPT. Un prompt como este debería ser suficiente:
Que podría hacer para mejorar aun mas la experiencia del juego? Me puedes dar un nuevo código completo con todas las mejoras que podrías aportar?
Repite los pasos anteriores y tendrás una versión mejorada del juego.
En mi caso, ChatGPT me ha añadido las siguientes mejoras:
- Puntuación y récord:
- Se muestra la puntuación actual y el récord (mejor puntuación) en pantalla.
- El récord se guarda en el
localStoragedel navegador, por lo que se mantiene incluso si cierras y vuelves a abrir el juego.
- Incremento de velocidad:
- La velocidad del juego aumenta ligeramente cada 5 puntos, haciendo el juego más desafiante a medida que avanzas.
- Pantallas de inicio y fin de juego:
- Pantalla de inicio: Muestra un mensaje de bienvenida y un botón para iniciar el juego.
- Pantalla de fin de juego: Aparece cuando pierdes, mostrando la puntuación final y un botón para reiniciar.
- Función de pausa:
- Puedes pausar y reanudar el juego presionando la tecla ‘P’.
- Restricciones de movimiento:
- Se evita que la serpiente pueda moverse en la dirección opuesta inmediata, reduciendo la posibilidad de chocar accidentalmente.
- Mejoras visuales:
- Se han ajustado los estilos y colores para una mejor experiencia visual.
- Se ha añadido una estructura más organizada con contenedores y elementos HTML para mejorar la interfaz.
Diferencias entre Python y HTML
Sin tener aún conocimientos sobre lenguajes de programación, también le pregunté a ChatGPT cuáles son las principales ventajas y desventajas de usar HTML o Python para el desarrollo de juegos. Al parecer, HTML es ideal para juegos «simples», mientras que Python podría ser más adecuado para juegos más complejos y con gráficos intensivos.
A continuación, te dejo una tabla resumen con las principales diferencias entre ambos:
| Característica | HTML + JavaScript | Python (con Pygame) |
|---|---|---|
| Ejecución | En el navegador web | En el escritorio o servidor |
| Facilidad de distribución | Muy fácil (URL en el navegador) | Necesita instalación o ejecutable |
| Rendimiento | Adecuado para juegos 2D y simples | Adecuado para juegos más complejos |
| Accesibilidad multiplataforma | Funciona en cualquier dispositivo con navegador | Funciona en computadoras donde se instale |
| Gráficos y animación | Ideal para juegos ligeros y medianos | Ideal para juegos con lógica intensiva |
| Control sobre recursos | Limitado al navegador | Completo control sobre el sistema |
| Facilidad de desarrollo | Requiere más conocimientos de front-end (HTML/CSS/JavaScript) | Desarrollo rápido con sintaxis sencilla |
¿Qué te parece? ¿Vale la pena experimentar con el desarrollo de videojuegos utilizando Inteligencia Artificial? Yo diría que sí. Es increíble ver cómo algo que antes parecía imposible, sin años de estudio en codificación y sin pasar por innumerables pruebas y errores, ahora puede hacerse de manera tan sencilla.
Es asombroso cómo la IA nos facilita el proceso, permitiéndonos obtener resultados decentes y divertidos con muy poco esfuerzo.
¡Nos vemos en el próximo artículo!
Un saludo 😉
