Paso 0. Definir las caracter\u00edsticas de la actividad<\/h2>\n
Vamos a tratar de crear un juego para repasar las tablas de multiplicar con alumnado de 4\u00ba-6\u00ba Primaria. La especificaci\u00f3n de funciones del juego ser\u00e1:<\/p>\n
- \n
- Gr\u00e1ficos personalizados: <\/strong>nave.png<\/em>, nave del jugador (parte izquierda de la pantalla) y bg.jpg<\/em>, fondo del juego.<\/li>\n
- En la parte inferior se propone una multiplicaci\u00f3n<\/strong> (1 cifra \u00d7 1 cifra)<\/li>\n
- En la parte derecha aparecen 6 posibles resultados<\/strong>: se mueven de arriba a abajo y de abajo hacia arriba. Solo uno es la respuesta correcta.<\/li>\n
- Si se impacta el n\u00famero correcto<\/strong>: se suma<\/strong> 1 punto.<\/li>\n
- Si se impacta un n\u00famero incorrecto<\/strong>: se resta<\/strong> 1 punto.<\/li>\n
- Tras cada intento<\/strong> se muestra una nueva operaci\u00f3n<\/strong> y sus posibles resultados.<\/li>\n
- Temporizador<\/strong> regresivo desde 120 segundos.<\/li>\n
- Marcador<\/strong> de puntos<\/li>\n
- Controles<\/strong>: flechas arriba y abajo para mover la nave. Barra espaciadora para disparar.<\/li>\n<\/ul>\n
Paso 1. Recopilar los elementos visuales<\/h2>\n
Busca en Google la imagen de fondo<\/b>. Se recomienda un formato JPG por su reducido peso de archivo y un tama\u00f1o de imagen aproximado de 800×600 p\u00edxeles para cubrir adecuadamente el escenario. En este caso hemos elegido un fondo negro con estrellas que se mover\u00e1 en scroll infinito de derecha a izquierda. En este caso la imagen de fondo tendr\u00e1 como nombre de archivo bg.jpg<\/em><\/p>\n
Localiza tambi\u00e9n la imagen de la nave<\/b>. El archivo tendr\u00e1 formato PNG con fondo transparente para una buena integraci\u00f3n. Si esta imagen no dispone de fondo transparente puedes utilizar herramientas en l\u00ednea para eliminar el fondo: PixelCut<\/a> , RemoveBG<\/a> , Adobe Express<\/a> \u00a0o Photoroom<\/a>. Tambi\u00e9n es posible usar el software GIMP<\/a> para convertir el fondo en transparente<\/a> . La imagen de la nave tendr\u00e1 como nombre de archivo nave.png<\/em>.<\/p>\n
En este caso se proporcionan las dos im\u00e1genes utilizadas para facilitar el seguimiento del tutorial: activosVideojuego.zip (40 KB)<\/a><\/p>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2025\/05\/bg-300x199.jpg\")
<\/a><\/p>\n![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2025\/05\/nave.png\")
<\/a><\/p>\nOtra posibilidad es generar estas im\u00e1genes usando Copilot, ChatGPT \u2026 mediante un prompt descriptivo de las mismas.<\/p>\n
Paso 2. Generar el c\u00f3digo en ChatGPT<\/h2>\n
Ahora vamos a generar el c\u00f3digo del juego. Introduce en ChatGPT el siguiente prompt:<\/p>\n
Me gustar\u00eda que generes el c\u00f3digo de un juego educativo en lenguaje p5.js. Utiliza estos gr\u00e1ficos: \u201cnave.png\u201d para mi nave y \u201cbg.jpg\u201d para el fondo del juego. El fondo se mover\u00e1 de derecha a izquierda en un scroll infinito. En la parte inferior se propone una operaci\u00f3n de multiplicar un n\u00famero de una cifra por otro n\u00famero de una cifra. En la parte derecha se muestran en movimiento de arriba hacia abajo y de abajo hacia arriba, 6 posibles n\u00fameros y solamente uno de ellos es la soluci\u00f3n de la operaci\u00f3n. Si el jugador dispara e impacta con el n\u00famero correcto se sumar\u00e1 un punto al contador de aciertos. Si derriba un n\u00famero incorrecto se restar\u00e1 un punto. En cualquier de ambos casos se propondr\u00e1 una nueva operaci\u00f3n y otros 6 posibles n\u00fameros. Se muestra un contador de tiempo hacia atr\u00e1s de 120 segundos y un marcador de los puntos conseguidos. Mi nave se controlar\u00e1 con las teclas de flecha arriba y abajo y disparo con la barra espaciadora. Esta nave se mostrar\u00e1 completa en la parte izquierda de la pantalla.<\/em><\/span><\/p>\n
Este prompt es una propuesta susceptible de modificaci\u00f3n en funci\u00f3n de la personalizaci\u00f3n de las condiciones del juego.<\/p>\n
ChatGPT nos devolver\u00e1 un c\u00f3digo similar al siguiente codigoProgramaTablasMultiplicar.zip<\/a>\u00a0y pulsaremos en el bot\u00f3n Copiar.<\/b><\/p>\n
Paso 3. Crear el videojuego<\/h2>\n
En este art\u00edculo se propone utilizar OpenProcessing<\/a> por su sencillez y prestaciones. Otro compilador para este lenguaje podr\u00eda ser p5js.org<\/a><\/p>\n
Es necesario registrarse como usuario en esta plataforma. A continuaci\u00f3n se seguir\u00e1n los siguientes pasos:<\/p>\n
1. Clic en el bot\u00f3n CREATE A SKETCH<\/b><\/p>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2025\/05\/vd01.jpg\")
<\/a><\/p>\n<\/p>\n
2. En el panel izquierda pega el c\u00f3digo proporcionado por ChatGPT.<\/p>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2025\/05\/vd02-1024x653.jpg\")
<\/a><\/p>\n3. Clic en el bot\u00f3n SAVE <\/b>para guardar.<\/p>\n
4. Completa los metadatos del juego introduciendo T\u00edtulo, Imagen en miniatura<\/b> (thumbnail), Licencia de uso<\/b> \u2026 y pulsa en SUBMIT. <\/b><\/p>\n
5. Regresa al editor de c\u00f3digo pulsando en el bot\u00f3n C\u00f3digo.<\/b><\/p>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2025\/05\/vd03.jpg\")
<\/a><\/p>\n6. En el panel derecho haz clic en la pesta\u00f1a FILES <\/b>para arrastrar y soltar la imagen de fondo bg.jpg y la imagen de la nave nave.png. De esta forma los activos gr\u00e1ficos se subir\u00e1n al servidor.<\/p>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2025\/05\/vd04.jpg\")
<\/a><\/p>\n7. Prueba el v\u00eddeojuego pulsando en el bot\u00f3n play.<\/b><\/p>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2025\/05\/vd05.jpg\")
<\/a><\/p>\n8. IMPORTANTE: antes de comenzar a jugar haz clic sobre el escenario del juego para situar el foco sobre \u00e9l. A continuaci\u00f3n podr\u00e1s jugar usando las teclas de flechas y la barra espaciadora.<\/p>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2025\/05\/vd06-1024x779.jpg\")
<\/a><\/p>\nPaso 4. Compartir la URL del videojuego<\/h2>\n
1. Pulsa en el bot\u00f3n Compartir <\/b>situado en la esquina superior derecha.<\/p>\n
- En la parte inferior se propone una multiplicaci\u00f3n<\/strong> (1 cifra \u00d7 1 cifra)<\/li>\n
![\"\"](\"https:\/\/canaltic.com\/blog\/wp-content\/uploads\/2025\/05\/vd07.jpg\")
<\/a><\/p>\n