Dibuja una nave, pásala a una cuadrícula y juega con ella. Un taller local de creación y pruebas, con un juego descargable y mensajes opcionales para la IA.
Parte de Crear en familia · Tutorial 03
En un papel, una nave puede tener forma de flecha, de pez o de tostadora espacial. Lo interesante llega cuando ese dibujo se convierte en algo que podemos manejar.
Hoy vamos a dibujar una nave y usarla para esquivar diez meteoritos. Primero en papel, después en una cuadrícula del navegador. El juego ya está preparado: no hay que escribir código para empezar a cambiarlo.
Esta entrega se puede hacer por separado. Si vienes del robot que parpadea, reconocerás los píxeles. Ahora el dibujo tiene otra misión: moverse entre tres carriles.
El resultado probado: tu dibujo ocupa un carril y puede cambiar a los otros dos. La nave del ejemplo es original; puedes inventar otra.
La regla cabe en una frase: cambia de carril para dejar pasar diez meteoritos sin chocar. No hay disparos, compras ni sonidos. Puedes parar cuando quieras.
Abrir el taller y jugar · Descargar el taller completo
Necesitamos papel, lápiz, ordenador y navegador. El taller está pensado para 10–14 años. Reservad unos 25–35 minutos orientativos, o separad dibujo y juego en dos ratos.
El adulto descarga y descomprime el ZIP. En Windows puede aparecer Extraer todo; en macOS normalmente basta con abrirlo. Dentro está index.html: se abre con el navegador, no con un procesador de textos. No hay que instalar Node, añadir extensiones ni introducir una tarjeta.
El juego descargado funciona en local y no hace peticiones de red. No tiene cuentas, telemetría, cuotas de IA ni guardado automático. La copia de la nave la guardaréis vosotros. El archivo y los dibujos de ejemplo se ofrecen con licencia MIT, incluida en el descargable.
El niño o la niña diseña, pinta, juega y decide un cambio. El adulto prepara los archivos y ayuda a conservar la copia. Para el recorrido principal no necesitamos OpenCode ni otro servicio de IA. Al final hay una ampliación opcional para adultos que ya dispongan de un asistente autorizado.
En el papel, traza un rectángulo alto y divídelo en tres columnas. Pon tu nave abajo y una roca arriba. Señala un carril libre con el dedo.
Ya has dibujado una regla del juego. Todavía no necesitamos menús ni muchos niveles.
Haz una cuadrícula de 8 casillas de ancho y 8 de alto. Colorea algunas para inventar tu nave. Una flecha sencilla funciona bien. No hace falta copiar la del ejemplo.
El papel no se fotografía ni se envía a una IA. Vamos a pasar el dibujo casilla a casilla, mirando nuestra hoja.
Abre index.html de la carpeta descomprimida, o usa el enlace «Abrir el taller» de este artículo. Debes ver Dibuja tu nave y Juega con tu dibujo.
En una ventana estrecha, la zona de juego aparece debajo del dibujo. Desplázate hacia abajo para encontrarla.
Pulsa Borrar dibujo. Las casillas quedan claras y desaparece la nave de la zona de juego.
Si quieres recuperar el modelo, pulsa Nave de ejemplo. Si ya tienes un dibujo que te gusta, guárdalo antes de borrar: ese botón no tiene deshacer.
Pulsa cada casilla que hayas coloreado en el papel. Se vuelve turquesa. Si pulsas otra vez, se borra. La nave cambia al mismo tiempo en la zona de juego.
Cada casilla es un píxel del dibujo. La versión del juego se amplía para que podamos verla.
Con teclado, Tab recorre las casillas y Espacio activa la seleccionada. Sus etiquetas indican fila y columna. No necesitas acertar con el ratón en una casilla diminuta.
Mira tu nave en la zona de juego. ¿Distingues la parte de arriba? ¿Tiene una forma que te gusta? Cambia dos o tres casillas y vuelve a mirar.
No hace falta rellenarlas todas, pero debe quedar al menos una pintada. Si el dibujo está vacío, Jugar te pedirá que pintes primero.
Deja Ritmo de la siguiente partida → Tranquilo. Es la opción inicial. Los meteoritos bajan más despacio que en Normal.
El cambio de ritmo se aplica al comenzar una partida nueva. Cambiarlo mientras juegas no acelera ni frena de repente el meteorito que ya está bajando.
Pulsa Jugar. Tu nave empieza en el carril central y aparece un meteorito arriba. Mira por cuál de los tres carriles baja.
No se trata de perseguirlo: queremos estar en otro carril cuando llegue abajo.
Pulsa la flecha izquierda o derecha del teclado. Cada pulsación cambia un carril. También puedes usar los botones grandes ← y → debajo del juego.
En el borde, otra pulsación hacia fuera no saca la nave de la pantalla. Prueba los dos lados antes de complicar el dibujo.
Colócate en un carril libre y espera. Cuando el meteorito sale por abajo sin tocarte, el marcador pasa de 0 / 10 a 1 / 10.
Así sabemos qué cuenta el juego: meteoritos esquivados, no segundos ni disparos. Solo baja uno cada vez.
Pulsa Pausa. La nave y la roca se quedan donde estaban. El botón cambia a Continuar.
Pausa conserva la partida. Reiniciar vuelve al principio: son dos acciones diferentes.
Aprovechad para señalar el siguiente carril libre. Pulsa Continuar cuando quieras seguir. Si cambias de pestaña, el juego también se pausa; al volver, pulsa Continuar.
Deja la nave en el carril por el que baja una roca. Aparece «Ha habido un choque» y termina esa partida. No desaparece tu dibujo.
La colisión usa el espacio de la nave, no cada píxel pintado. Hacer una nave con un solo punto no la vuelve invisible para los meteoritos.
Pulsa Reiniciar. El marcador vuelve a 0 / 10 y tu nave regresa al centro. Después pulsa Jugar.
Reiniciar no borra el dibujo ni cambia el ritmo elegido. Puedes probar el mismo diseño otra vez.
Esquiva diez meteoritos para ver el mensaje «¡Lo has conseguido!». El orden de los carriles es fijo: puedes reconocerlo al repetir. No hay un generador de dificultad escondido.
Resultado conseguido durante la prueba del juego. No hace falta ganar para dar por terminado el taller: crear y comprobar tu nave ya es una actividad completa.
Con la partida terminada, elige Normal y empieza otra. Los meteoritos bajan más rápido. ¿Tienes menos tiempo para decidir?
Vuelve a Tranquilo cuando prefieras. Ahora estás probando una regla de diseño: el mismo dibujo y los mismos carriles pueden dar una sensación distinta al cambiar la velocidad.
Pulsa Reiniciar para volver al reposo. Cambia tres casillas de la nave y comienza otra partida con el mismo ritmo.
Así puedes comparar una cosa cada vez. Cambiar a la vez forma y velocidad hace más difícil explicar qué te gusta de la nueva versión.
Pulsa Guardar mi nave. Se descarga mi-nave.json. El adulto lo guarda junto a index.html, o en una carpeta de copias que podáis encontrar.
JSON es el tipo de archivo que usa este taller para guardar las casillas y el ritmo. No hace falta abrirlo ni editarlo. Tampoco guarda la partida a medias: conserva el diseño, no el meteorito que estaba cayendo.
Para comprobarla, pulsa Borrar dibujo y después Abrir mi nave. Elige el archivo que acabas de guardar. Debe aparecer «Nave recuperada. Ya puedes jugar» y volver vuestro dibujo.
Esta comprobación es la que nos permite confiar en la copia. Guardar y no volver a abrir nunca deja una duda para mañana.
Si no queréis borrar todavía el dibujo, abrid otra copia de index.html en una pestaña nueva e importad allí el archivo.
Conserva la carpeta descomprimida y el archivo de tu nave. Si mañana abres solo mi-nave.json, el navegador puede mostrar texto: vuelve a index.html y usa Abrir mi nave.
El juego no guarda automáticamente. Si cierras sin descargar tu dibujo, puedes perder los cambios. No necesitamos activar una cuenta para resolverlo: basta con conservar el archivo.
Puedes explicar: «Mi nave tiene esta forma. Se mueve entre tres carriles. He elegido Tranquilo porque quiero más tiempo para mirar».
Para otro día: inventa otra nave, cambia el ritmo o prueba a jugar por turnos. Una persona dibuja y la otra prueba; después intercambiáis los papeles.
| Lo que ves | Qué probar |
|---|---|
| Al abrir el archivo veo texto | Abre index.html con el navegador. mi-nave.json se carga desde Abrir mi nave. |
| No encuentro el juego | En una ventana estrecha está debajo de la cuadrícula; baja por la página. |
| Jugar pide pintar | El dibujo está vacío. Pinta una casilla o pulsa Nave de ejemplo. |
| Las flechas no cambian de carril | Comprueba que has pulsado Jugar y no estás en pausa. Si el selector de ritmo tiene el foco, pulsa la zona azul del juego. |
| He cambiado el ritmo y parece igual | Se aplica al empezar la siguiente partida. Pulsa Reiniciar y Jugar. |
| Al volver a la pestaña está parado | Es la pausa automática. Pulsa Continuar. |
| Abrir mi nave rechaza un archivo | Usa un JSON guardado por este taller, no una foto ni un archivo de otro juego. |
| He cerrado y no está mi dibujo | Abre tu copia de mi-nave.json desde el taller. Si no la guardaste, tendrás que dibujarlo de nuevo. |
El plan de esta serie incluye OpenCode. Aquí lo dejamos como ampliación opcional para el adulto, porque el ejercicio completo funciona con el archivo local y no depende de un proveedor de modelos. No hemos usado OpenCode para producir las capturas ni enviado estos mensajes a un modelo.
Los términos oficiales de OpenCode, consultados el 28 de septiembre de 2026, excluyen el uso de sus servicios por menores de 13 años. Para 10–12 mantenemos dibujo y juego local; no se cede una cuenta ni se les pide interactuar con ese servicio. Para 13–14, revisad autorización familiar, términos y requisitos adicionales del proveedor elegido. El software abierto local y los servicios alojados tienen condiciones distintas.
La documentación de Zen contiene modelos con precios y opciones gratuitas sujetas a cambios. No hay una cuota gratuita universal que este tutorial pueda prometer. Si el adulto no tiene un acceso permitido y sin gasto adicional, dejamos esta parte para después. No se pide tarjeta, contratar ni instalar herramientas para completar T03.
Si el adulto ya tiene OpenCode preparado, puede abrir una copia de la carpeta del juego, una conversación nueva y pegar:
Estoy revisando un pequeño juego local de tres carriles.
Lee solo index.html de esta carpeta de práctica y explícamelo
sin modificarlo: dónde se elige la velocidad y cómo se detecta un choque.
Usa cinco frases sencillas. No leas otras carpetas ni archivos privados.
No instales, no publiques y no cambies permisos.Resultado esperado: una explicación que podamos contrastar con el archivo; no una promesa de que la IA siempre acertará. Para pedir una mejora, después de revisar esa explicación:
Guarda una copia de index.html que podamos recuperar.
Propón un cambio pequeño: que los meteoritos sean azules.
Conserva los controles, las velocidades y las reglas.
Antes de editar, explica qué archivo tocarás y espera mi confirmación.
Después prepara tú la prueba local, sin comandos para el niño,
y comprueba que se puede jugar, pausar, perder, ganar y reiniciar.
No instales dependencias ni publiques nada.El adulto revisa los permisos reales de OpenCode: escribir «pide permiso» en el chat no configura una barrera de acceso. Si el asistente no puede respetar el alcance, no seguimos. Estos mensajes son plantillas, no una prueba de una sesión de generación.
El ejemplo 1.0 se probó el 28 de septiembre de 2026 con Chrome 153.0.8010.53 en macOS 27.0, también con viewport de 390 × 844. Se comprobaron dibujo, archivo recuperable, controles, límites, pausa, choque, victoria y reinicio. No es una prueba en móvil físico ni con una familia real.
El movimiento utiliza la función del navegador requestAnimationFrame. No incluye servicios externos. El código abierto de OpenCode tiene su propia licencia; eso no convierte en gratuitos todos los modelos.
El juego y sus dibujos originales llevan licencia MIT. Las capturas son del ejemplo funcionando. La portada es una ilustración distinta del programa. Descarga el taller y conserva tu copia para seguir inventando.
Dibuja un personaje, muévelo con las flechas y recoge estrellas. Un primer juego con bloques para niños de 10–14 años y sus familias, sin cuenta ni consola.
Da vida a un robot con dos fotogramas en Microsoft MakeCode Arcade: duplica un dibujo, cambia los ojos y prueba tu primera animación en familia.
Construye una pared, comprueba que bloquea el paso y busca una llave que abre la puerta del laberinto. Mapas y colisiones con Microsoft MakeCode Arcade.