มาทำเกม 8 Puzzle ด้วย C# บน Visual Studio กันเถอะ

สวัสดีค่ะทุกๆคน พวกเรา ‘ครัปเช้ปปปป’

ทุกคนเคยเล่นเกมเรียงเลข 1–8 กันมั้ยคะ ที่เป็นแผ่นพลาสติกสี่เหลี่ยมจัตุรัสหาซื้อได้ตามร้านขายของเล่น หน้าตาแบบนี้

15 Puzzle Game

วันนี้เรามาสร้างมันบนคอมพิวเตอร์กันค่ะ แต่เป็นแบบ 8 Puzzle แทน

ขั้นแรก เปิดโปรแกรม Visual Studio 2019 สำหรับใครที่ยังไม่ไม่ได้ติดตั้งก็ติดตั้งให้เสร็จซะก่อน

โปรแกรม VIsual Studio 2019 ที่เราจะใช้เขียนเกม 8 Puzzle ในวันนี้

สร้างโปรเจกต์ใหม่ขึ้นมา เลือก Windows Form App (.NET Framework) เป็น Template ใช้ภาษา C# ในการเขียน

ตั้งชื่อโปรเจกต์ ในที่นี้เราใช้ชื่อเป็น ‘Puzzle’ เลือก Location ที่จะให้เก็บไฟล์ Project

เปิดมาจะเจอหน้า Design ทำการเปลี่ยนชื่อจาก ‘Form1’ เป็น ‘NumberPuzzle’ ชื่อเกมของเรา ทั้ง Head ของโปรแกรมและชื่อไฟล์ Code ของเรา

ตอนแรก โปรแกรมจะให้ชื่อไฟล์มาเป็น Form1

เปลี่ยนชื่อเป็น NumberPuzzle เรียบร้อย

สร้างตัว User Interface (UI) หรือหน้าจอที่ติดต่อกับผู้เล่นด้วย Toolbox ของ Visual Studio 2019

ใส่ Button เข้ามาเลย

หน้าจอ UI ของเรา

หลังจากผู้เล่นเรียงเลข 1–8 ได้แล้ว

หน้าจอของเราประกอบไปด้วย 3 ส่วน

ส่วน Button 9 ช่องสำหรับเรียงตัวเลข
ปุ่ม New Game สำหรับสุ่มเลขชุดใหม่
ส่วน Score สำหรับแสดงคะแนนของผู้เล่น

มาเริ่มโค้ดดิ้งกันเลย

ก่อนอื่นเราประกาศตัวแปร score สำหรับนับคะแนนของผู้เล่นก่อน

Int32 score = 0;

ตัวแปร score ต้องเป็นตัวแปรแบบ Global เพราะจะต้องใช้ในหลาย Method

ปุ่ม New Game ของเราจะทำหน้าที่ Shuffle ตัวเลขเพื่อเริ่มเกมใหม่ ดังนั้นเราจะสร้าง Method ที่ชื่อ Shuffle ขึ้นมาเพื่อทำหน้าที่สุ่มตัวเลข 1–8

Method Shuffle สำหรับสุ่มตัวเลข

ใน Method Shuffle ขั้นแรกจะสร้าง Array ที่มีขนาด 9 ช่องขึ้นมาก่อน จากนั้นจึงสุ่มเลข 1–8 มาเก็บไว้ในตัวแปรที่ชื่อ RN แล้วใช้ลูป For ในการเช็คว่าเลขที่สุ่มได้ซ้ำหรือยัง ซึ่งถ้าสุ่มแล้วไม่ซ้ำ โปรแกรมจึงจะนำตัวเลขที่สุ่มได้ไปใส่ใน Array ทำไปเรื่อยๆจนกว่าจะได้ตัวเลขครบทั้ง 8 ช่อง (ช่องที่ 9 เป็นช่องว่าง)

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

Method CheckButton สำหรับย้ายตำแหน่งตัวเลขไปที่ช่องว่าง โดยมี Paramiter สองตัว ตัวแรกคือตัวที่ผู้เล่นClick เข้าไป อีกตัวคือตัวที่อยู่ข้างๆ

สร้าง CheckButton เสร็จแล้วเราจะสร้าง Method ที่ชื่อว่า CheckSolved สำหรับเช็คว่าผู้เล่นเรียงเลข 1–8 ได้ถูกต้องตามลำดับหรือยัง หากเรียงได้แล้ว ตัวแปร score จะเพิ่มค่าและโปรแกรมจะขึ้น Messagebox แจ้งเตือน และให้ผู้เล่นสุ่มเลขเพื่อเล่นอีกครั้ง

แต่ มีกรณีที่ไม่สามารถเรียง 1–8 ได้ตามลำดับ โปรแกรมจะขึ้น Message ว่า No Solution และทำการสุ่มตัวเลขชุดใหม่ให้ผู้เล่น

Method CheckSolved สำหรับเช็คผลลัพธ์ของผู้เล่น

จากนั้นเปิดหน้า Design แล้ว Double-Click Button 1 เพื่อเขียนคำสั่งหลังของแต่ละ Button

private void button1_Click(object sender, EventArgs e)        
{            
     //Button 1 : Button 2 , 4             
       CheckButton(button1, button2);            
       CheckButton(button1, button4);            
       CheckSolved();        
}

หลังจากนั้นทำให้ครบทุก Button ของโปรแกรม

เรียกใช้ Method CheckButton และ CheckSolved โดย Method CheckButton ต้องใส่ Paramiter ตัวแรกเป็นตัวที่ผู้เล่นกด ตัวที่สองเป็นตัวรอบข้าง

Code เต็มๆของส่วน Click_Button

หลังจากทำครบทุก Button ตั้งแต่ 1–9 แล้ว เราจะเขียนคำสั่งของ Button ‘New Game’ ที่เราสร้างไว้ตอนแรก

private void button10_Click(object sender, EventArgs e)
{       
       Shuffle();      
}

เรียกใช้ Method Shuffle เพื่อสุ่มตัวเลขชุดใหม่สำหรับเล่นอีกครั้ง

เสร็จแล้ว เกม 8 Puzzle ด้วย C# บน Visual Studio ของเรา !

โค้ดเต็มๆ :

Reference :
Create Shuffle Game in asp.net with c#.
Nine Block Shuffle Game in C# Dot Net.

สมาชิกครับเช้ปปปป

เรียงจากซ้ายไปขวา

1.เกษราภรณ์ โคเฟื่อง 62050130
2.ชญานิษฐ์ กิติประวัติ 62050139
3.ฐิติรัตน์ ผสมทรัพย์ 62050147
4.ณัฐฑริกา ทองแถม 62050154