Jogo de Alfinete (Pin Spin)

Pin Spin é um jogo casual de navegador da mesma família dos sucessos mobile AA e Pin Out. Ao centro da tela, um disco branco gira em velocidade constante e você dispara agulhas uma a uma a partir de baixo. Cada agulha precisa fincar no disco sem encostar em nenhuma das que já estão fincadas. Cada fase dá uma quantidade fixa de agulhas: encaixe todas para avançar, e qualquer colisão encerra a rodada na hora. As regras são simples o bastante para qualquer um pegar em segundos, mas a curva de dificuldade rapidamente vira um teste sério de timing e autocontrole. A ferramenta roda inteira no navegador, sem cadastro nem download — clique com o mouse no desktop, toque a tela no celular.

O loop principal é dirigido por requestAnimationFrame. A cada quadro, um valor interno rotation é incrementado por um speed fixo (graus por quadro) e, em seguida, todas as agulhas fincadas são percorridas para receber transform: rotate(baseAngle + rotation). Como transform é uma propriedade de camada de composição, o navegador entrega a rotação à thread de composição da GPU sem disparar layout nem paint, então a fase final, com todas as 15 agulhas girando, ainda mantém 60 fps com folga.

A detecção de colisão usa a abordagem «diferença de ângulo convertida em comprimento de corda». Cada agulha fincada é representada por seu baseAngle no sistema de coordenadas do disco (um deslocamento fixo em relação ao disco, que não muda com a rotação). Quando uma agulha disparada chega ao centro, seu ângulo em coordenadas do mundo é TARGET_ANGLE = 0, o que mapeia em coordenadas do disco como normalizeAngle(0 - rotation). O novo baseAngle é então comparado a todos os baseAngle já existentes: a diferença angular Δθ é convertida no comprimento de corda 2R·sin(Δθ/2) entre os centros dos pontos da ponta das agulhas (R = 111px do centro de cada ponto-ponta até o centro do disco). Se ficar abaixo do limiar de 24px, o disparo é considerado colisão e a rodada termina.

O disparo é regulado por uma pequena máquina de estados. shootLocked marca uma agulha como «em voo» e impede que tanto o evento transitionend quanto o setTimeout de reserva de 180 ms encerrem o mesmo disparo duas vezes. A transição CSS dura 120ms; o setTimeout de 180ms serve como rede de segurança para o caso raro em que transitionend não dispara (por exemplo, quando o DOM é alterado antes que a transição se complete). pendingShots enfileira os cliques recebidos enquanto uma agulha ainda está no ar, com limite de 3 — cliques além desse teto são descartados (não enfileirados), preservando a sensação de tiro rápido sem deixar várias agulhas convergirem ao centro ao mesmo tempo. Tanto a falha quanto a vitória definem gameOver como true: o loop principal continua rodando, mas para de atualizar rotation, congelando a cena.

Para escalar a exibição, o jogo mantém um tamanho de design fixo de 420×720, e o invólucro externo calcula um fator de escala a partir do viewport e o aplica via transform: scale. A implementação atual limita a escala a 1, então viewports pequenos são reduzidos proporcionalmente enquanto viewports de desktop mantêm o tamanho original — não aumentam. Assim a detecção de colisão sempre opera no sistema de coordenadas de design com um único conjunto de limiares em pixels, e o veredito é idêntico em qualquer tela.

• Loop principal: requestAnimationFrame, a cada quadro rotation += speed, todas as agulhas recebem transform: rotate(baseAngle + rotation).
• Aceleração por GPU: a rotação usa transform em vez de left/top, então o compositor do navegador cuida disso — sem layout nem repintura.
• Detecção de impacto: o 0° em coordenadas do mundo é projetado de volta para coordenadas do disco como normalizeAngle(0 - rotation); o comprimento de corda 2R·sin(Δθ/2) é comparado a um limiar de 24px.
• Máquina de estados: shootLocked impede dupla finalização, pendingShots é limitado a 3 com excedente descartado (não enfileirado), gameOver congela as atualizações de rotação.
• Finalização do disparo: voo CSS de 120ms, transitionend como caminho principal + setTimeout de 180ms como rede de segurança para o caso raro em que transitionend não dispara.
• Escalonamento: sistema de design fixo 420×720; o invólucro aplica transform: scale conforme o tamanho do viewport, limitado a 1 para que desktops mantenham o tamanho original em vez de ampliar.
• Armazenamento: somente a melhor fase concluída é salva em localStorage. Nada é enviado ao servidor; sem contas, sem placar.