Wiki
Chrome Dino Broncode
Binnen de Open-Source Code Achter Google's T-Rex Runner
Het Chrome Dino-spel maakt deel uit van het open-source Chromium-project, dus de huidige implementatie kan direct worden geïnspecteerd in de bronrepository van Google. Vanaf juli 2026 bevindt het spel zich in components/neterror/resources/dino_game/. De hoofdcontroller Runner bevindt zich in offline.ts, terwijl scoren, de T-Rex, obstakels, de horizon, sprites, spelstatus en geluid zijn opgesplitst in gerichte TypeScript-modules. Oudere verklaringen die één huidig offline.js-bestand beschrijven, verwijzen naar een eerdere Chromium-architectuur. Het spel gebruikt nog steeds de HTML Canvas API en browser timing-primitieven in plaats van een game-engine van derden. Runner coördineert invoer en status, Trex beheert spring- en buiggedrag, Obstacle en Horizon beheren de bewegende wereld, en DistanceMeter converteert afstand naar de weergegeven score. De huidige distance_meter.ts bewijst ook dat de weergave na 99.999 van vijf naar zes cijfers uitbreidt. Voor ontwikkelaars is de code een nuttig compact voorbeeld van modulaire TypeScript, configuratiegestuurde gameplay, toegankelijkheidsondersteuning, sprite-animatie, botsingsdetectie en een requestAnimationFrame-loop.
Belangrijkste Klassen en Architectuur
De huidige Chrome Dino-broncode is georganiseerd in gerichte modules: - offline.ts / Runner: coördineert de gameloop, invoer, snelheid, scorestatus, pauze-/herstartgedrag en toegankelijkheid.
- trex.ts: beheert springfysica, buigen, animatiestatussen en botsingskaders.
- obstacle.ts: definieert beweging en spawn-gedrag van cactussen en pterosauriërs.
- horizon.ts en gerelateerde bestanden: tekenen de grond, wolken, maan, nachtmodus en scrollende wereld.
- distance_meter.ts: converteert afstand naar score, tekent de hoge score, flitst prestaties en breidt de weergave uit na de initiële vijf cijfers.
- game_config.ts en sprite-definitiebestanden: houden snelheden, gaten, modi en assetposities configuratiegestuurd. Deze modulaire TypeScript-indeling verving de oudere JavaScript-structuur met één bestand.
Hoe de Gameloop Werkt
Het spel gebruikt een standaard requestAnimationFrame-loop. Elk frame voert de Runner.update-methode uit: 1. Berekent de verstreken tijd sinds het laatste frame
2. Werkt de spelsnelheid bij op basis van de afgelegde afstand
3. Verplaatst alle obstakels met hun huidige snelheid
4. Controleert op botsingen tussen de T-Rex en een obstakel
5. Werkt de score en afstandsmeting bij
6. Maakt het canvas leeg en tekent alle elementen opnieuw
7. Plant het volgende frame Als een botsing wordt gedetecteerd, gaat het spel naar een 'gecrashte' status, speelt een korte animatie af en wacht tot de speler op de spatiebalk drukt om opnieuw te starten. Het hele spel draait met een doel van 60 frames per seconde, met delta-tijdcompensatie om consistente fysica te garanderen op zowel snelle als langzame schermen.
Leren van de Codebase
De huidige broncode demonstreert verschillende nuttige technische ideeën in een echte productiefunctie: - Modulaire verantwoordelijkheid: runner, karakter, wereld, score, status en assets zijn afzonderlijke TypeScript-modules.
- Gebeurtenisgestuurde invoer: toetsenbord-, aanwijzer-, aanraak-, zichtbaarheids-, focus- en gamepad-gebeurtenissen voeden dezelfde spelstatus.
- Expliciete status: wachtend, rennend, springend, bukkend, gepauzeerd en gecrasht gedrag wordt direct weergegeven.
- Configuratiegestuurde gameplay: acceleratie, maximale snelheid, obstakelgaten, mobiele coëfficiënten en alternatieve modi zijn datagestuurd.
- Toegankelijkheid: live-regioberichten, labels, vertragingsregelaars en invoeralternatieven maken deel uit van de huidige implementatie.
- Frame-rate-bewuste timing:
requestAnimationFrameen verstreken tijd houden beweging consistent. Lees de huidige Chromium-bestanden in plaats van gekopieerde tutorials die zijn gebouwd rond de gepensioneerdeoffline.js-indeling.
