Claude Code Club · Cuaderno de estudio
Etapa 6 — Build a Game

🎯 Guía completa — Click The Target de una sentada

Lo que te llevarás: un Click The Target completo, desplegado y compartible, construido en ~25 minutos — cada prompt, cada archivo, cada paso, en orden.

Infografía: guía completa del juego Click The Target
El juego #1 del menú como guía completa: el bucle entero (spec → prompt → preview → iterar → publicar) sin nada más de por medio.

Se hace el #1 del menú como guía completa porque es el «juego real» más pequeño posible, y te deja vivir el bucle entero sin estorbos. Si terminas esto, has demostrado en concreto que sabes publicar un juego. Luego eliges cualquier otro del menú y ejecutas el mismo playbook.

📖 Son 5 pasos, cada uno con su prompt exacto para copiar-pegar en la lección de Skool. Sin saltarse ninguno — y leyendo cada prompt antes de pegarlo, para saber qué va a pasar: esa es la habilidad que se entrena. Aquí tienes el mapa en español.

  1. Abre una carpeta nueva y especifica el juego. Carpeta vacía en un sitio que recuerdes (p. ej. ~/games/target/), apunta Claude Code ahí y pégale el spec del juego (PROMPT 1 en la lección; la anatomía del spec se estudia en la lección siguiente).
  2. Itera (el bucle jugar → describir → arreglar). La primera versión siempre tiene algo raro. Describes lo que viste en lenguaje llano — no «arregla la lógica de colisión» (habla de mecanógrafo), sino habla de director:
    • «La diana sigue saliendo demasiado pegada a los bordes — mantenla a 40px de las paredes.»
    • «En el móvil el título queda tapado por el marcador — baja el área de juego 60px en pantallas pequeñas.»
    • «Al tocar la diana se siente con lag en el móvil — respuesta al toque instantánea, sin retardo de animación.»
    3-5 rondas. No avances hasta que dé gusto jugarlo 30 segundos seguidos. La sensación es el listón. Luego una pasada de pulido (PROMPT 2): sonido «pop» al acertar con Web Audio API (sin archivos externos), récord guardado en localStorage con «Best: X» en título y game-over, y el temporizador pulsando en rojo en los últimos 5 segundos. Todo en un solo index.html. — Ahora es un juego, no un prototipo.
  3. Hazlo tuyo. Un Target Practice genérico se olvida; el tuyo con un giro es contenido. Elige UN giro — solo uno — y añádelo (PROMPT 3 en la lección).
  4. Revisión de estructura + prueba en navegador. En tu carpeta debe haber exactamente un archivo: index.html. Sin node_modules, sin package.json, sin build tools. Si hay más archivos, pide que lo consolide.
  5. Publícalo en Vercel y consigue el enlace en vivo (PROMPT 4): despliega, que te guíe clic a clic en cualquier login o instalación del CLI, y que confirme cargando la URL y diciéndote cuál compartir. Saldrá algo como target-practice-xyz.vercel.app.

📱 Abre esa URL en tu móvil ahora mismo. No sigas hasta haber jugado tu propio juego en el móvil desde el enlace en vivo. Y luego mándaselo a una persona real — un WhatsApp, un DM, una respuesta a una historia. El envío es la repetición. Un juego en vivo en un chat con un humano vale más que 50 lecciones vistas.

Fuente: Claude Code Club · Aula · Etapa 6 «Build a Game» — lección «Full Walkthrough — Click The Target».
Nota: resumen de los 5 pasos; los 4 prompts exactos de copiar-pegar están en la lección original. · Añadido: 7 de julio de 2026.