Juego de Agujas (Pin Spin)

Pin Spin es un juego casual de navegador, de la misma familia que los éxitos móviles AA y Pin Out. En el centro de la pantalla un disco blanco gira a velocidad constante, y tú vas disparando agujas desde abajo, una a una. Cada aguja debe clavarse en el disco sin tocar a las que ya están clavadas. Cada nivel te da un número fijo de agujas: si las colocas todas avanzas, y un solo choque termina la partida al instante. Las reglas son tan simples que cualquiera lo entiende en segundos, pero la dificultad crece rápido y se convierte en una prueba seria de tiempo y autocontrol. La herramienta funciona enteramente en el navegador, sin registro ni descargas: en escritorio se hace clic con el ratón, en móvil basta con tocar la pantalla.

El bucle principal está dirigido por requestAnimationFrame. En cada cuadro se incrementa una rotación interna por un valor fijo de speed (grados por cuadro) y, a continuación, se recorren todas las agujas clavadas para asignarles transform: rotate(baseAngle + rotation). Como transform es una propiedad de capa de composición, el navegador delega la rotación al hilo de composición de la GPU sin disparar layout ni paint, por eso el último nivel con sus 15 agujas girando se mantiene a 60 fps. La detección de colisiones se basa en convertir diferencia de ángulo en longitud de cuerda. Cada aguja clavada se representa por su baseAngle en el sistema de coordenadas del disco (un desplazamiento fijo respecto al disco, que no cambia con la rotación). Cuando una aguja recién disparada llega al centro, su ángulo en coordenadas del mundo es TARGET_ANGLE = 0, que se mapea a coordenadas del disco como normalizeAngle(0 - rotation). Después se compara el nuevo baseAngle con todos los existentes: la diferencia angular Δθ se convierte en la longitud de cuerda 2R·sin(Δθ/2) entre los centros de los puntos de la punta de las agujas (R = 111px desde el centro de cada punto-punta hasta el centro del disco). Si cae por debajo del umbral de 24px, hay choque y la ronda termina. El disparo se controla con una pequeña máquina de estados. shootLocked marca una aguja en vuelo y evita que tanto el evento transitionend como el setTimeout de respaldo de 180 ms cierren el mismo disparo dos veces. La transición CSS dura 120ms; el setTimeout de 180ms es una red de seguridad para el caso poco frecuente en que transitionend no llegue a dispararse (por ejemplo, cuando el DOM se modifica antes de que termine la transición). pendingShots almacena los clics emitidos mientras hay una aguja en el aire, con un máximo de 3 — los clics que superan ese tope se descartan (no se encolan), lo que mantiene la sensación de fuego rápido y a la vez evita que varias agujas converjan en el centro a la vez. Tanto el fallo como la victoria ponen gameOver en true: el bucle principal sigue corriendo pero deja de actualizar rotation, congelando la escena. Para escalar visualmente, el juego mantiene un tamaño de diseño fijo de 420×720, y el contenedor exterior calcula un factor de escala a partir del viewport y lo aplica con transform: scale. La implementación actual limita la escala a 1, así que los viewports pequeños se reducen proporcionalmente mientras que los viewports de escritorio mantienen el tamaño original — no se agrandan. Esto significa que la detección de colisiones siempre trabaja en el sistema de coordenadas de diseño, con un único conjunto de umbrales en píxeles, y el juicio es idéntico en cualquier pantalla.

• Bucle principal: requestAnimationFrame, rotation += speed cada cuadro, todas las agujas reciben transform: rotate(baseAngle + rotation).
• Aceleración por GPU: la rotación usa transform en lugar de left/top, así el compositor del navegador la gestiona sin layout ni repintado.
• Detección de impacto: el 0° en coordenadas del mundo se proyecta al disco como normalizeAngle(0 - rotation); la longitud de cuerda 2R·sin(Δθ/2) se compara con un umbral de 24px.
• Máquina de estados: shootLocked impide doble cierre, pendingShots se limita a 3 con descarte del exceso (no se encola), gameOver congela las actualizaciones de rotación.
• Cierre del disparo: vuelo CSS de 120ms, transitionend como cierre principal + 180ms de setTimeout como red de seguridad para el caso poco frecuente en que transitionend no se dispare.
• Escalado: sistema de diseño fijo de 420×720; el contenedor aplica transform: scale según el tamaño del viewport, limitado a 1 para que el escritorio mantenga el tamaño original en lugar de agrandarse.
• Almacenamiento: solo se guarda en localStorage el mejor nivel superado. No se sube nada, no hay cuentas ni clasificaciones.