Вікі
Вихідний код Chrome Dino
Всередині відкритого коду, що стоїть за T-Rex Runner від Google
Гра Chrome Dino є частиною відкритого проекту Chromium, тому її поточну реалізацію можна безпосередньо перевірити у сховищі вихідного коду Google. Станом на липень 2026 року гра знаходиться в components/neterror/resources/dino_game/. Основний контролер Runner знаходиться в offline.ts, тоді як підрахунок очок, T-Rex, перешкоди, горизонт, спрайти, стан гри та звук розділені на сфокусовані модулі TypeScript. Старіші пояснення, які описують один поточний файл offline.js, стосуються попередньої архітектури Chromium. Гра все ще використовує HTML Canvas API та примітиви синхронізації браузера, а не сторонній ігровий рушій. Runner координує введення та стан, Trex відповідає за поведінку стрибків та присідань, Obstacle та Horizon керують рухомим світом, а DistanceMeter перетворює відстань у відображуваний рахунок. Поточний distance_meter.ts також доводить, що відображення розширюється з п'яти до шести цифр після 99 999. Для розробників код є корисним компактним прикладом модульного TypeScript, ігрового процесу, керованого конфігурацією, підтримки доступності, анімації спрайтів, виявлення зіткнень та циклу requestAnimationFrame.
Ключові класи та архітектура
Поточний вихідний код Chrome Dino організований у сфокусовані модулі: - offline.ts / Runner: координує ігровий цикл, введення, швидкість, стан рахунку, поведінку паузи/перезапуску та доступність.
- trex.ts: керує фізикою стрибків, присіданнями, станами анімації та колізійними рамками.
- obstacle.ts: визначає рух та появу кактусів та птерозаврів.
- horizon.ts та пов'язані файли: малюють землю, хмари, місяць, нічний режим та прокручуваний світ.
- distance_meter.ts: перетворює відстань на рахунок, малює високий бал, блимає досягненнями та розширює відображення після початкових п'яти цифр.
- game_config.ts та файли визначення спрайтів: забезпечують керування швидкістю, проміжками, режимами та позиціями активів за допомогою конфігурації. Цей модульний макет TypeScript замінив стару однофайлову структуру JavaScript.
Як працює ігровий цикл
Гра використовує стандартний цикл requestAnimationFrame. Кожен кадр метод Runner.update: 1. Обчислює час, що минув з останнього кадру
2. Оновлює швидкість гри на основі пройденої відстані
3. Переміщує всі перешкоди з їх поточною швидкістю
4. Перевіряє зіткнення між T-Rex та будь-якою перешкодою
5. Оновлює рахунок та вимірювач відстані
6. Очищає полотно та перемальовує всі елементи
7. Планує наступний кадр Якщо виявлено зіткнення, гра переходить у стан «розбито», відтворює коротку анімацію та чекає, поки гравець натисне пробіл для перезапуску. Вся гра працює з цільовою частотою 60 кадрів на секунду, з компенсацією дельта-часу для забезпечення послідовної фізики як на швидких, так і на повільних дисплеях.
Навчання з кодової бази
Поточний вихідний код демонструє кілька корисних інженерних ідей у реальній виробничій функції: - Модульна відповідальність: "бігун", персонаж, світ, рахунок, стан та активи є окремими модулями TypeScript.
- Введення, кероване подіями: події клавіатури, вказівника, дотику, видимості, фокусу та геймпада живлять один і той же стан гри.
- Явний стан: поведінка очікування, бігу, стрибків, присідань, паузи та зіткнення представлена безпосередньо.
- Ігровий процес, керований конфігурацією: прискорення, максимальна швидкість, проміжки між перешкодами, мобільні коефіцієнти та альтернативні режими є керованими даними.
- Доступність: повідомлення в реальному часі, мітки, елементи керування уповільненням та альтернативні вводи є частиною поточної реалізації.
- Синхронізація з урахуванням частоти кадрів:
requestAnimationFrameта час, що минув, забезпечують послідовний рух. Читайте поточні файли Chromium, а не скопійовані посібники, побудовані на застарілому макетіoffline.js.
