แก้ปัญหาไพ่นกกระจอกออนไลน์ตายตัว ด้วยการสร้างกระดานย้อนกลับจากทางออก
เจาะเบื้องหลังการพัฒนาเกมไพ่นกกระจอกโซลิแทร์ที่รับประกันว่าเล่นจบได้ทุกตา พร้อมเทคนิคดึงภาพ SVG จากฟอนต์ Noto Sans Symbols 2 และสแต็กเทคโนโลยีแบบไม่ใช้เฟรมเวิร์ก
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- เกมไพ่นกกระจอกโซลิแทร์ทั่วไปมักสุ่มแจกกระดาน 144 ใบ ทำให้ผู้เล่นเจอทางตันบ่อยครั้ง
- นักพัฒนาแก้ไขด้วยวิธีสร้างเฉลยก่อน แล้วถอยหลังเพื่อสร้างกระดานที่แก้ได้จริงเสมอ
- ใช้ฟอนต์ Noto Sans Symbols 2 ดึงลายเส้น SVG มาใช้แทนบล็อกอักษรยูนิโคดที่แสดงผลไม่ครบ
- สแต็กเทคโนโลยีใช้งานวานิลลา PHP, วานิลลา JavaScript และ SQLite โดยไม่มีการใช้ npm
การเล่นไพ่นกกระจอกโซลิแทร์ (Mahjong Solitaire) คือการจับคู่ไพ่ที่เหมือนกันออกจากกองไพ่ 144 ใบ โดยไพ่ที่จะหยิบได้ต้องเป็นไพ่ที่ไม่มีอะไรทับซ้อนอยู่ด้านบน และมีด้านยาวด้านใดด้านหนึ่งเปิดโล่ง ทว่าวิธีการแจกไพ่ตามปกตินั้นมักจะสร้างปัญหาให้กับผู้เล่นในท้ายที่สุด
แนวทางทั่วไปคือการสุ่มสับไพ่ทั้ง 144 ใบแล้วทิ้งลงบนกระดาน ซึ่งวิธีการนี้มักนำไปสู่กระดานที่ไม่สามารถเล่นให้จบได้ เนื่องจากไพ่ 4 ใบท้ายอาจถูกฝังทับซ้อนกัน หรือไพ่คู่สุดท้ายถูกล็อกไว้ในตำแหน่งที่ไม่สามารถเปิดออกได้พร้อมกัน ผู้เล่นมักจะรู้ตัวก็ต่อเมื่อผ่านไปแล้ว 20 นาทีและพบว่าไม่มีคู่ให้เดินต่ออีกแล้ว
ทางแก้ของปัญหานี้จึงไม่ใช่การสร้างกระดานขึ้นมาก่อนแล้วค่อยตรวจสอบ แต่เป็นการสร้างคำตอบหรือทางออกขึ้นมาก่อน จากนั้นจึงถอดรหัสย้อนกลับมาเป็นกระดานที่สอดคล้องกัน วิธีการนี้ทำให้มั่นใจได้ว่ามีทางออกที่สมบูรณ์รออยู่ก่อนที่ผู้เล่นจะเริ่มแตะไพ่เสียด้วยซ้ำ
การสร้างเกมพัซเซิลโดยใช้หลักการย้อนกลับจากทางออก (Reverse Generation) ถือเป็นเทคนิคสำคัญในวงการพัฒนาเกมแนวนี้ ช่วยขจัดความหงุดหงิดของผู้เล่นที่ต้องแพ้เพราะดวงกุดจากกระดานที่ถูกสุ่มมาแบบไร้ทิศทาง สะท้อนให้เห็นว่าการออกแบบระบบตั้งแต่ต้นน้ำมีความสำคัญต่อประสบการณ์ใช้งานของผู้เล่นปลายทางเป็นอย่างมาก
ในกรณีที่ระบบสำรองทั้ง 60 แบบเกิดล้มเหลว โค้ดจะมีฟังก์ชันสำรองที่จับคู่ตำแหน่งที่อยู่ติดกัน ซึ่งอาจทำให้ได้กระดานที่ไม่การันตีทางออก แต่ฟังก์ชันนี้ไม่เคยถูกใช้งานจริง เนื่องจากนักพัฒนาเลือกเก็บไว้เผื่อกรณีฉุกเฉินเพื่อให้ผู้เล่นยังคงเห็นหน้าจอเกมแทนที่จะเป็นหน้าจอว่างเปล่า
สำหรับการแสดงผลตัวไพ่ แม้มาตรฐานยูนิโคดจะมีบล็อกไพ่นกกระจอกในช่วง U+1F000–U+1F02B แต่ฟอนต์เริ่มต้นบนระบบ Windows และ Android หลายตัวกลับแสดงผลไม่สมบูรณ์ นักพัฒนาจึงเลือกใช้กราฟิกแบบ SVG แทน
ชุดภาพริอิจิมาจอง (Riichi Mahjong) แบบสาธารณะ (CC0) ครอบคลุมหน้าไพ่ 33 จาก 42 แบบ แต่วิธีนี้ไม่มีไพ่ดอกไม้ ไพ่ฤดูกาล และมังกรขาว นักพัฒนาจึงดึงโครงร่างออกมาจากฟอนต์ Noto Sans Symbols 2 โดยใช้เครื่องมือ fontTools
กระบวนการนี้ทำให้พบความน่าสนใจสองประการ อย่างแรกคือแต่ละกลายร่างของฟอนต์จะมีกรอบขอบไพ่มาให้ด้วย ซึ่งเส้นขอบด้านนอกและด้านในนี้เหมือนกันทุกประการในไพ่โบนัสทั้ง 8 ใบ เมื่อลบเส้นขอบเหล่านั้นออก ก็จะได้ภาพวาดด้านในที่สะอาดตา และการใช้กล่องขอบเขตของคอนทัวร์ที่ 2 ยังช่วยให้สามารถปรับขนาดหน้าไพ่แต่ละใบได้อย่างเหมาะสม
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
นอกจากนี้ ตัวอักษรขนาดเล็กที่มุมซ้ายบนของหน้าไพ่ (เช่น 梅 สำหรับดอกเหมย หรือ 春 สำหรับฤดูใบไม้ผลิ) ยังสามารถแยกออกจากภาพวาดหลักได้ ทำให้สามารถกำหนดสีของภาพวาดและตัวอักษรแยกออกจากกันได้ แม้จะมาจากฟอนต์แบบสีเดียวก็ตาม
ในด้านสแต็กเทคโนโลยี ระบบนี้เลือกใช้ PHP แบบวานิลลา, JavaScript แบบวานิลลา และฐานข้อมูล SQLite โดยไม่มีการใช้เฟรมเวิร์ก ไม่มีขั้นตอนการคอมไพล์ และไม่มี npm เข้ามาเกี่ยวข้อง ทุกหน้าถูกเรนเดอร์จากฝั่งเซิร์ฟเวอร์ และใช้ JavaScript เพิ่มปฏิสัมพันธ์เฉพาะส่วนเท่านั้น ตัวบอดี้ของไพ่สร้างขึ้นด้วย CSS เพื่อให้เกิดมิติและเงา ส่วน SVG ทำหน้าที่เป็นหน้าไพ่เท่านั้น
โปรเจกต์นี้เปิดให้ทดลองเล่นจริงได้ที่ juju.games/mahjong สำหรับผู้ที่ต้องการพิสูจน์ความท้าทาย
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น