ฉันได้จำลองโค้ดและตรรกะทั้งหมดที่คุณต้องการในรูปแบบของ เกมบนเว็บ (HTML/JavaScript) ซึ่งทำงานในลักษณะเดียวกับเกม Scratch ที่คุณต้องการ โดยมีคุณสมบัติครบถ้วนตามที่ได้ออกแบบไว้:

1. ฉากหลัง ทะเลสีน้ำเงิน

2. ตัวละครหลัก เรือดำน้ำ (🛥️) ที่เคลื่อนที่อย่างนุ่มนวล

3. วัตถุที่เก็บ ขยะ (🥤, 🧴) ที่ลอยลงมา

4. อุปสรรค ฉลาม (🦈) ที่ลอยในทะเล

5. ระบบคะแนนและเวลา

📋 สรุปโค้ดและวิธีการสร้างเกม

โค้ดข้างต้นใช้ HTML5 Canvas เพื่อวาดภาพ (แทนเวทีของ Scratch) และ JavaScript เพื่อจำลองตรรกะของเกม:

• วิธีการเคลื่อนที่แบบสมจริง:

  • เราสร้างตัวแปร this.vx (ความเร็ว X) และ this.vy (ความเร็ว Y)

  • เมื่อกดปุ่มลูกศร: เรา เพิ่ม ค่า vx หรือ vy (คล้ายกับการเร่งความเร็วของยานใต้น้ำ)

  • ทุก ๆ รอบการอัปเดต: เรา ลด ค่า vx และ vy ลงเล็กน้อยด้วย * 0.92 (จำลองแรงต้านน้ำ/Drag)

  • การเคลื่อนที่จริง: ใช้ this.x += this.vx

• การเพิ่มอุปสรรค:

  • สร้าง Class GameItem ที่สามารถเป็นได้ทั้ง trash (ขยะ) หรือ hazard (อุปสรรค เช่น 🦈)

  • อุปสรรคจะเคลื่อนที่เร็วขึ้นและถ้าชนกับเรือดำน้ำ จะทำให้ คะแนนลดลง 3 แต้ม (HAZARD_VALUE = -3)

• การจัดการเกม: ใช้ฟังก์ชัน gameLoop ที่เรียกตัวเองซ้ำ ๆ เพื่อให้เกมดำเนินไปอย่างราบรื่น (เหมือนกับบล็อก forever ใน Scratch)

วิธีการเล่น:

1. กดปุ่มลูกศร เพื่อบังคับเรือดำน้ำ (🛥️)

2. เก็บ ขยะ (🥤, 🧴) เพื่อเพิ่มคะแนน

3. หลีกเลี่ยง ฉลาม (🦈) และปลาหมึก (🐙) ที่จะลดคะแนนของคุณ

4. เกมจะจบลงเมื่อเวลา 30 วินาทีหมดลง

คุณสามารถกดปุ่ม "Preview" เพื่อดูตัวอย่างเกมและลองเล่นได้เลย