วิกิ
ซอร์สโค้ด 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: ประสานงาน game loop, อินพุต, ความเร็ว, สถานะคะแนน, พฤติกรรมการหยุดชั่วคราว/รีสตาร์ท และการเข้าถึง
- trex.ts: จัดการฟิสิกส์การกระโดด, การก้ม, สถานะแอนิเมชัน และกล่องการชนกัน
- obstacle.ts: กำหนดการเคลื่อนที่และการเกิดของกระบองเพชรและเทอโรแดกทิล
- horizon.ts และไฟล์ที่เกี่ยวข้อง: วาดพื้น, เมฆ, ดวงจันทร์, โหมดกลางคืน และโลกที่เลื่อน
- distance_meter.ts: แปลงระยะทางเป็นคะแนน, วาดคะแนนสูงสุด, แสดงความสำเร็จ และขยายการแสดงผลหลังจากห้าหลักแรก
- game_config.ts และไฟล์คำจำกัดความสไปรต์: ทำให้ความเร็ว, ช่องว่าง, โหมด และตำแหน่งสินทรัพย์ถูกขับเคลื่อนด้วยการกำหนดค่า โครงสร้าง TypeScript แบบโมดูลาร์นี้มาแทนที่โครงสร้าง JavaScript ไฟล์เดียวแบบเก่า
Game Loop ทำงานอย่างไร
เกมใช้ลูป requestAnimationFrame มาตรฐาน ในแต่ละเฟรม เมธอด Runner.update จะ: 1. คำนวณเวลาที่ผ่านไปตั้งแต่เฟรมสุดท้าย
2. อัปเดตความเร็วเกมตามระยะทางที่ผ่านไป
3. เคลื่อนย้ายอุปสรรคทั้งหมดด้วยความเร็วปัจจุบัน
4. ตรวจสอบการชนกันระหว่าง T-Rex และอุปสรรคใดๆ
5. อัปเดตคะแนนและมาตรวัดระยะทาง
6. ล้าง Canvas และวาดองค์ประกอบทั้งหมดใหม่
7. กำหนดเวลาเฟรมถัดไป หากตรวจพบการชนกัน เกมจะเข้าสู่สถานะ 'crashed' เล่นแอนิเมชันสั้นๆ และรอให้ผู้เล่นกด spacebar เพื่อรีสตาร์ท เกมทั้งหมดทำงานที่เป้าหมาย 60 เฟรมต่อวินาที พร้อมการชดเชยเวลาเดลต้าเพื่อให้แน่ใจว่าฟิสิกส์สอดคล้องกันทั้งบนจอแสดงผลที่เร็วและช้า
เรียนรู้จาก Codebase
ซอร์สโค้ดปัจจุบันแสดงให้เห็นแนวคิดทางวิศวกรรมที่มีประโยชน์หลายประการในคุณสมบัติการผลิตจริง: - ความรับผิดชอบแบบโมดูลาร์: ตัวรัน, ตัวละคร, โลก, คะแนน, สถานะ และสินทรัพย์เป็นโมดูล TypeScript แยกต่างหาก
- อินพุตที่ขับเคลื่อนด้วยเหตุการณ์: แป้นพิมพ์, ตัวชี้, การสัมผัส, การมองเห็น, โฟกัส และเหตุการณ์เกมแพดป้อนสถานะเกมเดียวกัน
- สถานะที่ชัดเจน: พฤติกรรมการรอ, การวิ่ง, การกระโดด, การก้ม, การหยุดชั่วคราว และการชนกันถูกแสดงโดยตรง
- การเล่นเกมที่ขับเคลื่อนด้วยการกำหนดค่า: การเร่งความเร็ว, ความเร็วสูงสุด, ช่องว่างของอุปสรรค, สัมประสิทธิ์มือถือ และโหมดทางเลือกถูกขับเคลื่อนด้วยข้อมูล
- การเข้าถึง: ข้อความในพื้นที่สด, ป้ายกำกับ, การควบคุมการชะลอความเร็ว และทางเลือกอินพุตเป็นส่วนหนึ่งของการใช้งานปัจจุบัน
- การจับเวลาที่คำนึงถึงอัตราเฟรม:
requestAnimationFrameและเวลาที่ผ่านไปทำให้การเคลื่อนไหวสอดคล้องกัน อ่านไฟล์ Chromium ปัจจุบันแทนที่จะเป็นบทช่วยสอนที่คัดลอกมาซึ่งสร้างขึ้นจากเค้าโครงoffline.jsที่เลิกใช้แล้ว
