Construct 2 : เกมจับคู่ภาพ Memory Match Game แบบใช้ภาพคู่ที่ต่างกัน

สวัสดีครับ เนื่องจากมีเพื่อนสมาชิกได้ส่งลิงก์การสร้างเกมจับคู่ (Memory Match Game) ของ “ครูอภิวัฒน์”  มาให้ดู และสอบถามว่าต้องการสร้างเกมแบบตัวอย่างที่ให้ดู แต่ต้องการจับคู่ภาพที่ใช้รูปภาพต่างกัน เช่น ภาพสัตว์ กับภาพเท้าของสัตว์ พอจะแนะแนวทางในการทำให้ได้หรือไม่ คำตอบก็คือได้ครับ ขั้นตอนการสร้างก็ไม่ยุ่งยากอะไรมากนัก เรามาดูกันครับ
1. เปิดโปรเจ็กใหม่ขึ้นมา ตั้งค่าขนาดของวินโดวน์และเลย์เอาต์ตามต้องการได้เลยครับ ในบทความนี้ใช้ขนาด กว้าง 854 สูง 480 ครับ

2. เข้าไปตั้งค่ากริด โดยคลิกที่แถบ View แล้วตั้งค่า Grid width = 32 Grid height = 16

3. เพิ่ม Sprite ตั้งชื่อ Cardholder

  • ปรับขนาดของวัตถุ ให้มีความกว้าง และสูง 32 พิกเซล

  • เพิ่ม Instance Variable ชนิด Boolean ชื่อ overlapping ตั้งค่าเริ่มต้นเป็น False

  • ตั้งค่า Initial visibility เป็น Invisible

  • คัดลอก Cardholder จัดวางตามตำแหน่งต่างๆดังรูป โดยมีระยะห่างเท่ากับความสูงของ การ็ด

4. เพิ่ม Sprite ตั้งชื่อ Card

  • เปลี่ยนชื่อเอนิเมชั่นเป็น Back นำเข้าภาพด้านหลังของการ์ด

  • เพิ่มเอนิเมชั่นใหม่ ตั้งชื่อ Front นำเข้าภาพด้านหน้าของการ์ดจำนวน 12 ภาพ และจัดเรียงรูปภาพเป้น 2 ชุด คือ ชุดที่ 1 เฟรมที่ 0-5 และชุดที่ 2 เฟรมที่ 6-11 โดยจับคู่ภาพดังนี้ รูปภาพเฟรม 0 คู่กับเฟรม 6 , เฟรม 1 คู่กับเฟรม 7 ,เฟรม 2 คู่กับเฟรม 8 ,เฟรม 3 คู่กับเฟรม 9 ,เฟรม 4 คู่กับเฟรม 10 ,เฟรม 5 คู่กับเฟรม 11

  • ตั้งค่าความเร็วของเอนิเมชั่น เป็น 0

  • เพิ่ม Instance Variable ชนิด Number ชื่อ myNumber ตั้งค่าเริ่มต้นเป็น 0

  • เพิ่ม Behaviors Fade ให้กับ Card

  • ตั้งค่าคุณสมบัติของ Fade ดังรูป

  • นำ Card วางไว้นอกเลย์เอาต์

5. เพิ่ม Object Function และ Object Touch เข้าไปในโปรเจ็ก

6. เปิด Event Sheet ขึ้นมา

  • สร้างและกำหนดค่าของตัวแปรต่างๆดังนี้

7. การสร้างและสุ่มตำแหน่งของ Card

  • Event 1 ตั้งค่าเริ่มต้น และสร้าง Card ขึ้นมาเท่ากับจำนวนของ Cardholder
  • Event 2 วนซ้ำโดยมีจำนวนรอบเท่ากับจำนวน Card และเลือก Card ที่มี IID ตรงกับ หมายเลขรอบการวนซ้ำ
  • Event 3 สุ่มตำแหน่งการวาง Card โดยสุ่มจาก Cardholder ตั้งค่าตัวแปร myNumber ของ Card จากหมายเลขรอบการวนซ้ำ -1

8. ส่วนควบคุมการเปิดและปิด Card เมื่อแตะหลังภาพ

9. การแสดงผลตามค่าพารามิเตอร์ที่ได้รับ

  • CheckMatch(no) เมื่อผู้เล่นเปิดการ์ดสองใบไม่เหมือนกัน (ผลต่างระหว่าง firstCard กับ lastCard ไม่เท่ากับ 6)
  • CheckMatch(yes) เมื่อผู้เล่นเปิดการ์ดสองใบไม่เหมือนกัน (ผลต่างระหว่าง firstCard กับ lastCard เท่ากับ 6)

ที่มาของภาพ : ช่องYoutube..ครูอภิวัฒน์ “สอนสร้างสื่อ”

ดาวน์โหลดไฟล์ .capx : [Download Now ]

ขอให้สนุกกับการประยุกต์ใช้นะครับ

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