Abre una copia de un juego en Visual Studio Code, cambia su nombre y su fondo, guarda y comprueba el resultado. Un taller acompañado para empezar desde cero.
Parte de Crear en familia · Tutorial 05
Un juego parece una sola cosa cuando lo abrimos en el navegador. Por dentro puede tener varias piezas: lo que se lee, el aspecto y las reglas que hacen que se mueva.
Hoy vamos a abrir esas piezas sin tener que entenderlas todas. Cambiaremos el nombre de una aventura espacial y el color que la rodea. Después guardaremos, volveremos a jugar y comprobaremos cómo recuperar el original.
No hace falta haber terminado las entregas anteriores. El descargable trae el juego preparado.
Portada ilustrada original. Las pantallas del recorrido que viene a continuación sí son capturas reales.
El resultado probado: cambia el título y el fondo; la nave sigue esquivando meteoritos como antes.
Descargar el taller completo · Probar el punto de partida · Ver el resultado de ejemplo
La primera meta cabe en una frase: cambiar un texto, guardarlo y verlo en el navegador. El color y la recuperación pueden quedar para un segundo rato.
Actividad para 10–14 años, con un adulto disponible. Necesitamos un ordenador, navegador y Visual Studio Code de escritorio. Reservad unos 25–35 minutos orientativos, sin obligación de terminar de una vez.
El adulto descarga y descomprime el taller, revisa su procedencia y prepara el editor. El niño o la niña elige el nombre, cambia una pieza y prueba. No usamos terminal, cuentas de jugadores, extensiones, Copilot ni sincronización.
A fecha de comprobación, Microsoft ofrece VS Code sin coste para uso personal o comercial. Eso no incluye los servicios de IA ni convierte sus planes en gratuitos para siempre. Aquí no hay cuota de IA ni tarjeta porque editamos archivos locales. El producto distribuido tiene su licencia de Microsoft; el código fuente de VS Code tiene licencia MIT. Son cosas distintas. FAQ y coste de VS Code, licencia del producto.
Si no está instalado, el adulto utiliza la descarga oficial y comprueba la compatibilidad del equipo. No necesitamos Visual Studio, que es otro programa. La instalación y la aceptación de condiciones corresponden al adulto. La ruta del taller no requiere crear una cuenta de menor ni acceder a un servicio online.
En Settings / Configuración, el adulto puede buscar telemetry.telemetryLevel y elegir off. Para ocultar las funciones de IA puede buscar chat.disableAIFeatures y activarlo. Esto no equivale a afirmar que todo el editor deja de conectarse: actualizaciones y otras funciones tienen sus propios ajustes. Telemetría de VS Code, FAQ sobre funciones de IA.
Las capturas usan VS Code 1.139.1 en macOS, interfaz inglesa, sin extensiones de terceros. Indicamos los nombres ingleses y su equivalente en español. En Windows cambia la tecla ⌘ por Ctrl cuando lo indiquemos; no hemos realizado una sesión de prueba en Windows.
El adulto descarga archivos-del-juego.zip. En Windows: botón derecho → Extraer todo. En Mac: doble clic. Abre la carpeta extraída, no trabajes dentro del ZIP.
Dentro encontrarás MiJuego, Resultado y unas instrucciones. MiJuego es el punto de partida. Resultado contiene la versión terminada para comparar más adelante.
En Finder o Explorador, copia la carpeta MiJuego y pega una segunda carpeta. Llámala MiJuego-copia. Vamos a trabajar en MiJuego; la copia se queda quieta.
Una carpeta es un recipiente. No hace falta abrir todos sus archivos para guardarla entera.
Dentro de MiJuego, abre index.html con el navegador. Si se abre en un editor, botón derecho → Abrir con y elige el navegador.
Pulsa Jugar y prueba las flechas. Así sabes cómo funciona el original antes de cambiarlo.
Todavía no hemos cambiado el nombre ni el color.
En el editor, elige File → New Window / Archivo → Nueva ventana. Así no mezclas el juego con otro trabajo que tenga abierto el adulto.
No hace falta iniciar sesión. Si aparece una invitación a configurar IA, puede esperar.
Elige File → Open Folder… / Archivo → Abrir carpeta…. Selecciona MiJuego, la carpeta que contiene los tres archivos, y confirma.
Si aparece una pregunta de confianza, el adulto revisa qué carpeta se ha elegido y de dónde viene. Para leer y editar estos archivos sencillos puede mantenerse el modo restringido; no hay tareas ni extensiones que ejecutar.
En la izquierda aparece Explorer / Explorador. Si no lo ves, pulsa el icono de hojas de esa barra.
| Archivo | Para qué lo usaremos hoy |
|---|---|
index.html | Cambiar el título visible. |
estilo.css | Cambiar el color del fondo. |
juego.js | Contiene las reglas; hoy lo dejamos como está. |
No son tres juegos. Son tres piezas del mismo juego. Deben seguir juntas y conservar sus nombres.
Haz doble clic en index.html, en la lista de la izquierda. Verás texto y símbolos de colores. No tienes que leerlo todo.
El navegador muestra el juego; VS Code muestra el archivo que lo construye. Son dos vistas distintas de nuestro trabajo.
Pulsa ⌘F en Mac / Ctrl+F en Windows. En Find / Buscar, escribe exactamente:
¡Esquiva los meteoritos!Debe aparecer una coincidencia dentro de una línea que empieza por <h1>.
La búsqueda nos lleva al texto visible. No hay que buscarlo recorriendo todo el archivo.
Pulsa la X del cuadro Buscar, no la X de la pestaña del archivo. La frase queda seleccionada en el editor.
Antes de escribir, mira que solo esté seleccionado ¡Esquiva los meteoritos!. Los símbolos <h1> y </h1> deben quedar fuera. Si no está seleccionado, arrastra sobre esas palabras con ayuda del adulto.
Sustituye la frase por este ejemplo, o inventa otro nombre sin datos personales:
¡Misión Luna!La línea debe quedar así:
<h1>¡Misión Luna!</h1>Si aparece una sugerencia flotante, ciérrala con Esc. No necesitamos aceptar sugerencias.
Elige File → Save / Archivo → Guardar, o ⌘S / Ctrl+S. El punto que señala cambios pendientes en la pestaña debe desaparecer.
Guardar escribe el cambio en el archivo. Todavía falta decirle al navegador que lo vuelva a leer.
Vuelve a la pestaña del navegador donde abriste MiJuego/index.html y pulsa su flecha circular de recargar.
Debe aparecer ¡Misión Luna!. Si ves el título antiguo, vuelve al paso anterior y comprueba que guardaste y que abriste MiJuego, no MiJuego-copia.
Ya tienes el primer resultado. Puedes parar aquí y conservar la carpeta.
Vuelve a VS Code y haz doble clic en estilo.css. Arriba hay un comentario que dice MI TALLER y, justo debajo, el color del fondo.
Los comentarios son notas para las personas que editan. No aparecen como texto en el juego.
Abre Buscar y escribe #faf6ec. Cierra el cuadro con su X, igual que antes. Selecciona únicamente ese código de color.
Un color puede escribirse con una almohadilla y seis letras o cifras. Hoy basta con copiar uno que ya hemos preparado.
Sustituye #faf6ec por:
#e5f6f2La línea queda así:
:root { --fondo-del-taller: #e5f6f2; }Conserva los dos puntos, el punto y coma y las llaves. Guarda.
El pequeño cuadrado de color lo dibuja el propio editor; no es otro archivo.
Recarga. El fondo exterior cambia de crema a verde claro; las zonas blancas y el tablero azul siguen igual. No hemos pedido cambiar todos los colores.
Pulsa Jugar. Comprueba izquierda, derecha y Pausa. El nombre y el aspecto han cambiado; las reglas siguen funcionando.
Vuelve a estilo.css y elige Edit → Undo / Editar → Deshacer, o ⌘Z / Ctrl+Z. Si acabas de cambiar el color, vuelve el valor anterior.
Guarda y recarga el navegador: debe volver el crema. Deshacer actúa sobre el archivo que estás editando, no sobre todas las carpetas.
Elige Edit → Redo / Editar → Rehacer, guarda y recarga. En la prueba recuperamos el verde claro con esta opción.
Si has cerrado el editor o realizado muchos cambios, no dependas de recordar todo el historial. Para eso conservamos una copia.
Abre MiJuego-copia/index.html en el navegador. Debe conservar ¡Esquiva los meteoritos! y el fondo crema.
Si quieres empezar de nuevo, duplica esa carpeta con otro nombre. No borres tu versión personalizada para recuperar el inicio.
Cierra la partida. Conserva MiJuego con sus tres archivos y la copia original por separado. Si vas a mover el juego a otra carpeta o equipo, mueve la carpeta entera.
El nombre y el color quedan en los archivos guardados. Los píxeles que dibujes dentro del juego son otra cosa: para conservar esa nave utiliza Guardar mi nave, como en T03.
estilo.css siga junto a index.html, con ese mismo nombre.juego.js esté en la misma carpeta. No necesitas instalar nada para esta versión.index.html.txt ni estilo.css.txt.No se ha utilizado una cuenta de IA para realizar los pasos del editor. Este mensaje está preparado para copiar, no se presenta como un prompt enviado y validado en un proveedor. Pégalo solo en un asistente que el adulto ya esté autorizado a usar, con sus condiciones y costes revisados. Para el niño, la actividad sigue siendo local.
Estoy acompañando un taller familiar con una copia de un juego local.
Hay tres archivos: index.html, estilo.css y juego.js.
Quiero cambiar únicamente el título visible a «¡Misión Luna!» y el
color --fondo-del-taller a #e5f6f2. Explícame qué fragmentos buscar.
No instales nada, no uses servicios externos, no abras cuentas ni
publiques. No modifiques las reglas ni otros archivos. Si falta un
archivo, indícamelo. Antes de editar, conserva una copia y muestra
qué cambiarías. Después comprueba guardar, recargar y jugar.Pon un nombre distinto a tu aventura. Prueba un fondo #fff0df, que es un crema anaranjado. O dibuja en papel qué añadirías otro día sin modificarlo todavía.
En T06, Meteoritos de bolsillo, llevamos la prueba a una pantalla estrecha, con botones para los dedos y un giro que no interrumpe la partida sin avisar.
Recorrido de edición probado el 28 de septiembre de 2026 con VS Code 1.139.1, perfil aislado, macOS y Chrome 153.0.8010.53. Se cambiaron y guardaron los archivos en el editor real, se deshizo y rehízo el color y se abrió el resultado en el navegador. También se comprobaron pausa, reinicio, victoria y recuperación desde una copia. No se probaron Windows ni una familia real.
Documentación oficial consultada ese día: interfaz y Explorador, edición, búsqueda y guardado, FAQ de costes y funciones, licencia y telemetría.
Código y dibujo de ejemplo originales bajo licencia MIT. La portada es una ilustración; las otras seis imágenes son capturas de las pruebas. No se incluyen fotografías, nombres ni datos de menores.
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.