# Walkthrough: Click The Target en una sentada

> Claude Code · Crear un juego
> Fuente: https://magoallegri.com/cursos/claude-code/crear-un-juego/walkthrough-click-the-target

---

El juego "real" más chico que podés hacer, de punta a punta, en unos 25 minutos. Si seguís estos pasos con cualquier juego, te sale.

![Mockup de Tiro al blanco: puntaje, timer y un blanco neón sobre fondo oscuro](../_assets/M06-L02-pantalla-del-juego.webp)

---

## Paso 1 — Escribí el spec

Antes de pegar nada, escribí en español qué querés. Esto te lo explicás a vos mismo:

> *"Aparece un círculo rojo en un lugar al azar. Lo clickeo, desaparece y aparece otro, +1 al puntaje. Timer de 30 segundos. Al terminar, muestra el puntaje final y un botón de Reiniciar."*

![Tres prompts de punta a punta: el build, el pulido y publicar](../_assets/M06-L02-3-prompts.webp)

## PROMPT 1 — El build

Abrí Claude Code en una carpeta vacía y pegá:

```
Construí un juego de navegador de una sola página llamado "Tiro al blanco", en un
solo archivo index.html autocontenido (HTML, CSS y JavaScript adentro, sin
herramientas de build). Un círculo rojo aparece en una posición al azar; al
clickearlo/tocarlo suma +1 y reaparece en otro lugar. El blanco se achica 5% cada 5
puntos. Timer de 30 segundos que arranca con el primer clic. Pantalla de Game Over
con puntaje final y botón Reiniciar. Puntaje grande arriba a la izquierda, timer
arriba a la derecha, título arriba al centro, fondo oscuro, blanco tipo neón.
Celular y compu. Levantá la preview en vivo.
```

## Paso 2 — Iterá (jugá → describí → arreglá)

Jugalo ya. Decí qué está mal en español, no en "código":

- *"El blanco aparece muy pegado al borde, dejalo a 40px de las paredes."*
- *"En el celular el título tapa el puntaje, bajá el área de juego 60px."*
- *"Tocar se siente lento, que el toque sea instantáneo."*

3 a 5 vueltas y queda.

## PROMPT 2 — El pulido

```
Pulido. Tres cosas: (1) un sonido sutil de "pop" al acertar (con Web Audio, sin
archivos externos). (2) Guardá el mejor puntaje en el navegador y mostrá "Mejor: X"
en el título y en el game over. (3) Cuando queden los últimos 5 segundos, que el
timer pulse en rojo. Todo en un solo index.html. Preview en vivo.
```

## Paso 3 — Revisá los archivos

Abrí la carpeta. Tiene que haber **un solo archivo: index.html**. Si hay más, pedí:

```
Consolidá todo en un solo index.html autocontenido, con el CSS y el JS adentro.
Borrá los demás archivos.
```

Hacé doble clic en el index.html: tiene que abrir en el navegador y jugarse. Si se juega desde el doble clic, se juega en cualquier lado.

## PROMPT 3 — Publicar

```
Publicá este juego en Vercel y pasame la URL pública. Guiame en cualquier login o
instalación de a un clic, en lenguaje simple. Cuando esté en vivo, cargá la URL para
confirmar y decime cuál es el link para compartir.
```

Abrilo en tu celular. No sigas hasta jugar tu propio juego desde el link en vivo. Después, mandáselo a una persona. El envío es la repetición que cuenta.

---

## 🟢 Mini-tarea

Hacé el walkthrough completo de Tiro al blanco (o tu clásico) hasta tenerlo publicado y jugado en tu celular.