Mini-masterclass de Claude Code: arma un juego en el navegador en 10 minutos

La mayoría conoce la IA para programar a través de un chat: preguntas, te responde con un muro de código y de repente tú te conviertes en el mensajero: copiando pedazos a los archivos, arreglando los imports que se le olvidaron, corriendo todo, pegando el error de vuelta. Claude Code se deshace del mensajero. Es un agente que corre en tu terminal y trabaja directo sobre una carpeta de archivos: lee lo que hay, escribe archivos nuevos, corre comandos, ve la salida y se corrige solo, todo mientras te muestra cada cambio antes de aplicarlo. Al terminar esta masterclass vas a entender el modelo mental lo suficiente como para confiar en él, y vas a tener un juego real y jugable que armaste escribiendo un párrafo en español.

Lo que vamos a construir es divertido y autocontenido a propósito: un jueguito de navegador. Una nave abajo que mueves con las flechas, una barra espaciadora que dispara, asteroides cayendo desde arriba, un puntaje que sube mientras los destruyes, y un "Game Over" cuando uno te golpea. Sin frameworks, sin build, sin instalar nada. Un solo archivo HTML que abres con doble clic. Diez minutos, de cero a jugable.

01 · Qué es Claude Code en realidad

Claude Code es el mismo modelo Claude que quizás ya conoces del chat, pero conectado a una terminal y con manos para trabajar. La diferencia es el ciclo. En un chat el modelo habla; en Claude Code actúa, y, lo clave, ve el resultado de cada acción y decide qué hacer después. Ese ciclo de actuar-observar-decidir es lo que lo convierte en un agente y no en un simple autocompletado.

Vale la pena grabarte tres cosas antes de correrlo:

• Está limitado a una sola carpeta. Cuando lanzas Claude Code desde un directorio, ese directorio es su mundo de trabajo. Ahí lee y escribe archivos, y ahí corre comandos. No anda metiéndose por todo tu disco. Esta es la propiedad de seguridad más importante: tú controlas hasta dónde puede llegar con solo elegir desde dónde lo arrancas.
• Pregunta antes de actuar. Por defecto, Claude Code te muestra un diff antes de editar un archivo y te pide permiso antes de correr un comando. Apruebas, rechazas o le dices que de ahora en adelante permita cierto tipo de acción. Ningún cambio te agarra por sorpresa.
• Tiene las mismas capacidades en CLI y en Desktop. "CLI" significa que escribes claude en una terminal. "Desktop" significa que la app te da el mismo agente dentro de una ventana, con un selector de carpetas. El modelo y el comportamiento son idénticos; escoge el que te intimide menos. Esta guía usa la terminal porque es universal y los comandos se copian y pegan, pero todo se traslada uno a uno a Desktop.

02 · Abre una terminal y elige un lugar para el proyecto

Una terminal no es más que una ventana de texto donde escribes comandos en vez de hacer clic. En macOS, presiona Command+Espacio, escribe "Terminal" y dale Enter. En Windows, abre "Windows Terminal" o "PowerShell" desde el menú de inicio. En Linux ya sabes dónde tienes la tuya.

Ahora crea una carpeta limpia para que el agente tenga un espacio ordenado donde trabajar. Escribe estas dos líneas, dándole Enter después de cada una:

mkdir asteroid-game
cd asteroid-game

La primera línea crea una carpeta llamada asteroid-game. La segunda te mete dentro de ella. De aquí en adelante, la terminal queda "parada dentro" de esa carpeta, y Claude Code también. Puedes confirmar dónde estás con pwd (print working directory), que te devuelve la ruta completa. Una carpeta vacía es justo lo que te conviene: nada que el agente pueda malinterpretar, nada que sobrescribir por accidente.

03 · Corre «claude» y conoce al agente

Con tu terminal parada dentro de asteroid-game, lanza el agente:

claude

La primera vez, te guía por un inicio de sesión rápido y la elección de un tema, y luego te deja en un prompt, un cursor parpadeando que espera español sencillo. (Si tu terminal dice "command not found", es que Claude Code todavía no está instalado; instálalo una sola vez desde claude.com/claude-code y corre claude otra vez. En Desktop, en cambio, abrirías la app y la apuntarías a la carpeta asteroid-game, mismo destino.)

Lo que tienes enfrente ahora es una conversación, pero una que trabaja. Cualquier cosa que escribas se vuelve una instrucción que el agente va a planificar y ejecutar dentro de esta carpeta. Tira primero una línea cualquiera, para que el ciclo deje de sentirse abstracto:

Lista los archivos en esta carpeta y dime si está vacía.

Va a correr un listado del directorio, ver que no hay nada y avisarte que la carpeta está vacía, prueba de que de verdad está mirando tu carpeta, no adivinando. Ese mini intercambio es el modelo completo: preguntas en español, actúa en el mundo real y te responde de vuelta.

04 · Opcional: agrega una skill para un resultado más afinado

Las skills son paquetes reutilizables de conocimiento que le puedes pasar al agente antes del prompt. Piénsalas como contratar a un especialista solo para esa sesión. Una skill de UI/UX, por ejemplo, trae criterio sobre layout, color e interacción para que el resultado se vea pensado y no gris por defecto. Son de verdad opcionales: el juego funciona sin ninguna. Pero este es el mejor momento para mostrarte cómo le sumarías ese conocimiento, así sabes que la opción existe.

Si tienes una skill disponible, la invocas por su nombre con un slash, ahí mismo en el prompt:

/ui-ux-pro-max haz que el juego se vea pulido: neón sobre fondo oscuro, HUD nítido, puntaje legible

El agente carga la guía de esa skill y la integra en la forma en que arma la UI. Si no tienes ninguna skill instalada, sáltate esto por completo. Siempre puedes volver a generar el juego después y pedirle en español que lo "ponga más bonito", y con eso llegas a casi todo lo que quieres.

05 · Pega el prompt y arma el juego

Aquí tienes la masterclass entera en un solo párrafo. En el prompt de Claude Code, pega esto tal cual y dale Enter:

Arma un juego pequeño de navegador en un único archivo autocontenido llamado index.html. Sin frameworks, sin paso de build, sin archivos externos, solo HTML, CSS y JavaScript planos usando un elemento canvas. El juego: una nave abajo al centro que se mueve a izquierda y derecha con las flechas y se queda dentro de la pantalla; la barra espaciadora dispara una bala recta hacia arriba; los asteroides aparecen en posiciones x al azar a lo largo del borde superior y caen a velocidad constante; cuando una bala golpea un asteroide, el asteroide desaparece y el puntaje sube 10; muestra el puntaje en la esquina superior izquierda; si algún asteroide llega al fondo o toca la nave, muestra un overlay centrado de "Game Over" con el puntaje final y el mensaje "Presiona R para reiniciar", y al presionar R reinicia limpio. Usa un fondo oscuro de espacio con formas simples y sin archivos de imagen. Agrega un banner de instrucciones de una línea arriba. Mantén el código legible y comentado. Después de crear el archivo, dime exactamente cómo abrirlo y jugarlo.

Ahora mira el ciclo en acción. Claude Code va a plantear un plan corto y luego pedirte permiso para crear index.html, y apruébalo. Escribe el juego completo en un solo archivo: el setup del canvas, un game loop manejado por requestAnimationFrame, los handlers de teclado para las flechas y la barra espaciadora, la detección de colisiones entre balas y asteroides, el contador de puntaje y el overlay de game over con reinicio. Como es un solo archivo autocontenido, no hay nada que instalar ni nada que conectar entre sí. Cuando termina, te dice cómo jugar.

Para correrlo, abre el archivo en tu navegador. Desde la misma terminal:

open index.html

En Windows usa start index.html; en Linux xdg-open index.html. De cualquier forma se abre tu navegador por defecto con el juego. Usa las flechas izquierda y derecha para volar, la barra espaciadora para disparar e intenta sobrevivir. Cuando un asteroide te dé, presiona R para empezar de nuevo.

Si algo se siente raro (asteroides muy rápidos, la nave muy resbalosa, balas muy flojas) no abras el archivo en un editor. Solo dile al agente, en la misma conversación, en español:

Los asteroides caen muy rápido y la nave se mueve muy lento. Baja la velocidad de los asteroides como en un tercio, duplica la velocidad de la nave y haz que los asteroides aparezcan un poco menos seguido. Después recuérdame que refresque el navegador.

Edita index.html en el sitio, te muestra el diff, y refrescas la pestaña para sentir el cambio. Ese ciclo de refinar conversando (juega, describe el arreglo, refresca) es el mismo movimiento que vas a usar en software serio más adelante, solo que con menos en juego y con una nave de por medio.

06 · Por qué esto escala al trabajo de verdad

Un jueguito y un servicio en producción parecen estar a mundos de distancia, pero la forma de operar es idéntica, y esa es la verdadera lección aquí. Trabajaste en una carpeta acotada, describiste un resultado, revisaste cada cambio antes de aplicarlo, corriste el resultado y refinaste conversando. Cambia "juego de navegador" por "agrégale un endpoint a esta API de Next.js" o "escribe tests para este módulo", y el ciclo no cambia. Solo cambian lo que está en juego y el tamaño de los diffs.

Así es, exactamente, como se construyen las herramientas serias. El mismo agente que escribió tu juego de asteroides es el que ayuda a mantener cosas como Infuse, un gestor de secretos donde cada cambio se revisa porque el radio de impacto es real, o Agent Orchestra, donde varios agentes se coordinan y de verdad quieres aprobar las acciones antes de que corran. La disciplina que acabas de practicar (acota la carpeta, lee el diff, refina en español) no son rueditas de aprendizaje que te quitas después. Es el método. El juego fue nada más el lugar más amable posible para aprenderlo.

Abre una terminal, crea una carpeta, corre claude, pega el prompt y juega el resultado. Dentro de diez minutos vas a haber entregado algo real y, más importante todavía, vas a tener el modelo mental que hace más rápida cada sesión futura: describe resultados, revisa cambios, refina hablando. La nave es la parte divertida. El ciclo es la habilidad.