Orbital Golf. Zbuduj grę, w której grawitacja zmienia każdy strzał

Prosto do celu? Planeta ma inne plany

Miętowy pierścień czeka po drugiej stronie planszy. Ustawiacie kąt, wybieracie moc, wystrzeliwujecie jasną kulkę — i nagle tor zaczyna się zakrzywiać. Planeta przyciąga ją do siebie. Trzeba wykorzystać ten skręt, żeby dolecieć do celu i nie rozbić się po drodze.

Tak działa nasze Orbital Golf. Przygotowaliśmy trzy plansze: przelot nad planetą, drogę pod większym globem i finał pomiędzy dwoma światami. Możecie zagrać powyżej albo pobrać jeden plik HTML i otworzyć go bez internetu. Nie potrzeba konta ani bibliotek. Wynik zostaje tylko w bieżącej sesji; po zamknięciu pliku zaczniecie od nowa.

Po pudle spróbujcie słabiej

Kliknięcie lub dotknięcie planszy ustawia kierunek. Dokładniejszą korektę zrobicie suwakiem: dodatni kąt kieruje strzał w górę, ujemny w dół. Drugi suwak zmienia moc. Kropki pokazują początkowy fragment przewidywanego lotu. Pomarańczowe kółko na ich końcu ostrzega, że na tym odcinku kulka trafi w planetę.

Więcej mocy nie zawsze pomaga. Szybka kulka spędzi mniej czasu przy planecie, więc może skręcić za mało. Po nieudanej próbie zmieńcie tylko kąt albo tylko moc i porównajcie lot. Prób jest dowolnie dużo. Licznik przyda się, kiedy będziecie chcieli poprawić wynik całego przejścia.

Strzał kończy się po zderzeniu z planetą, wylocie poza planszę lub dziesięciu sekundach lotu. Gdy środek kulki wejdzie do pierścienia, pojawi się sukces i przycisk następnej planszy. „Ustaw od nowa” przerywa lot albo przenosi kulkę na start, ale zachowuje licznik. Dopiero „Nowa gra” zeruje wynik i wraca do pierwszego poziomu.

Jak opisać taką grę modelowi

Zacznijmy od zasad: co gracz ustawia, co się dzieje po strzale i kiedy może przejść dalej. Poniższy prompt opisuje grę podobną do naszej. Po otrzymaniu pliku sprawdźcie od razu porażkę, ponowną próbę i zwycięstwo. Bez tych trzech stanów będziecie mieli ruchomą scenę, ale jeszcze nie pełną rozgrywkę.

Nasz HTML jest przygotowanym przez nas przykładem, do którego możecie porównać własny wynik. Nie pochodzi z pojedynczej odpowiedzi wskazanego modelu. Możecie też przekazać modelowi gotowy plik i zlecić zmianę jednej planszy. Przesunięcie celu albo mocniejsze przyciąganie to już wystarczający materiał na nową zagadkę.

Zbuduj małą grę Orbital Golf w jednym pliku HTML, z osadzonym CSS i JavaScript. Ma działać offline bez bibliotek, fontów i połączeń sieciowych.

Zasady: kulka startuje po lewej, planety przyciągają ją do swoich środków. Gracz ustawia kąt od -65 do 80 stopni i moc od 10 do 100%. Trafienie w planetę, wyjście poza planszę lub 10 sekund lotu kończy próbę. Wejście środka kulki do pierścienia celu zalicza poziom. Przygotuj 3 grywalne plansze: przelot nad planetą, pod większą planetą i między dwiema planetami.

Użyj jednego Canvas i logicznej przestrzeni 900 × 500. Licz fizykę stałym krokiem 1/120 sekundy, niezależnie od odświeżania ekranu. Podgląd pierwszego fragmentu toru ma korzystać z tej samej funkcji co właściwy lot. Dla każdego poziomu znajdź sprawdzoną parę kąta i mocy; przycisk podpowiedzi ma ją ustawiać.

Dodaj suwaki z etykietami i wartościami, celowanie myszą oraz dotykiem, przyciski strzału, ponowienia, następnego poziomu i nowej gry. Pokazuj liczbę strzałów. Cały przebieg od rozpoczęcia do wygranej musi działać z klawiatury. Tab wybiera kontrolkę, strzałki zmieniają suwaki. Stan gry ogłaszaj w zwykłym tekście poza Canvas.

Wygląd: ciemny granat, kremowa kulka, miętowy cel, subtelne gwiazdy. Bez ciągłego ruchu w tle. Animuj tylko lot, a przy prefers-reduced-motion wyłącz ozdobny ślad kulki. Układ ma mieścić się od 320 px szerokości. Dodaj render_game_to_text() z aktualnym stanem i advanceTime(ms), żeby dało się sprawdzić grę deterministycznie. Wyjaśnij uruchomienie oraz podaj sprawdzone strzały dla wszystkich plansz.

Kropki muszą pokazywać ten sam lot

Gracz ustawił strzał według podglądu, a kulka poleciała inaczej? Najpierw sprawdzilibyśmy, czy podgląd i lot używają tych samych obliczeń. W naszym pliku oba wywołują funkcję stepBall. Podgląd po prostu urywa symulację wcześniej. Przy dwóch osobnych funkcjach łatwo poprawić jedną i zapomnieć o drugiej.

Ruch liczymy w 120 małych krokach na sekundę symulacji. Za rysowanie kolejnych klatek odpowiada requestAnimationFrame, mechanizm przeglądarki przeznaczony do animacji. Rozdzielenie tych zadań pozwala utrzymać tę samą fizykę na ekranach o różnej częstotliwości odświeżania. Same obliczenia są uproszczone, a jednostki dobrane do gry. Nie wyznaczamy tu rzeczywistej orbity.

Trzy strzały, od których możecie zacząć

W symulacji sprawdziliśmy rozwiązanie każdej planszy: pierwsza — 30° i 45% mocy, druga — −10° i 35%, trzecia — 15° i 35%. „Pokaż podpowiedź” ustawia te wartości. Jeśli utkniecie, wypróbujcie je i zobaczcie, którędy prowadzi droga. Po trzecim trafieniu gra podaje łączną liczbę prób i pozwala zacząć jeszcze raz.

Przy sprawdzaniu własnej wersji zróbcie też kilka rzeczy celowo źle. Trafcie w planetę, poprawcie kąt, przerwijcie kolejny lot resetem. Nieudane i przerwane strzały nadal mają się liczyć. Kilka szybkich kliknięć „Wystrzel” podczas lotu nie powinno uruchamiać dodatkowych kulek ani zwiększać licznika.

Powtórzcie obsługę klawiaturą i na wąskim ekranie. W naszym demo suwaki pokazują wartości, a komunikat o trafieniu jest tekstem poza grafiką. Czytnik ekranu dostaje też opis położenia startu, celu i planet. To nadal zabawa wymagająca wyobrażenia sobie toru, ale sam strzał można ustawić bez trafiania palcem w mały punkt.

Teraz wasza plansza

Po pobraniu HTML poszukajcie w kodzie tablicy LEVELS. Są tam położenia startu i celu, promienie planet, siła przyciągania oraz ustawienia podpowiedzi. Na początek przesuńcie cel o niewielki dystans. Sprawdźcie dawny strzał, a później spróbujcie zmienić masę jednej planety.

Nowa plansza potrzebuje nowej sprawdzonej podpowiedzi. Dobierzcie ją i przejdźcie poziom do końca: ustawienie zapisane dla poprzedniej wersji może już nie wystarczyć. W tej części projektowania najciekawsze jest właśnie szukanie równowagi — gracz ma mieć nad czym pomyśleć, ale musi też móc wygrać.