บทความนี้ขอบันทึกเรื่องของการทำแอปเกมให้คุณแม่ของผมเอง เรื่องมีอยู่ว่าคุณแม่ซื้อคอมเครื่องใหม่เป็น All in one พร้อม Windows 10  จึงอยากให้ผมโหลดเกมจับคู่โปเกมอนมาลงให้หน่อย หน้าตาเกมจับคู่โปเกมอนหลายๆคนคงคุ้นเคยดี เพราะมันเป็นเกมประจำคอมของออฟฟิศ (ออฟฟิศสมัยไหนไม่รู้) คุณแม่ผมเล่นคอมไม่เก่งนัก ก็พอพิมพ์งานได้ เข้าเว็บได้  และอ่านอีเมล

เกมโปเกมอนสมัย Windows XP ภาษาอังกฤษ เรียก onet

ซึ่งจริงๆเกมโปเกมอนค่อนข้างโบราณ แถมยังเล่นบน Windows 10 มักจะค้าง ผมก็เลย ปิ้งไอเดีย!! เห้ย แล้วทำไมเราไม่เขียนเองเลยละน่าจะไม่ยากเกินไปมั้ง ช่วงนี้ก็ว่างอยู่ด้วย จึงเป็นที่มาของโปรเจค เกมจับคู่สำหรับคุณแม่

เมื่อมีเป้าหมายแล้ว เตรียมพุ่งชนได้ !!

วิธีการเล่น

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

เริ่มต้น

เกมนี้ คุณแม่อยากเล่นบนคอมก็คงหนีไม่พ้นเกมบน Windows และ นี่มันยุคของ Windows 10 แล้ว ทำเป็น Universal Windows App ไปเลยดีกว่า แล้วเอาลง Windows store ด้วย ขำๆ แค่คิดก็สนุกละนะเนี่ย

นี่คือคอมของคุณแม่ครับ เดี๋ยวทำเสร็จแล้วต้องมาเทสที่เครื่องนี้

วางแผน

เริ่มจากตั้งชื่อแอปก่อนละกัน ผมเอารูปสัตว์แทนรูปโปเกมอน มันหาง่ายดี และตั้งชื่อโปรเจคว่า Match Animal
แต่เวอร์ชันสำหรับให้คุณแม่เล่นจะตั้งชื่อว่า “เกมจับคู่สำหรับคุณแม่”

ผมแบ่งงานเป็น 4 ส่วน และเริ่มทำทีละส่วน

1. ส่วนแสดงผลรูปสัตว์

คือการนำรูปมาเรียงๆกัน เบื้องต้นผมหารูปมาได้ 13 รูป ใช้ขนาดตาราง 16×8 จะได้ทั้งหมด 64 คู่ หรือ 128 ตัว
ซึ่งก็ขนาดพอๆกับเกมจับคู่โปเกมอนเดิม จากนั้นเขียนให้ทำการหยิบสุ่ม ลงไป 64 คู่พร้อมกับใส่รูปในช่องตาราง

2. ส่วนโปรแกรมประมวลผล

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

3. ส่วนแสดงเส้น

พอเลือกแล้ว ประมวลผลว่า ผ่าน ก็ต้องแสดงเส้นออกมา มีคำนวณการพลอตเส้นบอกจอนิดหน่อย

4.ส่วนเสริมอื่นๆ

พอทำ 3 ส่วนแรกเสร็จแล้วก็ มาทำที่เหลือ ก็คือตัวจับเวลา ใส่เสียง effect ต่างๆ

ลงมือทำ

เริ่มทำทีละส่วน เปิด Visual studio แล้วเขียนเลย ผมเขียนใน notebook ของผมเอง ทำไปทีละส่วนตามที่ตั้งใจไว้
ส่วนที่ยากที่สุดคือ ส่วนที่สองที่ใช้เวลาเกือบ 2 วัน ทำไปทดสอบไป ไม่ได้จับ C# สักพักนึง พอมาเขียนอีกรอบก็เพลินดีเหมือนกัน เปิด google เพลินเลย

อธิบายหลักการทำงานง่ายๆ

จะรู้ได้อย่างไรว่า รูปที่ผู้เล่นเลือก คือคู่ที่ถูกต้องตามกติกา

ไม่รู้ว่ามีทฤษฏีเรื่องนี้โดยเฉพาะรึปล่าว เพราะผมก็หา algorithm ไม่เจอ เลยคิดเอาตามความเข้าใจ ผมเริ่มจากลากเส้นจากตัวที่เลือกสองตัว ในแนวตั้งและแนวนอน จนถึงบล็อกตัวอื่นหรือจนสุดกระดาน ลองเอากรณีที่ยากที่สุด คือ  เส้นไม่ตัดกัน เช่น เส้นสีน้ำเงิน ก็ต้องพิสูจน์ให้ได้ว่าสามารถลากเส้นสีเหลือง ระหว่างสีน้ำเงินได้ โดยไม่มีบล็อกไหนขวางทางเส้นสีเหลืองได้ ดังนั้นพอลากเส้นได้แล้วก็จะได้เส้นที่หักศอก 2 ครั้ง ผมเรียกว่า case 2 corner
ส่วนกรณีที่เส้นตัดกันอยู่แล้วก็ถือว่าผ่าน เป็น case 1 corner ตัวอย่างคือ เส้นสีแดง

ซึ่งจะได้แบบนี้นั่นเอง

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

การทดสอบ

ผมสร้างกระดาน เอาไว้ทดสอบกรณีต่างๆ เพื่อให้แน่ใจว่ามันจะเล่นได้ถูกต้อง

ซึ่งการเล่นจริงๆ กระดานจะถูกสุ่มทั้งหมด
เสร็จแล้วก็เอาไปลองเล่นในเครื่องของคุณแม่ดู โดยวิธีการ side load แอปลงคอม ซึ่งเท่าที่เล่นคร่าวๆ ก็เล่นได้

มาลองทดสอบเล่นกัน

ไอคอนเกม ที่หน้า Start

อย่าลืมเป็นแอปบน Windows 10 นะ

หน้า Splash screen

ลองเล่น

หน้าจอเกมมีขนาด 1000 x 670

ในเกมไม่มีเมนูอะไร ยังไม่ได้ทำอะไรมากนัก เอาแค่เล่นได้ก่อนละกัน
จับเวลาเล่น 3 นาที ดูจาก progress bar ข้างบน ผมเล่นแล้ว 3 นาทีก็สามารถผ่านได้อยู่นะ ต้องมือไว และมีเทคนิคนิดนึง
ผมเล่น 3 รอบก็ผ่านได้ แบบหวุดหวิด

เอาให้คุณแม่เล่น

พอทำเสร็จแล้วก็เอาไปให้คุณแม่เล่น โดยผมเอาเกมไปลงไว้ตอนกลางวัน และคุณแม่จะมาเปิดคอมในตอนกลางคืน

คุณแม่ผมรู้สึกแปลกใจ ว่า ลูกทำเกมได้ด้วยเรอะ ??
คุณแม่สามารถเล่นได้ทันที ไม่ต้องสอนเล่น เพราะมันเล่นเหมือนเกมเดิมที่เคยเล่นนั่นเอง มีค้างตอนจบเกมบ้าง
ผมนั่งดู คุณแม่เล่นไปเกือบ 10 ตา ชนะแค่ครั้งเดียว (ส่วนใหญ่เกือบจะชนะ) คุณแม่บอกว่า 3 นาทีมันไวไปหรือป่าว
แล้วก็ทำไมมันไม่มีด่านอื่นเลย??

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

สรุปความต้องการเพิ่มเติม
เพิ่ม gravity ให้กับด่าน
เพิ่มรูปให้มันหลากหลาย
เพิ่มเวลาให้นานขึ้นเล็กน้อย

Match Animal update

พอให้คุณแม่เล่นแล้ว ผมก็นำเกมมาปรับปรุง เริ่มจากแก้ไขบัคค้างบ้างครั้งตอนจบเกม และเพิ่มรูปสัตว์เป็น 36 รูป จากเวอชันก่อนมีแค่ 13 รูป แต่ตอนเล่นก็ยังสุ่มมา 13 รูปเหมือนเดิม เพราะถ้ารูปมากเกินไปมันจะผ่านยาก

จากนั้นก็เขียนโปรแกรมเพิ่มให้รองรับ gravity เพิ่มอีก 2 แบบ คือ ซ้าย ขวา

ภาพด้านล่างคือ การทดสอบ Gravity ไปทางซ้าย และเพิ่มเวลาเล็กน้อยอีก 30 วินาที

ลองเล่นเวอร์ชันอัพเดท

หลักๆก็เพิ่มรูป แล้วก็เพิ่ม gravity โดย gravity ก็จะสุ่มมาอีกที

Map of Death

จริงๆ ยังขาดไปอีกส่วนหนึ่งคือ การป้องกันเรื่อง Map of Death (ผมตั้งชื่อมันเอง) มันก็คือ เล่นยังไม่จบแต่ไม่สามารถชนะได้ ลองนึกถึงกรณี เหลือ 2 คู่สุดท้ายแล้วมันดันไขว้กัน ทำให้ไม่สามารถผ่านได้

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

เรื่องนี้ไว้อัพเดทในอนาคต

ดาวน์โหลดบนWindows Store

ใครใช้ Windows 10 อยู่ ดาวน์โหลดไปลองเล่นได้เลยนะ

https://www.microsoft.com/store/apps/9NBLGGH42PL8

จบแล้ว

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

ขอบคุณที่ติดตามครับ