Construct 2 : การสร้างเกมแนวการเขียนโปรแกรมแบบง่ายๆ (Coding games)

ในบทความนี้เราจะมาเรียนรู้พื้นฐานการสร้างเกมแนวการเขียนโปรแกรมแบบง่ายๆ เพื่อให้เด็กได้เรียนรู้วิธีการเรียงลำดับคำสั่ง  และการกำหนดกระบวนการต่างๆ ซึ่งมีวิธีเล่นที่ไม่ซับซ้อน เพียงแค่วางสัญลักษ์ที่ให้มาแล้วกดปุ่มรัน เพื่อให้ตัวละครเคลื่อนที่ไปตามคำสั่งที่วางไว้

ขั้นตอนการสร้าง

1. เพิ่ม Tiled background ชื่อ bg ตั้งขนาดของวัตถุ 50 x 50

2. เพิ่ม Sprite base ขนาด 50 x 50 จำนวน 2 เฟรม

  • ตั้งจุด Origin ไว้ตำแหน่งกึ่งกลาง
  • ตั้งค่า Animation speed เป็น 0

  • เพิ่ม Instance variable ประเภท Number ชื่อ index กำหนดค่าเริ่มต้นเป็น 0

  • คัดลอก base ตามจำนวนที่ต้องการ และจัดวางไว้ในตำแหน่งที่ต้องการ

  • กำหนดค่าของตัวแปร Index ของวัตถุ base แต่ละชิ้น เรียกลำดับตัวเลขดังรูป

3. เพิ่ม Text ชื่อ TextStep ปรับรูปแบบและขนาดของตัวอักษรตามต้องการ คัดลอกตามจำนวนที่ต้องการ จัดวางตำแหน่งดังรูป

4. เพิ่ม Sprit ชื่อ player และตั้งจุด Origin ไว้ตำแหน่งกึ่งกลาง

5. เพิ่ม Sprit ชื่อ forward และตั้งจุด Origin ไว้ตำแหน่งกึ่งกลาง

  • เพิ่ม Instance variable ประเภท Number ชื่อ index กำหนดค่าเริ่มต้นเป็น 0
  • เพิ่ม Instance variable ประเภท Text ชื่อ name กำหนดค่าเริ่มต้นเป็น forward

6. เพิ่ม Sprit ชื่อ turnL และตั้งจุด Origin ไว้ตำแหน่งกึ่งกลาง

  • เพิ่ม Instance variable ประเภท Number ชื่อ index กำหนดค่าเริ่มต้นเป็น 0
  • เพิ่ม Instance variable ประเภท Text ชื่อ name กำหนดค่าเริ่มต้นเป็น turnLeft

7. เพิ่ม Sprit ชื่อ turnR และตั้งจุด Origin ไว้ตำแหน่งกึ่งกลาง

  • เพิ่ม Instance variable ประเภท Number ชื่อ index กำหนดค่าเริ่มต้นเป็น 0
  • เพิ่ม Instance variable ประเภท Text ชื่อ name กำหนดค่าเริ่มต้นเป็น turnRight

8. เพิ่ม Behaviors Drag and Drop ให้กับ Sprit ชื่อ forward, turnL, turnR

9. เพิ่ม Button ชื่อ runBtn ลงบนเลย์เอาต์ และเปลี่ยน  Text จาก Button เป็น RUN

10. เพิ่ม Object Function ลงบนเลย์เอาต์

11. เพิ่ม Object Array ลงบนเลย์เอาต์

12. แนวการจัดวางตำแหน่งวัตถุต่างๆ บนหน้าเลย์เอาต์

ขั้นตอนการเขียน Event Sheet ควบคุมการทำงานของวัตถุบนเลย์เอาต์

  • สร้างตัวแปรสาธารณะ 2 ตัวแปร คือ
    • ชื่อ arrayWidth เป็นตัวแปรประเภท Number ตั้งค่าเริ่มต้นเป็น 0 ตัวแปรนี้ใช้สำหรับเก็บค่ากำหนดขนาดของอาร์เรย์
    • ชื่อ step เป็นตัวแปรประเภท Number ตั้งค่าเริ่มต้นเป็น 0 ตัวแปรนี้ใช้สำหรับเก็บค่าลำดับขั้นการทำงานของโปรแกรม

  • Event 1 ตั้งค่าความกว้างของอาร์เรย์ตามการเปลี่ยนแปลงของตัวแปร arrayWidth
  • Event 2 กำหนดตำแหน่งของ TextStep ให้อยู่ตำแหน่งเดียวกับ base

  • Event 3 – 4 เมื่อแตะที่รูปสัญลักษณ์ต่างๆ จะสร้างวัตถุนั้นขึ้นมา สำหรับนำไปวางไว้ที่ base
    • นำค่าจาก arrayWidth เข้ามาเก็บในตัวแปร index ของสัญลักษณ์
    • สร้างวัตถุสัญลักษณ์จากวัตถุที่แตะ

  • Event 6-8 ควบคุมการลากวางสัญลักษณ์บน base ถ้าเป็นไปตามเงื่อนไขจะดำเนินการดังนี้
    • เพิ่มค่าให้กับ arrayWidth
    • ปรับตำแหน่งของสัญลักษณ์ให้อยู่ตำแหน่งเดียวกับ base
    • ย่อขนาดของสัญลักษณ์ลง
    • กำหนดให้สัญลักษณ์อยู่ในตำแหน่งคงที่
    • หน่วงเวลา 0.5 วินาที
    • เก็บค่าชื่อของสัญลักษณ์ลงในอาร์เรย์

  • Event 9-11 ถ้าวางสัญลักษณ์ผิดตำแหน่ง (ไม่อยู่บน base) สัญลักษณ์จะถูกทำลายทิ้ง

  • Event 12-14  ฟังก์ชั่นกำหนดการเคลื่อนที่ของวัตถุในลักษณะต่างๆ ซึ่งแต่ละลำดับขั้นจะหน่วงเวลา 1 วินาที

หมายเหตุ โดยที่มาของชื่อฟังก์ชั่น จะนำมาจาก Instance variable ชื่อ name ของสัญลักษณ์ forward, turnL และ turnR นำมาตั้งเป็นชื่อของฟังก์ชั่น จำเป็นต้องพิมพ์ให้เหมือนกันทุกตัวอักษร เพราะต้องนำไปอ้างอิงกับอาร์เรย์

  • สัญลักษณ์ forward

  • สัญลักษณ์ turnL

  • สัญลักษณ์ turnR

  • Event 15-17 ฟังก์ชั่นทดสอบการทำงานของโปรแกรมและแสดงลำดับขั้นการทำงานของโปรแกรม โดยใช้อาร์เรย์เป็นตัวควบคุมลำดับขั้นการทำงาน
  • Event 18 เมื่อคลิกปุ่ม RUN จะเรียกใช้ฟังก์ชัน run

หวังว่าคงเป็นประโยชน์สำหรับทุกท่านที่สนใจ หรือกำลังศึกษาอยู่ นะครับ

แล้วพบกันใหม่ในบทความต่อไป

สวัสดีครับ