Pin-Spin-Spiel

Pin Spin ist ein lockeres Browserspiel aus der gleichen Familie wie die Mobil-Hits AA und Pin Out. In der Bildschirmmitte rotiert eine weiße Scheibe mit konstanter Geschwindigkeit. Du schießt von unten Nadel für Nadel ab, und jede Nadel muss in der Scheibe stecken bleiben, ohne eine bereits steckende Nadel zu treffen. Jedes Level gibt dir eine feste Anzahl Nadeln; setze sie alle, um ins nächste Level zu kommen. Eine einzige Kollision beendet die Runde sofort. Die Regeln sind in Sekunden erklärt, aber die Schwierigkeitskurve macht daraus schnell eine harte Prüfung von Timing und Selbstbeherrschung. Das Tool läuft komplett im Browser, ohne Anmeldung und ohne Download — am Desktop mit der Maus klicken, am Smartphone den Bildschirm antippen.

Die Hauptschleife wird von requestAnimationFrame angetrieben. Pro Frame wird eine interne rotation um einen festen speed-Wert (Grad pro Frame) erhöht, anschließend wird über alle steckenden Nadeln iteriert und ihr transform auf rotate(baseAngle + rotation) gesetzt. Da transform eine Compositor-Layer-Eigenschaft ist, übergibt der Browser die Drehung an den GPU-Compositor-Thread, ohne Layout oder Paint auszulösen. Selbst das letzte Level mit allen 15 rotierenden Nadeln bleibt so stabil bei 60 fps. Die Kollisionserkennung verwendet einen Ansatz „Winkeldifferenz zu Sehnenlänge“. Jede steckende Nadel wird durch ihren baseAngle im Koordinatensystem der Scheibe dargestellt (ein fester Versatz zur Scheibe, der von der Rotation unbeeinflusst bleibt). Wenn eine abgeschossene Nadel die Mitte erreicht, beträgt ihr Winkel in Weltkoordinaten TARGET_ANGLE = 0, was im Scheibenkoordinatensystem normalizeAngle(0 - rotation) entspricht. Der neue baseAngle wird dann mit jedem vorhandenen baseAngle verglichen: die Winkeldifferenz Δθ wird in die Sehnenlänge 2R·sin(Δθ/2) zwischen den Mittelpunkten der Nadelspitzen-Punkte umgerechnet (R = 111px vom Mittelpunkt jedes Spitzenpunkts zum Scheibenzentrum). Liegt sie unter dem 24px-Schwellwert, gilt der Schuss als Kollision und die Runde endet. Das Schießen wird von einer kleinen State Machine reguliert. shootLocked markiert eine Nadel als „in der Luft“ und verhindert, dass sowohl das transitionend-Event als auch der 180-ms-setTimeout-Fallback denselben Schuss zweimal abrechnen. Die CSS-Transition dauert 120ms; das setTimeout über 180ms ist ein Sicherheitsnetz für den seltenen Fall, dass transitionend nicht ausgelöst wird (etwa wenn das DOM verändert wird, bevor die Transition abgeschlossen ist). pendingShots puffert Klick-Anfragen, die während eines laufenden Fluges eintreffen, mit einem Limit von 3 — Klicks darüber hinaus werden verworfen (nicht eingereiht), so bleibt das Schnellschuss-Gefühl erhalten und es laufen nicht mehrere Nadeln gleichzeitig auf das Zentrum zu. Sowohl Misserfolg als auch Bestehen setzen gameOver auf true: die Hauptschleife läuft weiter, aktualisiert aber rotation nicht mehr und friert die Szene ein. Für die Anzeige hält das Spiel eine feste Designgröße von 420×720 ein. Der äußere Wrapper berechnet aus dem Viewport einen Skalierungsfaktor und wendet ihn per transform: scale an. Die aktuelle Implementierung deckelt die Skalierung bei 1, sodass kleine Viewports proportional verkleinert werden, während Desktop-Viewports die Originalgröße behalten — sie werden nicht vergrößert. So arbeitet die Kollisionserkennung immer im Designkoordinatensystem mit einem einzigen Satz Pixel-Schwellwerten, und das Urteil ist auf jedem Bildschirm identisch.

• Hauptschleife: requestAnimationFrame, pro Frame rotation += speed, alle Nadeln erhalten transform: rotate(baseAngle + rotation).
• GPU-Beschleunigung: Drehung über transform statt left/top, der Compositor des Browsers übernimmt — kein Layout, keine Neuzeichnung.
• Trefferprüfung: 0° in Weltkoordinaten wird per normalizeAngle(0 - rotation) zurück in Scheibenkoordinaten projiziert; die Sehnenlänge 2R·sin(Δθ/2) wird mit einem 24px-Schwellwert verglichen.
• State Machine: shootLocked verhindert doppelte Abrechnung, pendingShots ist auf 3 begrenzt, Überlauf wird verworfen (nicht eingereiht), gameOver friert die Rotation ein.
• Schuss-Abschluss: 120ms CSS-Flug, transitionend als Hauptweg + 180ms-setTimeout als Sicherheitsnetz für den seltenen Fall, dass transitionend nicht feuert.
• Skalierung: festes 420×720-Designsystem; der Wrapper wendet transform: scale je nach Viewport-Größe an, gedeckelt bei 1, sodass Desktops die Originalgröße behalten statt sich zu vergrößern.
• Speicherung: nur das beste geschaffte Level wird in localStorage gespeichert. Es wird nichts hochgeladen, kein Account, keine Bestenliste.