Crear en familia: cambia los colores de tu juego con vscode.dev

El robot funciona. Recoge estrellas y llega a la meta. Pero tú lo habías imaginado violeta.

Vamos a cambiarlo. Usaremos Visual Studio Code para la web, el editor de Microsoft que se abre en vscode.dev. Prepararemos una paleta pequeña, veremos qué cambia en el juego y guardaremos una copia que podamos abrir mañana.

No hace falta haber seguido los otros talleres. El juego ya está preparado y hoy solo vamos a tocar sus colores. Las reglas pueden esperar.

Portada original generada con IA. Es una ilustración del taller; el juego real aparece en las capturas siguientes.

Lo que vamos a conseguir

Un robot se mueve por un tablero de cinco por cinco. Recoge tres estrellas, una detrás de otra. No hay reloj ni enemigos: podemos parar después de cualquier movimiento.

Nuestra primera meta: cambiar el robot verde por uno violeta y comprobar que sigue funcionando.

Este es el punto de partida. A la izquierda jugamos; a la derecha está la paleta que llevaremos al editor.

Abrir el juego inicial · Descargar el taller en ZIP

Antes de empezar: para las familias

Necesitáis un ordenador con teclado, un navegador actualizado, conexión para abrir vscode.dev y un adulto disponible. Las capturas y los pasos se han probado en Chrome para Mac. El juego descargado funciona localmente; el editor web necesita conexión.

Reservad unos 25–40 minutos orientativos, con una pausa cuando queráis. No hace falta terminarlo todo de una vez.

• El niño o la niña elige la paleta, hace un cambio pequeño y prueba si se ve bien. Puede empezar diseñando los colores en papel y jugando con el archivo local.
• El adulto revisa las condiciones del editor, prepara la descarga y comprueba dónde se guarda el resultado. Si el menor no debe manejar el servicio web según las condiciones aplicables, el adulto realiza esa parte y el menor continúa con diseño y pruebas locales.
• No abrimos cuentas de Microsoft, GitHub ni IA. No usamos Copilot, Codespaces, repositorios remotos ni tarjetas.

La actividad está pensada para 10–14 años. Esa es una orientación del taller, no una edad mínima oficial del producto. En las condiciones enlazadas por vscode.dev no he encontrado una edad mínima numérica específica para esta edición sin cuenta. El adulto debe revisar las condiciones vigentes; estar acompañado no sustituye los requisitos del proveedor. Si queda alguna duda, podéis hacer hoy la parte local.

Microsoft describe el editor web como gratuito y sin instalación. Esta ruta no utiliza cuotas de IA ni horas de una máquina en la nube: no hay que activar planes. Eso no es una promesa de gratuidad indefinida. Si aparece una pantalla de pago o de alta obligatoria, deteneos y comprobad que seguís en el recorrido indicado.

El ejemplo solo contiene formas y colores inventados. No pongáis nombres reales, colegio, fotografías ni datos personales. El juego no envía datos. vscode.dev sí es un servicio online y dispone de telemetría y ajustes de privacidad; no confundamos «sin cuenta» con «sin comunicaciones de red».

Misión 1. Tener algo con lo que jugar

Paso 1. El adulto descarga el taller

Pulsad Descargar el taller en ZIP. En Descargas aparecerá robot-colores.zip. El adulto lo abre y extrae su contenido: en Windows, Extraer todo; en Mac, doble clic.

Dentro de la carpeta robot-colores hay tres archivos: el juego, LEEME.txt y LICENSE.txt. No trabajéis dentro del ZIP.

Paso 2. Abrid el juego

Haced doble clic en robot-colores.html. Si pregunta con qué abrirlo, elegid el navegador.

Debe aparecer Robot de colores, un tablero y cuatro botones con flechas. Si veis código escrito, el archivo se ha abierto en un editor: el adulto puede usar Abrir con → navegador.

Paso 3. Recoged una estrella

Pulsad cuatro veces la flecha hacia la derecha del juego. El robot llega a la estrella y el marcador cambia a Estrellas: 1 de 3.

La siguiente aparece abajo. Podéis buscarla o dejar la partida aquí. También funcionan las flechas del teclado después de hacer clic dentro del tablero.

Paso 4. Volved al principio

Pulsad Volver a empezar. El robot regresa a la esquina superior izquierda y el marcador vuelve a cero.

Ya sabemos cómo reconocer que funciona. Ahora podremos cambiar su aspecto y comparar.

Misión 2. Llevar tres colores al editor

Paso 5. Copiad la paleta

En el juego, pulsad Seleccionar paleta. Se marca todo el texto del recuadro. Copiadlo con Ctrl+C en Windows o ⌘C en Mac.

Este es el bloque inicial, por si necesitáis recuperarlo:

:root {
  --robot: #0f766e;
  --fondo: #10243a;
  --estrella: #ffd166;
}

Los nombres nos dicen qué cambia cada línea. El texto que empieza por # identifica un color. Aquí usamos seis caracteres después de la almohadilla: números del 0 al 9 o letras de la a a la f. No hace falta aprender esos números de memoria.

Paso 6. Abrid vscode.dev en otra pestaña

El adulto abre vscode.dev en español. Dejad la pestaña del juego abierta para volver después.

Aparece Visual Studio Code. En la columna izquierda puede decir No hay ninguna carpeta abierta. Está bien: hoy usaremos una hoja de texto temporal. No tenemos que darle acceso a Documentos ni abrir un repositorio.

Sesión de demostración vacía, sin cuenta. Los accesos a repositorios y túneles no forman parte del taller.

Paso 7. Cread una hoja vacía

Dentro del editor, pulsad F1. En algunos portátiles hay que pulsar Fn+F1. Se abre un buscador de acciones.

Escribid Nuevo archivo de texto sin título y elegid archivo: Nuevo archivo de texto sin título. Evitad la opción que empieza por Comparar.

Veréis una pestaña como Untitled-1. Es nuestra hoja de trabajo. Su nombre puede llevar otro número.

Si F1 controla el brillo o abre otra ayuda, usad Ctrl+Mayús+P en Windows o ⌘Mayús+P en Mac para abrir ese buscador.

Paso 8. Pegad el bloque

Haced clic en la zona donde se escribe y pegad con Ctrl+V o ⌘V.

Deben aparecer las tres líneas de colores, entre una llave que abre y otra que cierra. No copiéis los símbolos que delimitan un bloque de código en un chat: solo el contenido de arriba.

Paso 9. Decidle al editor que es CSS

Pulsad F1, buscad Cambiar modo de lenguaje y pulsad Intro. Después escribid CSS y elegid CSS, no SCSS.

CSS es el lenguaje que usamos para el aspecto de una página. El editor puede mostrar pequeños cuadrados junto a los colores. Si tardan en aparecer, podéis continuar leyendo los valores.

El texto pertenece al ejemplo. Para facilitar la lectura se ha aumentado el tamaño de letra del editor.

Si la letra os resulta pequeña, F1 → Aumentar el tamaño de fuente del editor. Podéis repetirlo. No cambia el juego.

Misión 3. Una sola cosa diferente

Paso 10. Buscad el color del robot

Con el cursor dentro del texto, pulsad Ctrl+F o ⌘F y escribid #0f766e. El editor encuentra ese valor en la línea de --robot.

Pulsad Esc para cerrar la búsqueda y volver al texto encontrado. Debe quedar seleccionado ese valor. Si no está seleccionado, marcadlo con el ratón antes de seguir.

Paso 11. Escribid el nuevo color

Sustituid únicamente #0f766e por #a78bfa. Conservad el punto y coma del final.

La línea tiene que quedar así:

  --robot: #a78bfa;

Si se abre una sugerencia al escribir, pulsad Esc. No necesitamos aceptarla. Si se os ha escapado otra letra, Ctrl+Z o ⌘Z deshace el último cambio.

Hemos cambiado un valor. El fondo y la estrella conservan los suyos.

Paso 12. Copiad la paleta completa

Haced clic dentro del código. Pulsad Ctrl+A o ⌘A para seleccionarlo todo y después Ctrl+C o ⌘C.

Necesitamos el bloque entero: desde :root hasta la última }. Aunque solo haya cambiado un color, el juego recibe los tres juntos.

Paso 13. Pegadla de vuelta en el juego

Volved a la pestaña de Robot de colores. Haced clic dentro de Paleta de tres colores, seleccionad todo su contenido y pegad el nuevo bloque.

De momento solo ha cambiado el texto. El robot todavía puede seguir verde. Nos queda pedirle al juego que aplique la paleta.

Paso 14. Aplicad los colores

Pulsad Aplicar colores. El robot debe ponerse violeta y aparecer Colores aplicados.

El juego está usando el bloque que acabamos de editar. La estrella sigue amarilla y el tablero conserva su fondo.

Si aparece No se ha cambiado nada, revisad el bloque. El ejemplo solo admite esos tres nombres, en ese orden, con colores de seis cifras. Es una limitación de este juego preparado; CSS permite muchas más formas de escribir colores.

Aquí ya hemos conseguido la primera meta. Podemos descansar, después de guardar la copia en la siguiente misión.

Misión 4. Probar y guardar para mañana

Paso 15. Comprobad que se puede jugar

Pulsad Volver a empezar y buscad las tres estrellas. Si queréis una ruta de prueba: cuatro pasos a la derecha, cuatro hacia abajo y cuatro a la izquierda.

El marcador llegará a 3 de 3 y aparecerá ¡Tres estrellas! Has llegado a la meta. Cambiar el color no debería cambiar los movimientos ni las reglas.

Mirad también si distinguís el robot y la estrella sin esfuerzo. Las formas y el borde ayudan, pero una paleta muy parecida al fondo puede dificultarlo. Cambiad una cosa y volved a probar.

Paso 16. Descargad vuestra versión

En el juego, pulsad Guardar mi juego. El navegador descarga mi-robot-colores.html. Si ya tenéis uno, puede añadir un número al nombre.

Este botón pertenece al juego preparado para el taller. No es el botón Guardar de vscode.dev. Guarda los colores que hayáis aplicado, pero no la posición del robot ni las estrellas de la partida.

Si aparece Hay texto sin aplicar, pulsad primero Aplicar colores. No cerréis la pestaña hasta comprobar el archivo.

Paso 17. Abrid la copia descargada

El adulto abre el nuevo mi-robot-colores.html desde Descargas. Veréis el robot violeta, pero el marcador vuelve a cero. Es lo esperado: hemos guardado el diseño, no una partida a medias.

Jugad otra vez para comprobar la copia. Esta captura se tomó después de abrir la descarga y completar sus tres estrellas:

Resultado real de la copia recuperada. No es una pantalla de victoria añadida a la imagen.

Paso 18. Guardadla en vuestra carpeta

El adulto mueve mi-robot-colores.html a una carpeta fácil de encontrar, por ejemplo MisJuegos → RobotColores. Conservad también el ZIP inicial para volver a empezar cuando queráis.

Mañana basta con abrir ese HTML. Podéis copiar su paleta a una nueva hoja de vscode.dev y continuar. Recargar el archivo inicial recupera los colores iniciales; no lo confundáis con vuestra versión descargada.

Qué hemos aprendido del editor web

Una variable CSS pone nombre a un valor. En este ejemplo, --robot permite identificar el color sin buscarlo por todo el juego. El bloque es CSS real; el juego valida sus tres valores antes de aplicarlos. Más sobre variables CSS en MDN.

vscode.dev sirve para escribir y revisar ese texto. El juego se ejecuta en su propia pestaña. Una hoja sin título no equivale a un archivo guardado en vuestra carpeta, aunque el navegador pueda conservar temporalmente el trabajo.

El editor web no ofrece toda la ejecución, terminal y depuración del editor de escritorio. El acceso directo a carpetas depende del navegador; no lo necesitamos aquí. Tampoco hemos probado ese guardado directo en este taller. Límites oficiales de VS Code para la web.

Si queréis pedir una pista a la IA

La IA es opcional. Para este recorrido bastan los botones, el bloque y los valores indicados.

Si el adulto ya utiliza un asistente cuyas condiciones permiten ese uso, puede pegar allí este mensaje. El menor puede dictar la idea sin manejar una cuenta que no le corresponda. No hace falta activar Copilot dentro del editor ni contratar nada.

Estamos cambiando una paleta para un juego familiar.
El fondo es #10243a y la estrella es #ffd166.
Propón tres colores claros para el robot, escritos como # y seis cifras.
Explícanos cómo probar si lo distinguimos del fondo.
No afirmes que la paleta es accesible sin comprobarla.
No cambies archivos, no instales nada y no publiques.
Queremos elegir un solo color y probarlo nosotros.

Si el bloque se ha estropeado:

Este juego solo admite :root con --robot, --fondo y --estrella,
en ese orden, colores de seis cifras y punto y coma.
Revisa este bloque y señala un único error cada vez:
[PEGA AQUÍ SOLO EL BLOQUE DE COLORES]
No cambies las reglas del juego ni pidas datos personales.

Mensajes preparados para copiar; no enviados ni probados con un proveedor de IA durante esta entrega. Sus edades, condiciones y cuotas se revisan por separado antes de usarlo. Si no tenéis un servicio adecuado, seguid con el ejemplo sin IA.

Si no te sale

Lo que ves	Qué probar
El editor pide una cuenta	Volved a vscode.dev/?locale=es y a un archivo de texto sin título. No entréis en Copilot, repositorios ni túneles. Si el acceso sin cuenta cambia, parad esa ruta.
Hay dos paneles vacíos	Se ha elegido «Comparar nuevos archivos». Usad F1 y elegid exactamente «Nuevo archivo de texto sin título».
El robot sigue verde	Comprobad que habéis pegado el bloque en el juego y pulsado Aplicar colores. Cambiarlo en el editor no cambia la otra pestaña.
Sale «No se ha cambiado nada»	Recuperad el bloque inicial. Conservad #, seis cifras, dos guiones, punto y coma y las dos llaves. Cambiad solo el valor del robot.
Desaparece el cambio al recargar	Abrid la versión descargada con Guardar mi juego. La pestaña inicial no guarda cambios por sí sola.
La flecha baja la página	Haced clic en el tablero para darle el control del teclado o usad los cuatro botones.
Guardar dice que hay texto sin aplicar	Aplicad primero una paleta válida y después volved a guardar.
La descarga tiene un número al final	El navegador evita pisar otra copia. El adulto identifica la más reciente, la abre y la comprueba.

Tres retos, para otro rato si hace falta

1. El más sencillo: cambiad solo el robot a coral con #fb923c. Repetid aplicar, jugar y guardar.
2. Otra atmósfera: probad #172554 como fondo, manteniendo el robot claro y la estrella amarilla. Comparad cuál os resulta más fácil de mirar.
3. Dos versiones: guardad una copia violeta y otra coral con nombres distintos. Abrid las dos y explicad qué valor cambió y qué reglas siguen iguales.

Lo bonito de este primer cambio es que podemos verlo y explicarlo: elegimos un color, lo escribimos, lo probamos y conservamos una copia. Ya tenemos una pequeña decisión de diseño que es nuestra.

Descargar el taller inicial · Abrir la versión violeta comprobada

El ZIP incluye el juego original, instrucciones y licencia MIT. Esa licencia corresponde al ejemplo; no cambia las condiciones del producto Visual Studio Code, de sus servicios ni de las imágenes editoriales.

Fuentes y comprobaciones

Consultadas el 8 de octubre de 2026: VS Code para la web, edición y búsqueda, soporte de CSS y colores, preguntas frecuentes y coste, condiciones de uso y telemetría.

Probado con vscode.dev 1.141.0 en español, Chrome 153.0.8010.53 y macOS 27.0.1, en perfiles aislados sin cuenta. Edición, copiar/pegar, deshacer/rehacer, aplicar color, victoria, reinicio, descarga y recuperación reales. El juego también se ha probado en un viewport de 390 × 844 con tacto emulado. No se ha probado el editor en Windows, en un teléfono físico ni con una familia real. Las pantallas y condiciones pueden cambiar.