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:

1. Notepad++: Un editor de texto gratuito para Windows, ligero y fácil de usar.
2. Visual Studio Code: Un editor de código fuente gratuito y multiplataforma desarrollado por Microsoft, con soporte para múltiples lenguajes y extensiones.
3. Sublime Text: Un editor de texto sofisticado y altamente personalizable, disponible para Windows, macOS y Linux.
4. Brackets: Un editor de texto moderno y de código abierto centrado en el desarrollo web.
5. TextEdit: Si usas macOS, este editor viene preinstalado. Asegúrate de seleccionar «Formato» > «Convertir a texto sin formato» antes de guardar.
6. 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 localStorage del 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:

¿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 😉