Construct 2 : Fishing for Words Game (2)

สวัสดีครับ บทความนี้เราจะมาเขียนคำสั่งของเกม Fishing for Words กันนะครับ ก่อนอื่นเราต้องเพิ่มวัตถุ (object) อีก 4 ชิ้น เข้าไปในเกมของเราก่อน ดังนี้

  • เพิ่ม Array ชื่อ vocabArray
  • เพิ่ม Array ชื่อ letterArray
  • เพิ่ม Function
  • เพิ่ม Touch

หลังจากเพิ่มเรียบร้อยแล้ว เรามาเริ่มเขียนคำสั่งกันเลยครับ

1. เพิ่มตัวแปร Global Variable ดังนี้

  • Score ประเภท Number ตั้งค่าเริ่มต้น 0
  • move ประเภท Number ตั้งค่าเริ่มต้น 0
  • HP ประเภท Number ตั้งค่าเริ่มต้น 5
  • lenWord ประเภท Number ตั้งค่าเริ่มต้น -1
  • textAnswer ประเภท text ตั้งค่าเริ่มต้น “” (ว่าง)

2. ตั้งค่าเริ่มต้นต่างๆ โหลดตัวอักษรมาเก็บใน letterArray โหลดคำศัพท์มาเก็บไว้ใน vocabArray

  • letterArray
"{""c2array"":true,""size"":[26,1,1],""data"":[[[""A""]],[[""B""]],[[""C""]],[[""D""]],[[""E""]],[[""F""]],[[""G""]],[[""H""]],[[""I""]],[[""J""]],[[""K""]],[[""L""]],[[""M""]],[[""N""]],[[""O""]],[[""P""]],[[""Q""]],[[""R""]],[[""S""]],[[""T""]],[[""U""]],[[""V""]],[[""W""]],[[""X""]],[[""Y""]],[[""Z""]]]}"
  • vocabArray
"{""c2array"":true,""size"":[10,1,1],""data"":[[[""zebra,0""]],[[""owl,1""]],[[""bear,2""]],[[""giraffe,3""]],[[""tiger,4""]],[[""lion,5""]],[[""monkey,6""]],[[""elephant,7""]],[[""fox,8""]],[[""rabbit,9""]]]}"

3. แสดงผลค่าต่างๆ ของตัวแปร

  • คะแนน (Score)
  • พลังที่เหลือ (HP)
  • จำนวนตัวอักษรที่เหลือของคำศัพท์ (lenWord)

4. ฟังก์ชั่นโหลดคำศัพท์ และรูปภาพ จาก vocabArray มาแสดงในหน้าเกม

5. ฟังก์ชั่นสร้างปลาและตัวอักษรที่อยู่ในคำศัพท์

6. กำหนดให้วัตถุต่างๆ ติดอยู่ด้วยกัน

  • สายเบ็ดกับคันเบ็ด
  • สายเบ็ดกับตัวเบ็ด
  • ตัวอักษรกับปลา
  • ตั้งค่ามุมของตัวอักษรและตัวปลาให้อยู่แนวเดียวกัน

7. กำหนดให้ปลาว่ายกลับเมื่อพ้นขอบจอทั้งสองด้าน

8. เมื่อผู้เล่นแตะตัวปลา เพื่อเลือกตัวอักษร จะตั้งค่ามุมและความยาวของสายเบ็ด ตามตำแหน่งและระยะห่างระหว่างคันเบ็ดกับตัวปลา

9. เมื่อปลาถูกเลือก จะตั้งชื่อปลาให้ตรงกับตัวอักษรบนตัวปลา

10. ลากปลาที่ถูกเลือกมายังเรือ และกำหนดทิศทางของตัวปลา

11. กำหนดตำแหน่งการดึงปลาขึ้นเรือ เมื่อปลาว่ายมาทับกับ hitBox

12. เมื่อดึงปลาขึ้นเรือ

  • ย่อขนาดของปลาให้เล็กลง
  • ย่อขนาดตัวอักษรให้เล็กลง
  • ลดความยาวของสายเบ็ดลงครั้งละ 5 พิกเซล
  • กำหนดให้ปลาอยู่ติดกับปลายสายเบ็ดตลอดเวลา

13. เก็บปลาใส่เรือ แสดงตัวอักษรที่เก็บได้ ลบจำนวนตัวอักษรของคำศัพออก 1 ตัว และตั้งค่าต่างๆ กลับไปเริ่มใหม่

14. เมื่อเก็บตัวอักษรครบตามจำนวนของตัวอักษรในคำศัพท์ ให้เรียกฟังก์ชั่น ตรวจคำตอบ (checkAns)

15. ฟังก์ชั่นตรวจคำตอบ และแสดงเครื่องถูก หรือ ผิด

16. ไปหน้า Game Over เมื่อ HP เป็น 0

17. นับเวลาถอยหลังและแสดงเวลาที่เหลือ

18. เมื่อเวลาหมด TextShow จะแสดงข้อความ Time Out และเรียกฟังก์ชั่น ตรวจคำตอบ (checkAns)

ขอให้สนุกกับการสร้างสื่อการสอนและเกมการศึกษากันนะครับ

แล้วพบกันใหม่ สวัสดีครับ

DEMO : https://semicon.github.io/fishingword/index.html