Construct 2 : สร้างเกมสะกดคำศัพท์ภาษาอังกฤษ ด้วยคำสั่ง for Loop (ตอนที่ 1)

มีเพื่อนสมาชิกจากต่างแดนได้สอบถามมาว่า “ต้องการสร้างกล่องสี่เหลี่ยมแบบอัตโนมัติตามจำนวนตัวอักษรของคำศัพท์ที่เปิดมา และให้ตัวแปรภายใน (Instance variable) ของแต่ละกล่องมีชื่อเป็นตัวพยัญชนะของคำศัพท์นั้น มีวิธีทำอย่างไร ?” เห็นว่าพอจะเป็นประโยชน์สำหรับเพื่อนสมาชิก จึงนำมาเขียนเป็นบทความให้เพื่อนสมาชิกได้ศึกษากันครับ ซึ่งหลักการก็ไม่มีอะไรมาก เพียงใช้คำสั่ง for loop ในการสร้างวัตถุที่ซ้ำกัน ซึ่งเคยเขียนมาแล้วในบทความก่อนๆ ลองเข้าไปศึกษาเป็นแนวทางกันได้ครับ

1. เปิดงานใหม่ขึ้นมา ตั้งค่าขนาดเลย์เอาต์และวินโดว์ตามต้องการ แต่สำหรับตัวอย่างในบทความนี้จะใช้ 854 x 480
2. เพิ่มเลย์เยอร์ 3 ชั้น ดังนี้

  • hud
  • word
  • bg

เลย์เยอร์ bg

3. เพิ่ม Sprite ตั้งชื่อว่า boxStand ตั้ง origin image point ที่กึ่งกลาง (Middle) ปรับขนาด เป็น 55 x 55 นำไปวางไว้นอกเลย์เอาต์

  •  เพิ่ม Instance Variable ดังนี้
    •  ประเภท Text ชื่อ characters ตั้งค่าเริ่มต้นเป็นว่าง
    • ประเภท Boolean ชื่อ overlap ตั้งค่าเริ่มต้นเป็น false

4. เพิ่ม Sprite ตั้งชื่อว่า boxRandom ตั้ง origin image point ที่กึ่งกลาง (Middle) ปรับขนาด เป็น 55 x 55 นำไปวางไว้นอกเลย์เอาต์

  • เพิ่ม Instance Variable ประเภท Number ชื่อ index ตั้งค่าเริ่มต้นเป็น 0

5. เพิ่ม Particles Object

  • ตั้งค่าคุณสมบัติดังนี้

6. เพิ่ม Text ชื่อ textVocab นำไปวางไว้นอกเลย์เอาต์ นำไปวางไว้นอกเลย์เอาต์

เลย์เยอร์ word

7. เพิ่ม Text ชื่อ textDrag นำไปวางไว้นอกเลย์เอาต์ นำไปวางไว้นอกเลย์เอาต์ ตั้งค่าคุณสมบัติดังนี้

  • ปรับขนาดเป็น 50 x 50
  • เพิ่ม Behaviors DragDrop
  • เพิ่ม Instance Variable
    • ประเภท Boolean ชื่อ overlap ตั้งค่าเริ่มต้นเป็น false
    • ประเภท Number ชื่อ start_X ตั้งค่าเริ่มต้นเป็น 0
    • ประเภท Number ชื่อ start_Y ตั้งค่าเริ่มต้นเป็น 0

8. เพิ่ม Sprite ตั้งชื่อว่า vocabImage เพิ่มรูปภาพลงในเฟรมต่างๆ ตามตำแหน่งของคำศัพท์

  •  ตั้งค่าคุณสมบัติของภาพเคลื่อนไหว ดังนี้

9. เพิ่ม Button Object ตั้งค่าคุณสมบัติดังนี้

เลย์เยอร์ hud

10. เพิ่ม Text ชื่อ textRemain นำไปวางไว้ด้านบนซ้ายของเลย์เอาต์ สำหรับแสดงจำนวนตัวอักษรที่วางถูกตำแหน่งในครั้งแรก และตัวอักษรที่เหลือของคำศัพท์นั้น

11. เพิ่ม Text ชื่อ textScore นำไปวางไว้ด้านบนขวาของเลย์เอาต์ สำหรับแสดงคะแนนทั้งหมด

12. จัดวางวัตถุต่างๆ บนเลย์เอาต์ดังรูป

13. จัดเตรียมไฟล์ JSON ของคำศัพท์ตามรูปในเฟรมของ Sprit animation ดังนี้

"{""c2array"":true,""size"":[13,1,1],""data"":[[[""zebra,0""]],[[""owl,1""]],[[""bear,2""]],[[""giraffe,3""]],[[""tiger,4""]],[[""lion,5""]],[[""monkey,6""]],[[""elephant,7""]],[[""fox,8""]],[[""squirrel,9""]],[[""rhino,10""]],[[""rabbit,11""]],[[""raccoon,12""]]]}"

เท่านี้เราก็พร้อมที่จะทำเกมสะกดคำศัพท์กันแล้ว ในบทความหน้าเราจะมาเรียนรู้การเขียนคำสั่งในการควบคุมวัตถุต่างๆ กันครับ

ตัวอย่างเกมที่ทำเสร็จแล้ว https://semicon.github.io/spelling/

ตัวอย่างการสร้างวัตถุแบบอัตโนมัติ https://drive.google.com/forloopcreateobject

พบกันใหม่ในบทความหน้า

สวัสดีครับ!