เกมขี่รถหลบหลีกสิ่งกีดขวาง ด้วยภาษา HTML (Road Racer by HTML)

ในยุคปัจจุบันที่เทคโนโลยีมีการพัฒนาอย่างรวดเร็ว เกมคอมพิวเตอร์ได้กลายเป็นส่วนสำคัญในชีวิตประจำวันของผู้คน โดยเฉพาะอย่างยิ่งเกมที่สามารถเล่นได้ทุกเพศทุกวัยและไม่ต้องใช้เวลามากในการเรียนรู้เพื่อเล่น โปรแกรมเกมขี่รถหลบสิ่งกีดขวางนี้ได้ถูกพัฒนาขึ้นเพื่อตอบสนองความต้องการของผู้เล่นที่ต้องการความสนุกสนานและท้าทาย โดยการหลบหลีกสิ่งกีดขวางที่ปรากฏอยู่บนถนนในขณะขับรถ ซึ่งช่วยให้ผู้เล่นได้พัฒนาทักษะการควบคุมรถและการตัดสินใจได้อย่างรวดเร็ว

เเละเกมนี้ยังใช้แนวคิดด้านฟิสิกส์และการจำลองการเคลื่อนที่ ซึ่งถือเป็นพื้นฐานสำคัญในสาขาวิศวกรรมไฟฟ้าและอิเล็กทรอนิกส์ ในการพัฒนาเกมนี้มีการนำความรู้ทางฟิสิกส์ เช่น แรงเสียดทาน การเร่ง การชน และการเคลื่อนที่ของวัตถุ มาจำลองเพื่อสร้างประสบการณ์การขับขี่ที่สมจริง นอกจากนี้ ยังมีการจำลองการจัดการพลังงาน (หรือเชื้อเพลิง) ซึ่งเป็นอีกแนวคิดหนึ่งที่เกี่ยวข้องกับการบริหารจัดการพลังงานในวิศวกรรมไฟฟ้า เพื่อให้ผู้เล่นได้เรียนรู้ถึงการใช้งานทรัพยากรอย่างมีประสิทธิภาพ

• สร้างประสบการณ์การเล่นเกมที่น่าสนใจ: ให้ผู้เล่นมีความสนุกสนานและตื่นเต้นในการเล่นเกม

• พื้นที่เกม: เกมถูกจำกัดให้เล่นในพื้นที่ของ <canvas> ขนาด 800×600 พิกเซล

• การควบคุม: ผู้เล่นสามารถใช้ปุ่มลูกศรซ้ายและขวาในการเลี้ยวรถ โดยการกดปุ่มจะทำให้รถเคลื่อนที่ไปทางซ้ายหรือขวา

• การเกิดสิ่งกีดขวาง: สิ่งกีดขวาง (รถที่วิ่งสวน) จะเกิดขึ้นแบบสุ่มจากด้านบนของจอ โดยมีความเร็วและระยะห่างที่แตกต่างกัน

• สถานะน้ำมัน: น้ำมันจะลดลงทุกวินาที ขึ้นอยู่กับระยะเวลาที่ผู้เล่นขับรถในเกม และจะต้องมีการเก็บไอเทมถังน้ำมันเพื่อเพิ่มปริมาณน้ำมันให้เพียงพอ

1.เปิดเว็บเบราว์เซอร์: ผู้เล่นสามารถเปิดเว็บเบราว์เซอร์ที่รองรับ HTML5

2.เข้าถึงเกม: เข้าสู่หน้าเกมโดยป้อน URL ที่กำหนด

3.เริ่มเกม: คลิกปุ่มเริ่มเกมเพื่อเริ่มเล่น

4.ควบคุมรถ: ใช้ปุ่มลูกศรซ้ายและขวาในการเลี้ยวรถเพื่อหลบสิ่งกีดขวาง

5.เก็บไอเทม: พยายามเก็บไอเทมถังน้ำมันเพื่อเพิ่มน้ำมันให้กับรถ

6.เกมจบ: หากเกิดการชนกับสิ่งกีดขวางหรือหมดน้ำมัน ระบบจะแสดงหน้าจอ GAME OVER พร้อมปุ่มเริ่มใหม่

1. ฟังก์ชันการควบคุมรถ (Movement)

ฟังก์ชันนี้ทำหน้าที่รับค่าปุ่มที่ผู้เล่นกด (ซ้ายหรือขวา) และทำการเคลื่อนรถไปทางซ้ายหรือขวา โดยมีการจำกัดความเร็วและการลดความเร็วเมื่อผู้เล่นปล่อยปุ่ม

การทำงาน:

• หากผู้เล่นกดปุ่มลูกศรซ้าย (keys.left), รถจะเคลื่อนไปทางซ้าย โดยจะค่อยๆ เร่งความเร็วและจำกัดความเร็วสูงสุด (maxSpeed)
• หากกดปุ่มลูกศรขวา (keys.right), รถจะเคลื่อนไปทางขวาด้วยการเร่งความเร็ว
• เมื่อปล่อยปุ่ม ลูกศร รถจะค่อยๆ ลดความเร็วตามค่าความฝืด (friction)
• มีการเช็กว่ารถไม่ออกนอกขอบเขตของหน้าจอ

2. ฟังก์ชันสร้างสิ่งกีดขวาง (Obstacles)

ฟังก์ชันนี้ใช้ในการสุ่มสร้างสิ่งกีดขวางลงบนถนน โดยสิ่งกีดขวางแต่ละประเภทจะมีขนาดและความเร็วที่แตกต่างกัน

การทำงาน:

• สุ่มเลือกชนิดของสิ่งกีดขวางจาก obstacleTypes
• สุ่มตำแหน่ง x สำหรับการวางสิ่งกีดขวาง
• เพิ่มสิ่งกีดขวางที่สุ่มได้ลงในอาร์เรย์ obstacles พร้อมกับตำแหน่งเริ่มต้น (ด้านบนของหน้าจอ)

3. ฟังก์ชันอัปเดตสิ่งกีดขวาง (Update Obstacles)

ฟังก์ชันนี้ใช้ในการเคลื่อนที่สิ่งกีดขวางลงมาที่ถนน และตรวจสอบว่ารถชนกับสิ่งกีดขวางหรือไม่

การทำงาน:

• ทำให้สิ่งกีดขวางเลื่อนลงมาตามค่าความเร็ว (speed) ของมัน
• ลบสิ่งกีดขวางออกเมื่อมันเคลื่อนผ่านหน้าจอ (ออกไปด้านล่าง)
• เช็กการชนระหว่างสิ่งกีดขวางและรถ โดยเรียกใช้ฟังก์ชัน checkCollision() ถ้าชนกันจะเรียกฟังก์ชัน gameOver() เพื่อจบเกม

4. ฟังก์ชันสร้างไอเทมเชื้อเพลิง (Fuel Items)

ฟังก์ชันนี้สร้างไอเทมเชื้อเพลิงที่จะสุ่มปรากฏบนถนน

การทำงาน:

• กำหนดขนาด (width, height) ของไอเทมเชื้อเพลิง
• สุ่มตำแหน่ง x ที่จะวางไอเทม
• เพิ่มไอเทมเชื้อเพลิงลงในอาร์เรย์ fuelItems พร้อมกับค่าความเร็วที่ใช้ในการเลื่อนลงบนถนน

5. ฟังก์ชันตรวจสอบการชน (Collision Check)

ฟังก์ชันนี้ใช้ในการตรวจสอบว่ารถชนกับสิ่งกีดขวางหรือไอเทมเชื้อเพลิงหรือไม่

การทำงาน:

• ใช้การเปรียบเทียบตำแหน่งของวัตถุทั้งสอง (รถและสิ่งกีดขวางหรือไอเทม) เพื่อหาว่ามีการชนกันหรือไม่ โดยใช้ขอบเขตของแต่ละวัตถุในการตรวจสอบการซ้อนทับ

6. ฟังก์ชันอัปเดตเชื้อเพลิง (Update Fuel)

ฟังก์ชันนี้ทำหน้าที่ลดปริมาณเชื้อเพลิงและอัปเดตแถบแสดงระดับเชื้อเพลิง

การทำงาน:

• ลดค่าปริมาณเชื้อเพลิงของรถลงทีละ 1 หน่วย
• อัปเดตขนาดของแถบเชื้อเพลิง (Fuel Bar) ตามปริมาณเชื้อเพลิงที่เหลือ
• หากเชื้อเพลิงหมด (เชื้อเพลิงเป็น 0) เกมจะจบลงโดยเรียกฟังก์ชัน gameOver()

7. ฟังก์ชันจบเกม (Game Over)

ฟังก์ชันนี้ใช้ในการหยุดเกมเมื่อเกิดเหตุการณ์เกมโอเวอร์ เช่น รถชนหรือเชื้อเพลิงหมด

การทำงาน:

• หยุดการทำงานของเกมทั้งหมด (หยุดการสร้างสิ่งกีดขวาง, ไอเทมเชื้อเพลิง, การจับเวลา, และการอัปเดตเชื้อเพลิง)
• แสดงหน้าจอ “GAME OVER” ให้ผู้เล่นเห็น

8. ฟังก์ชันเริ่มเกมใหม่ (Restart Game)

ฟังก์ชันนี้ใช้ในการเริ่มเกมใหม่เมื่อผู้เล่นกดปุ่ม “Restart”

การทำงาน:

• รีเซ็ตค่าต่าง ๆ ของเกม เช่น สร้างรถใหม่จากลิสต์ carTypes รีเซ็ตสิ่งกีดขวาง ไอเทมเชื้อเพลิง และตัวจับเวลา
• ซ่อนหน้าจอ “GAME OVER”
• เรียกฟังก์ชัน `startGame