ChatGPT es un asistente muy interesante para generar código en distintos lenguajes de programación (HTML, Javascript, Java, Python …) a partir de un prompt que describa qué debe hacer ese código. No es necesario saber programar. En su defecto la dificultad se basa en la habilidad para describir el comportamiento del programa de forma detallada mediante lenguaje natural.
En este artículo vamos a ejemplificar cómo podemos crear un videojuego educativo usando ChatGPT. Para ello se propone utilizar p5.js. Se trata de una biblioteca de Javascript, inspirada en el lenguaje Processing, que facilita el diseño de elementos visuales interactivos en el navegador web. El código generado se copiará y pegará en nuestra cuenta gratuita de Openprocessing.org para disponer de una interacción jugable y accesible por nuestro alumnado.
Paso 0. Definir las características de la actividad
Vamos a tratar de crear un juego para repasar las tablas de multiplicar con alumnado de 4º-6º Primaria. La especificación de funciones del juego será:
- Gráficos personalizados: nave.png, nave del jugador (parte izquierda de la pantalla) y bg.jpg, fondo del juego.
- En la parte inferior se propone una multiplicación (1 cifra × 1 cifra)
- En la parte derecha aparecen 6 posibles resultados: se mueven de arriba a abajo y de abajo hacia arriba. Solo uno es la respuesta correcta.
- Si se impacta el número correcto: se suma 1 punto.
- Si se impacta un número incorrecto: se resta 1 punto.
- Tras cada intento se muestra una nueva operación y sus posibles resultados.
- Temporizador regresivo desde 120 segundos.
- Marcador de puntos
- Controles: flechas arriba y abajo para mover la nave. Barra espaciadora para disparar.
Paso 1. Recopilar los elementos visuales
Busca en Google la imagen de fondo. Se recomienda un formato JPG por su reducido peso de archivo y un tamaño de imagen aproximado de 800×600 píxeles para cubrir adecuadamente el escenario. En este caso hemos elegido un fondo negro con estrellas que se moverá en scroll infinito de derecha a izquierda. En este caso la imagen de fondo tendrá como nombre de archivo bg.jpg
Localiza también la imagen de la nave. El archivo tendrá formato PNG con fondo transparente para una buena integración. Si esta imagen no dispone de fondo transparente puedes utilizar herramientas en línea para eliminar el fondo: PixelCut , RemoveBG , Adobe Express o Photoroom. También es posible usar el software GIMP para convertir el fondo en transparente . La imagen de la nave tendrá como nombre de archivo nave.png.
En este caso se proporcionan las dos imágenes utilizadas para facilitar el seguimiento del tutorial: activosVideojuego.zip (40 KB)
Otra posibilidad es generar estas imágenes usando Copilot, ChatGPT … mediante un prompt descriptivo de las mismas.
Paso 2. Generar el código en ChatGPT
Ahora vamos a generar el código del juego. Introduce en ChatGPT el siguiente prompt:
Me gustaría que generes el código de un juego educativo en lenguaje p5.js. Utiliza estos gráficos: “nave.png” para mi nave y “bg.jpg” para el fondo del juego. El fondo se moverá de derecha a izquierda en un scroll infinito. En la parte inferior se propone una operación de multiplicar un número de una cifra por otro número de una cifra. En la parte derecha se muestran en movimiento de arriba hacia abajo y de abajo hacia arriba, 6 posibles números y solamente uno de ellos es la solución de la operación. Si el jugador dispara e impacta con el número correcto se sumará un punto al contador de aciertos. Si derriba un número incorrecto se restará un punto. En cualquier de ambos casos se propondrá una nueva operación y otros 6 posibles números. Se muestra un contador de tiempo hacia atrás de 120 segundos y un marcador de los puntos conseguidos. Mi nave se controlará con las teclas de flecha arriba y abajo y disparo con la barra espaciadora. Esta nave se mostrará completa en la parte izquierda de la pantalla.
Este prompt es una propuesta susceptible de modificación en función de la personalización de las condiciones del juego.
ChatGPT nos devolverá un código similar al siguiente codigoProgramaTablasMultiplicar.zip y pulsaremos en el botón Copiar.
Paso 3. Crear el videojuego
En este artículo se propone utilizar OpenProcessing por su sencillez y prestaciones. Otro compilador para este lenguaje podría ser p5js.org
Es necesario registrarse como usuario en esta plataforma. A continuación se seguirán los siguientes pasos:
1. Clic en el botón CREATE A SKETCH
2. En el panel izquierda pega el código proporcionado por ChatGPT.
3. Clic en el botón SAVE para guardar.
4. Completa los metadatos del juego introduciendo Título, Imagen en miniatura (thumbnail), Licencia de uso … y pulsa en SUBMIT.
5. Regresa al editor de código pulsando en el botón Código.
6. En el panel derecho haz clic en la pestaña FILES para arrastrar y soltar la imagen de fondo bg.jpg y la imagen de la nave nave.png. De esta forma los activos gráficos se subirán al servidor.
7. Prueba el vídeojuego pulsando en el botón play.
8. IMPORTANTE: antes de comenzar a jugar haz clic sobre el escenario del juego para situar el foco sobre él. A continuación podrás jugar usando las teclas de flechas y la barra espaciadora.
Paso 4. Compartir la URL del videojuego
1. Pulsa en el botón Compartir situado en la esquina superior derecha.
2. En la casilla EMBED dispones del código para insertar esa animación en tu blog. Otra posibilidad es copiar la URL que viene en este código para disponer de un enlace de acceso directo a ese videojuego.
<iframe src="https://openprocessing.org/sketch/2652005/embed/" width="800" height="650"></iframe>
3. Envía la URL a tu alumnado para que pueda acceder al videojuego. No es necesario que se registren en Openprocessing. Ejemplo: Tablas de multiplicar