Wiki
Kod źródłowy Chrome Dino
Wewnątrz otwartego kodu źródłowego gry T-Rex Runner od Google
Gra Chrome Dino jest częścią projektu open-source Chromium, więc jej obecna implementacja może być bezpośrednio sprawdzona w repozytorium źródłowym Google. Od lipca 2026 roku gra znajduje się w components/neterror/resources/dino_game/. Główny kontroler Runner znajduje się w offline.ts, podczas gdy punktacja, T-Rex, przeszkody, horyzont, sprite'y, stan gry i dźwięk są podzielone na ukierunkowane moduły TypeScript. Starsze wyjaśnienia, które opisują jeden aktualny plik offline.js, odnoszą się do poprzedniej architektury Chromium. Gra nadal używa HTML Canvas API i prymitywów czasowych przeglądarki, a nie silnika gry innej firmy. Runner koordynuje dane wejściowe i stan, Trex odpowiada za zachowanie skakania i kucania, Obstacle i Horizon zarządzają ruchomym światem, a DistanceMeter konwertuje odległość na wyświetlany wynik. Obecny distance_meter.ts również dowodzi, że wyświetlacz rozszerza się z pięciu do sześciu cyfr po 99 999. Dla programistów kod jest użytecznym, kompaktowym przykładem modułowego TypeScript, rozgrywki opartej na konfiguracji, wsparcia dostępności, animacji sprite'ów, wykrywania kolizji i pętli requestAnimationFrame.
Kluczowe klasy i architektura
Obecny kod źródłowy Chrome Dino jest zorganizowany w ukierunkowane moduły: - offline.ts / Runner: koordynuje pętlę gry, dane wejściowe, prędkość, stan punktacji, zachowanie pauzy/restartu i dostępność.
- trex.ts: zarządza fizyką skoków, kucaniem, stanami animacji i polami kolizji.
- obstacle.ts: definiuje ruch kaktusów i pterodaktyli oraz zachowanie ich pojawiania się.
- horizon.ts i powiązane pliki: rysują ziemię, chmury, księżyc, tryb nocny i przewijający się świat.
- distance_meter.ts: konwertuje odległość na wynik, rysuje najlepszy wynik, miga osiągnięciami i rozszerza wyświetlacz po początkowych pięciu cyfrach.
- game_config.ts i pliki definicji sprite'ów: utrzymują prędkości, luki, tryby i pozycje zasobów oparte na konfiguracji. Ten modułowy układ TypeScript zastąpił starszą, jednoplikową strukturę JavaScript.
Jak działa pętla gry
Gra wykorzystuje standardową pętlę requestAnimationFrame. W każdej klatce metoda Runner.update: 1. Oblicza czas, który upłynął od ostatniej klatki
2. Aktualizuje prędkość gry na podstawie przebytej odległości
3. Przesuwa wszystkie przeszkody z ich aktualną prędkością
4. Sprawdza kolizje między T-Rexem a dowolną przeszkodą
5. Aktualizuje wynik i miernik odległości
6. Czyści płótno i ponownie rysuje wszystkie elementy
7. Planuje następną klatkę Jeśli zostanie wykryta kolizja, gra przechodzi w stan 'rozbicia', odtwarza krótką animację i czeka, aż gracz naciśnie spację, aby ponownie uruchomić. Cała gra działa z docelową prędkością 60 klatek na sekundę, z kompensacją czasu delta, aby zapewnić spójną fizykę zarówno na szybkich, jak i wolnych wyświetlaczach.
Uczenie się z bazy kodu
Obecne źródło demonstruje kilka użytecznych pomysłów inżynierskich w prawdziwej funkcji produkcyjnej: - Modułowa odpowiedzialność: runner, postać, świat, wynik, stan i zasoby to oddzielne moduły TypeScript.
- Wejście sterowane zdarzeniami: zdarzenia klawiatury, wskaźnika, dotyku, widoczności, fokusu i gamepada zasilają ten sam stan gry.
- Jawny stan: zachowanie oczekiwania, biegu, skakania, kucania, pauzy i rozbicia jest reprezentowane bezpośrednio.
- Rozgrywka oparta na konfiguracji: przyspieszenie, maksymalna prędkość, luki w przeszkodach, współczynniki mobilne i alternatywne tryby są oparte na danych.
- Dostępność: komunikaty regionów na żywo, etykiety, kontrolki spowolnienia i alternatywne metody wprowadzania są częścią obecnej implementacji.
- Synchronizacja uwzględniająca liczbę klatek na sekundę:
requestAnimationFramei upływający czas utrzymują spójny ruch. Czytaj aktualne pliki Chromium, a nie skopiowane samouczki zbudowane wokół wycofanego układuoffline.js.
