Orbital Golf: Bau ein Spiel, in dem die Schwerkraft jeden Schuss verändert

Direkt zum Ziel? Der Planet hat andere Pläne

Ein mintgrüner Ring wartet auf der anderen Seite des Spielfelds. Du stellst den Winkel ein, wählst die Stärke, schießt die helle Kugel ab – und plötzlich krümmt sich ihre Bahn. Der Planet zieht sie an. Diese Kurve musst du nutzen, um das Ziel zu erreichen, ohne unterwegs zu zerschellen.

So funktioniert unser Orbital Golf. Wir haben drei Spielfelder vorbereitet: einen Flug über einen Planeten, einen Weg unter einer größeren Welt und ein Finale zwischen zwei Welten. Du kannst oben spielen oder eine einzelne HTML-Datei herunterladen und ohne Internet öffnen. Konto und Bibliotheken brauchst du nicht. Das Ergebnis bleibt nur in der laufenden Sitzung. Nach dem Schließen der Datei fängst du neu an.

Nach dem Fehlschuss versuch es schwächer

Ein Klick oder eine Berührung des Spielfelds setzt die Richtung. Genauer korrigierst du sie mit dem Regler: Ein positiver Winkel zielt nach oben, ein negativer nach unten. Der zweite Regler bestimmt die Stärke. Punkte zeigen den Anfang der erwarteten Flugbahn. Ein orangefarbener Kreis an ihrem Ende warnt, dass die Kugel auf diesem Abschnitt einen Planeten trifft.

Mehr Kraft hilft nicht immer. Eine schnelle Kugel bleibt kürzer in der Nähe des Planeten und dreht deshalb vielleicht zu wenig ab. Ändere nach einem Fehlversuch nur den Winkel oder nur die Stärke und vergleiche den Flug. Du hast beliebig viele Versuche. Der Zähler hilft, wenn du das Ergebnis des ganzen Durchgangs verbessern möchtest.

Ein Schuss endet bei einer Kollision, beim Verlassen des Spielfelds oder nach zehn Sekunden Flug. Erreicht der Mittelpunkt der Kugel den Zielring, erscheinen die Erfolgsmeldung und die Schaltfläche zum nächsten Feld. „Schuss zurücksetzen“ unterbricht den Flug oder setzt die Kugel an den Start zurück, behält aber den Zähler. Erst „Neues Spiel“ setzt das Ergebnis zurück und kehrt zur ersten Stufe zurück.

So beschreibst du dem Modell dieses Spiel

Beginnen wir mit den Regeln: Was stellt der Spieler ein, was passiert nach dem Schuss, und wann darf er weiter? Der folgende Prompt beschreibt ein Spiel wie unseres. Prüfe nach Erhalt der Datei sofort Niederlage, erneuten Versuch und Sieg. Ohne diese drei Zustände hast du eine bewegte Szene, aber noch kein vollständiges Spiel.

Unser HTML ist ein von uns vorbereitetes Beispiel, mit dem du dein Ergebnis vergleichen kannst. Es stammt nicht aus einer einzelnen Antwort eines benannten Modells. Du kannst dem Modell auch die fertige Datei geben und eine Änderung an einem Spielfeld beauftragen. Ein verschobenes Ziel oder eine stärkere Anziehung reicht bereits für ein neues Rätsel.

Baue ein kleines Spiel namens Orbital Golf in einer einzelnen HTML-Datei mit eingebettetem CSS und JavaScript. Es soll offline ohne Bibliotheken, Webfonts und Netzwerkverbindungen laufen.

Regeln: Die Kugel startet links, Planeten ziehen sie zu ihren Mittelpunkten. Der Spieler stellt einen Winkel von -65 bis 80 Grad und eine Stärke von 10 bis 100% ein. Ein Planetentreffer, das Verlassen des Spielfelds oder 10 Sekunden Flug beenden den Versuch. Erreicht der Kugelmittelpunkt den Zielring, ist die Stufe geschafft. Bereite 3 spielbare Felder vor: über einen Planeten, unter einem größeren Planeten und zwischen zwei Planeten hindurch.

Verwende ein Canvas und einen logischen Raum von 900 × 500. Berechne die Physik mit festem Zeitschritt von 1/120 Sekunde, unabhängig von der Bildschirmaktualisierung. Die Vorschau des ersten Bahnabschnitts muss dieselbe Funktion wie der Flug nutzen. Finde für jedes Feld ein geprüftes Winkel-Stärke-Paar; die Hinweisschaltfläche soll es einstellen.

Ergänze Regler mit Beschriftungen und Werten, Zielen per Maus und Touch sowie Schaltflächen zum Schießen, Wiederholen, für die nächste Stufe und ein neues Spiel. Zeige die Zahl der Schüsse. Der gesamte Ablauf vom Start bis zum Sieg muss per Tastatur funktionieren. Tab wählt die Steuerung, Pfeiltasten verändern die Regler. Melde den Spielzustand als normalen Text außerhalb des Canvas.

Aussehen: dunkles Blau, cremefarbene Kugel, mintgrünes Ziel, dezente Sterne. Keine dauerhafte Hintergrundbewegung. Animiere nur den Flug; deaktiviere bei prefers-reduced-motion die dekorative Kugelspur. Das Layout muss ab 320 px Breite passen. Ergänze render_game_to_text() mit dem aktuellen Zustand und advanceTime(ms) für deterministische Prüfungen. Erkläre den Start und nenne geprüfte Schüsse für alle Spielfelder.

Die Punkte müssen denselben Flug zeigen

Der Spieler richtet sich nach der Vorschau, aber die Kugel fliegt anders? Wir würden zuerst prüfen, ob Vorschau und Flug dieselben Berechnungen verwenden. In unserer Datei rufen beide stepBall auf. Die Vorschau beendet die Simulation lediglich früher. Bei zwei getrennten Funktionen korrigiert man leicht eine und vergisst die andere.

Wir berechnen die Bewegung in 120 kleinen Schritten pro Simulationssekunde. Die folgenden Bilder zeichnet requestAnimationFrame, ein Browsermechanismus für Animationen. Diese Aufteilung hält die Physik auf Bildschirmen mit unterschiedlichen Bildwiederholraten gleich. Die Berechnungen sind vereinfacht, die Einheiten ans Spiel angepasst. Eine echte Umlaufbahn bestimmen wir hier nicht.

Drei Schüsse für den Anfang

In der Simulation haben wir für jedes Feld eine Lösung geprüft: das erste mit 30° und 45 % Stärke, das zweite mit −10° und 35 %, das dritte mit 15° und 35 %. „Tipp anzeigen“ setzt diese Werte. Kommst du nicht weiter, probiere sie aus und schau dir den Weg an. Nach dem dritten Treffer nennt das Spiel die Gesamtzahl der Versuche und lässt dich neu anfangen.

Mach beim Prüfen deiner Version auch absichtlich einiges falsch. Triff einen Planeten, korrigiere den Winkel, brich den nächsten Flug durch Zurücksetzen ab. Fehlgeschlagene und abgebrochene Schüsse müssen weiterhin zählen. Mehrere schnelle Klicks auf „Abschießen“ während eines Flugs sollten weder weitere Kugeln starten noch den Zähler erhöhen.

Wiederhole die Bedienung per Tastatur und auf einem schmalen Bildschirm. In unserer Demo zeigen die Regler ihre Werte; die Treffermeldung steht als Text außerhalb der Grafik. Ein Screenreader erhält außerdem eine Beschreibung von Start, Ziel und Planetenpositionen. Die Flugbahn muss man sich weiterhin vorstellen, aber den Schuss kannst du einstellen, ohne mit dem Finger einen kleinen Punkt treffen zu müssen.

Jetzt dein eigenes Spielfeld

Suche nach dem HTML-Download im Code das Array LEVELS. Darin stehen Start- und Zielpositionen, Planetenradien, Anziehungskraft und Hinweiswerte. Verschiebe zunächst das Ziel um eine kleine Strecke. Prüfe den bisherigen Schuss und ändere danach versuchsweise die Masse eines Planeten.

Ein neues Spielfeld braucht einen neu geprüften Hinweis. Finde ihn und spiele die Stufe bis zum Ende: Die für die alte Version gespeicherte Einstellung reicht vielleicht nicht mehr. Genau diese Suche nach dem Gleichgewicht macht den Entwurf interessant. Der Spieler soll nachdenken müssen, aber auch gewinnen können.