สวัสดีผู้อ่านครับ บล็อกนี้จะบันทึกการทำเกมจับคู่ ที่ผมเขียนเล่นๆด้วย Flutter ครับ เกมจับคู่ในที่นี้คือเกมจับคู่แบบเดียวกับเกมจับคู่โปรเกมอน เกมนี้น่าจะรู้จักกันดีในวงการพนักงานออฟฟิศรุ่นใหญ่ๆหน่อย เช่น คุณแม่ของผม ถ้าใครยังไม่รู้จักก็ไม่เป็นไรครับ เดี๋ยวจะอธิบายวิธีเล่นให้ ซึ่งผมก็ไปหาข้อมูลมาพบว่าจริงๆเกมนี้มันชื่อ Onet

วิธีการเล่น

กติกาก็ง่ายมาก เกมจะมีรูปสัตว์ต่างๆ เรียงกันแบบตาราง เราก็แค่เลือกรูปที่เหมือนกัน โดยที่รูปที่จะคู่กันได้นั้นจะต้องสามารถลากเส้นไปหากัน และเลี้ยวได้สูงสุด 2 ครั้งเท่านั้น ดังนั้นจะมีกรณีที่จับคู่กันได้หลักๆ 5 แบบ

เริ่มต้น

ที่ผมทำเกมนี้ใน Flutter เพราะว่าผมอยากลองเล่นเรื่องการวาดเส้น หรือการใช้ Painter ของ Flutter นั่นเอง

เอาล่ะ เกมจับคู่เวอชัน Flutter นี้ เมื่อเข้ามาก็จะเป็นเมนูเกม โดยผมทำตัวเลือกไว้ 3 โหมด คือ Colors , Animal , People

ลองเล่นโหมด Colors ก่อน ก็คือจับคู่สีนั่นเอง

โดยผมก็ทำปุ่มกดให้สามารถสุ่มตารางใหม่ จะกดได้ 2 ครั้ง

โหมดที่ 2 Animal ก็เปลี่ยนมาเป็นรูปสัตว์แทน

โหมด people จะเป็นไอคอนรูปคน ซึ่งรูปจะเยอะกว่าโหมดอื่นนิดหน่อย

หลักการทำงาน

อธิบายหลักการทำงานแบบง่ายๆ จากกรณีหลักๆของการจับคู่ แบบที่อยู่ติดกัน หรือทั้งคู่อยู่ที่ขอบ จะง่ายที่สุด เพราะเช็คได้จากตำแหน่งได้เลย แบบที่ซับซ้อนขึ้นมาหน่อย คือกรณีเลี้ยว 1 ครั้ง วิธีการคือ ก็ให้ลูปทั้ง 4 ทิศของทั้งสองบล็อก คือต้นทางกับปลายทาง วิ่งไปตามช่องว่างจนเจอบล็อกหรือออกนอกกรอบ หากเราสามารถหาได้ว่าเส้นทางของทั้งคู่ตัดกัน ก็จะจับคู่กันได้

แบบนี้ก็จะจับคู่กันได้ แบบ 1 เลี้ยว แบบนี้

แบบที่ยากที่สุดในเกมนี้ คือแบบ 2 เลี้ยว วิธีการก็คล้ายแบบเดิมคือ ลูปวิ่งไปตามทางว่าง ซึ่งแน่นอนว่าทั้งคู่จะไม่ตัดกัน

จากนั้นเราต้องเก็บตำแหน่งของช่องทางวิ่งของบล็อกต้นทาง (ในตัวอย่างสมมุติเป็นตัวล่างซ้าย) จากนั้นก็ใช้ช่องเหล่านั้นวิ่งไปในทิศทางตรงข้าม หากเจอเส้นทางของบล็อกปลายทาง ก็แสดงว่าจับคู่กันได้ ในรุปตัวอย่างจะเห็นว่าสามารถลากเส้นปะ หากันได้ 3 แบบ

ได้แล้วจ้า จับคู่แบบ 2 เลี้ยว

สำหรับการลากเส้นของบล็อก ผมใช้วิธีเก็บข้อมูลเป็น array 2 มิติ โดยเว้นขอบนอกให้ว่างไว้สำหรับกรณีวาดเส้นของด้านนอก

จากนั้นเมื่อเราจับคู่กันได้ เราจะได้จุดตำแหน่งของการวาดเส้น ผมเรียก a b c d หากกรณีที่มี 2 เลี้ยว ก็จะมีครบทุกอัน โดยใช้ painter ของ Flutter บอกว่าให้วาดจากจุด a ไป b โดยเราจะคำนวณ margin และ size ของบล็อกให้เรียบร้อยเพราะว่า painter จะใช้ offset เป็นตัวกำหนดตำแหน่งการวาดเส้นนั่นเอง

จบแล้ว

จบแล้ว ก่อนจะจบ จะบอกว่าจริงๆแล้วผมเคยเขียนเกมนี้ เป็น Windows 10 App มาแล้ว นับจากตอนนี้ก็ราวๆเกือบๆ 3 ปีก่อน โดยทำให้คุณแม่ของผมเล่นเอง โดยในบทความนั้นก็มีอธิบายหลักการทำงานของเกมที่ผมใช้ในตอนนั้นครับ และในเกมนี้ก็ยังใช้วิธีการเหมือนเดิมครับ

นับว่าเป็นเกมจับคู่โดย Flutter เขียนสบายมาก เพราะผมเคยเขียนในแอปตัวก่อนแล้ว แต่ก็ทำให้ได้ลองเล่น Painter ของ Flutter จริงๆ สำหรับตอนนี้ เกมยังขาดส่วนของจับเวลา แล้วก็ยังไม่มีหน้าจอจบเกม แถมยังสุ่มแบบตรงๆอีกด้วย ทำให้ตอนนี้ถ้าเล่นกันจริงๆ ก็อาจจะจับคู่ไม่ได้ เพราะบางรูปอาจสุ่มออกมาเป็นจำนวนคี่ ฮ่าๆ

Source code ที่ Github
https://github.com/benznest/flutter-matching-game