web analytics

Flutter Project : สร้างเกม Sudoku ด้วย Flutter

cover

สวัสดีครับ จากบล็อกตอนที่แล้ว ผมได้เขียนเกมงู เขียนด้วย Flutter  ครับ โดยผมจะพยายามทำโปรเจค Flutter แบบเบาๆเล่นๆ สนุกๆคลายเครียดครับ เป็นการเรียนรู้ flutter ไปด้วย บล็อกนี้ถึงคิวของเกม Sudoku ครับ เพราะอยากลองทำโปรเจคเกี่ยวกับ Draggable (การลาก-วาง) ครับ ซึ่งผมก็ได้ศึกษาแล้วก็เขียนบล็อกเรื่อง draggable ไปแล้ว แต่เพื่อให้เข้าใจมากขึ้น เลยอยากลองนำมาใช้กับแอปจริงๆสักหน่อย ก็เลยทำโปรเจคนี้ แล้วก็เขียนบันทึกการทำแอปนี้ไปด้วยครับ

สรุปการทำ Draggable แบบพื้นฐานใน Flutter

Flutter Code : การทำลาก-วาง (Draggable) ใน Flutter

 

เกมงู  (The Snake Game) ด้วย Flutter ก่อนหน้านี้

Flutter Project : ทำเกมงู (Snake Game) ด้วย Flutter

 

เริ่มต้น

มาคิดคร่าวๆ เกี่ยวกับเกมก่อนครับ โดยเกม Sudoku นี้ ผมจะทำขนาด 9×9 โดยแบ่งย่อยเป็น 9 ส่วน โดยแต่ละส่วนจะมีขนาด 3×3 ซึ่งมันก็คือตารางแบบมาตรฐานที่เล่นกันบ่อยๆ

วิธีการที่ผมเลือกใช้คือ ผมจะไม่ใช้ array 2 มิติ ที่เก็บข้อมูลแบบ 9×9
ครั้งนี้ผมจะเก็บแบบ 4 มิติ คือ 3×3 ซ้อนกันเป็นตาราง 3×3 อีกที ที่ทำแบบนี้เพราะว่าจะได้แบ่งเขตแบบเท่าๆกันออกเป็น 9 ส่วน
แต่ละส่วนเรียกว่า SubTable ใน subTable แบ่งเป็นช่องๆ ที่เก็บตัวเลข ขอเรียกว่า channel โดยจะมีขนาด 3×3 ทั้งหมดทั้งมวลรวมกันเป็น Table

อันนี้คือแบบที่คิดเอาไว้ ไม่รู้คิดถูกคิดผิด เดี๋ยวมาดูกัน ฮ่าๆ

 

1

 

สร้างตาราง Sudoku

เตรียมตัวแปรค่าคงที่ เอาไว้ โดยจะเน้น subTable เป็นหลัก

 

สร้างคลาส Table กับ SubTable เพื่อเก็บข้อมูล
จากนั้นเขียยน method กำหนดค่าเริ่มต้น
Table กำหนด SubTable 3×3
แล้วใน SubTable กำหนด Channel 3×3 โดย channel แต่ละมีค่า 0-9 (0 คือไม่ไม่มีค่า)
ซึ่งตอนนี้ผมขอกำหนดเป็นค่า col เพราะเดี๋ยวจะลองเอาค่ามาแสดงในตาราง

 

เตรีมมค่าสีต่างๆ

 

ประกาศตวแปร Table

 

กำหนดค่าเริ่มต้นให้กับ Instance  ของ Table

 

ที build ก็วาด widget เป็นลักษณะคล้ายตารางตามที่ออกแบบไว้
คือแบ่งเป็น 9 ส่วนใหญ่ๆ

 

แต่ละส่วนของ Table ก็วาด 3 แถว

 

แต่ละแถววาด 3 column และแต่ละ column ขนาด 40×40

ได้ตารางแล้ว แบ่งเป็น 9 ส่วนแบบง่ายๆ

9

 

ทำแท็บตัวเลข

ขั้นตอนถัดมา มาทำแท็บตัวเลขด้านล่าง เพื่อจะได้สามารถลากตัวเลขไปใสในตาราง sudoku ได้
สร้าง method สำหรับ build widget แสดงแท็บตัวเลข 1-9 เรียงในแนวนอน

 

เอาไปแท็บไปไว้ด้านล่างของตาราง

8

 

แสดงค่าตัวเลขลงในช่อง

ทีนี้ มาเขียนส่วนการแสดงค่าของตัวแปร table ลงใน Widget
โดยแต่ละช่องมันก็คือ channel ก็แค่เพิ่ม Text เข้าไปใน Container ของมัน
โดยแยกเป็น 2 กรณีคือ กรณีค่าเป็น 0 จะแสดงพื้นเปล่าๆแทน ถ้ามีค่าก็แสดงตัวเลข

10

 

ลองเขียนให้ทำการสุ่มเลข 0-9 ลงใน table เพื่อให้เห็นว่า ค่า 0 จะแสดงช่องว่าง

11

 

เพิ่ม Draggable ให้กับตัวเลขในแท็บ

มาถึงส่วนยากของเกม คือส่วนของการลากตัวเลขไปใส่ในตาราง จริงๆก็ไม่ยากถ้าทำด้วย Flutter นะ
เริ่มจากใส่ Draggable ให้กับ Container ทั้ง 9 ตัวของแท็บตัวเลข ซึ่งเจ้า Draggable มันต้องกำหนด
child คือ Widget ที่แสดงตอนยังไม่ได้ทำการลาก
feedback คือ Widget ขณะกำลังลาก
ซึ่งทั้งสองอย่าง ในกรณีที่เราทำอยู่ มันแสดงผลเหมือนกัน ดังนั้น เราก็แยกออกมาเป็น method

 

ทีนี้จะสามารถลาก ตัวเลขจากแท็บด้านล่างได้แล้ว

a1

 

แต่ยังไม่สามารถนำค่ามาใส่ในตารางได้ นั่นก็เพราะเรายังไม่ได้ผูก Target กับ Channel ในตารางนั่นเอง
ดังนั้นเราจะต้องทำการใส่ Target ให้กับ channel ทั้งหมด

ขอเริ่มจากล้างค่าในตารางออกให้หมด เป็นค่า 0

8

 

ต่อมาก็ใส่ DragTarget ให้กับ Container แต่ละ channel
การใช้งาน DragTarget คือ กำหนด
builder = Widget ที่จะแสดงตามปกติ หรือขณะมีอะไรผ่าน เช็คได้ด้วย candidateData โดยกรณีของเราคือแสดงช่องว่างเปล่าๆปกติ
onWillAccept = เช็ค data ว่าใช่ที่ต้องการหรือไม่ กรณีของเรา ข้อมูลคือตัวเลข 1-9
onAccept = เมื่อ data เป็นตามที่ต้องการแล้วให้ทำอะไร กรณีของเรา คือเปลี่ยนค่าในตาราง table เป็นข้อมูลที่ส่งมา

คำถามคือ จะอัพเดทข้อมูลใน table ยังไง ในเมื่อ method นี้ ไม่รู้อะไรเลยนอกจาก ตัวเลขและสี

 

มันก็แก้ได้หลายวิธีนะ เช่นส่งค่าตำแหน่งเข้ามาใน channel นี้เลย แต่ทว่าผมใช้การเก็บข้อมูลแบบ 4 มิติ
ถ้าส่งเข้ามาก็ดูจะยุ่งยากไปหน่อย ผมขอเลือกใช้วิธีทำ mehod callback ละกัน

 

จากนั้น พอได้ callback มาแล้ว ที่ buildRowChannel มีข้อมูลเพียงพอจะเข้าถึงตำแหน่งใน table ได้แล้ว ซึ่งต้องใช้ 4 ค่า พร้อมกับทำใน setState

 

ตอนนี้สามารถ ลากตัวเลขในแท็บมาใส่ในตารางได้แล้ว

a2

 

เพิ่ม Draggable ให้กับตัวเลขในตาราง

ตอนนี้เราลากตัวเลขในแท็บมาใส่ในตารางได้ แต่ยังลากตัวเลขในตารางไปในตำแหน่งอื่นๆ เพื่อย้ายตำแหน่งไม่ได้
วิธีการ คือ ใส่ Draggable ให้กับ Channel ในกรณีที่มันมีค่า > 0 ดังนั้นพอมันมีค่าใน channel มันก็จะลากได้

 

ลากได้แล้ว แต่ยังย้ายไม่ได้ เพราะยังไม่ได้ผูกกับ Target นั่นเอง

a3

 

วิธีการผูกกับ Target นั้นง่ายนิดเดียว มันคือการเพิ่ม data ลงไป แค่นี้!!
เพราะว่า channel เปล่าๆมันมี DragTarget ที่เราทำไว้สำหรับรอตัวเลขจากแท็บอยู่แล้ว
ซึ่งเงื่อนไขที่มันจะยอมรับคือตัวเลข 1-9 ซึ่งกรณีนี้ก็คือ 1-9 ดังนั้นก็ใช้ร่วมกันได้เลย ง่ายจัง

 

ตอนนี้ย้ายเลขในตารางได้แล้ว แต่ตำแหน่งเดิมของมันยังมีค่าเดิมค้างอยู่ ยังไม่ได้ถูกลบออกไป

a4

 

วิธีการคือต้องไปกำหนดค่า 0 ให้กับตำแหน่งเดิมใน table
ก็ทำแบบเดียวกับตอน numberAccept คือเพิ่ม callback สำหรับลบ

โดยจะเรียกเมื่อ onDragComplete พูดง่ายๆก็คือพอลากแล้ววางเสร็จ (วางแล้วถูก Target Accept ด้วยนะ)

 

ที่ buildRowChannel พอ onRemove ถูกเรียกก็ทำการกำหนดค่า 0 ให้กับ table ในตำแหน่งที่ถูกลากออกไป

 

ทีนี้ การลากตัวเลขของเราในตารางก็ลื่นใหลแล้ว

a5

 

ทำ Draggable สำหรับลบตัวเลข

ต่อมาทำ ให้สามารถลบตัวเลขออกจากตารางได้ โดยจะลบเมื่อลากแล้วไปวางนอกตาราง
วิธีการ คือ เรียก onRemove ที่ทำไว้ก่อนหน้านี้ ที่ onDraggableCanceled จบเกม ง่ายโครต

a1

 

กำหนดค่าเริ่มต้นตาราง Sudoku

มาลองนำข้อมูลจากเกมจริงๆมาใช้บ้าง โดยปกติเกมจะมีตัวเลขเริ่มต้นมาให้ซึ่ง ตัวเลขนี้จะขยับไม่ได้

พอถึงตรงนี้แสดงว่า channel เราจะเก็บแค่ค่า int ไม่ได้แล้ว มันต้องมากกว่านั้น
ผมเลย สร้าง class SudokuChannel ขึ้นมา

 

ดังนั้น SubTable จะเก็บค่าเป็น List<List<SudokuChannel>> แทน
แล้วก็เดี๋ยวเราต้องเพิ่มค่าเลขตอนเริ่มเกมลงใน SubTable ก็เขียน method setValue เตรียมไว้

 

ตัวเลที่เกมเริ่มมาให้จะขยับไม่ได้ ดังนั้นสีของ channel ก็ควรจะต่างกับ channel ปกติหน่อยนึง

 

วิธีการเช็คว่า channel นี้ขยับหรือสามารถลากได้มัย ก็แค่เช็คจาก enableMove

 

หลายจุดที่มีการกำหนดค่าใหม่ลงใน channel จะใช้แบบ int เฉยๆไม่ได้แล้ว ต้องใช้แบบ object Channel แทน
นี่แหละคือผลของการไม่วางแผน 5555

 

ต่อมาผมก็ไปหา ตารางเกม Sudoku จริงๆมา แบบนี้ จะลองเพิ่มตัวเลขเริ่มเกมลงไปในตาราง

13

 

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

 

เสร็จแล้วก็ init ใน initState()

 

มาแล้ว ตัวเลขเริ่มเกมที่ Fix กำหนดให้ขยับไม่ได้

14

 

ลองลากตัวเลขจากแท็บมาวาง ก็วางในตารางได้ปกติ

a2

 

เพิ่ม Draggable สำหรับทับช่องค่าเดิม

ปัญหายังมีต่อเนื่อง ตอนนี้เราไม่สามารถลากค่าในช่อง channel นึงไปทับช่อง channel นึงที่มีค่าอยู่แล้วได้ นั่นก็เพราะว่า channel ที่มีค่าอยู่มีแต่ Draggable ไม่มี DargTarget

เราก็แค่เพิ่ม DragTarget ครอบ Draggable อีกทีนึง นั่นก็หมายความว่าในกรณีนี้ มันสามารถลากก็ได้ แล้วก็เป็น target ได้ด้วยนั่นเอง

 

ลองลากค่าไป จะสามารถทับค่าอื่นได้แล้ว

a3

 

ทำเมนูเริ่มเกมใหม่

ทีนี้มาทำเมนู สำหรับ restart เริ่มเกมสักหน่อย โดยเมนูจะอยู่ด้านบน

เอาเมนูใส่ด้านบนของตาราง

 

ดูดีขึ้นมานิดนึง

15

ปุ่ม New game กดแล้วจะเริ่มเกมใหม่

การเริ่มเกมใหม่ก็แค่ initTable ใหม่เท่านั้นเอง

a9

 

 

ทำ Hover ขณะลากเมื่อตัวเลขมีค่าขัดกัน

โจทย์ต่อมา ยากขึ้นหน่อยนึง คือ ผมอยากทำให้ตอนเราลากตัวเลข ถ้าผ่านช่องว่างๆ ก็แสดงว่ามีตัวเลขที่เหมือนกันในแถวหรือคอลัมนั้นหรือไม่ ถ้ามีก็แสดงเป็นสีแดง channel นั้นออกเป้น waring มาลองทำกัน

เพิ่ม enableWarning ให้กับ class SudokuChannel

 

แล้วเพื่อให้แอปรู้ว่า ตอนนี้เรากำลังอยู่ใน mode ขณะลากเพื่อแสดง channel ได้ถูกต้อง

 

เพิ่ม callback 2 อันให้กับ channel คือ onHover , onHoverEnd
และเรียก onHover  ที่ onWillAccept ของ DragTarget กรณีที่เป็นช่องว่างเท่านั้น
ส่วน onHoverEnd เรียกที่ onLeave
สรุปก็คือตอนเราลากตัวเลขผ่านช่องว่าง มันจะเข้าไปที่ onWillAccept แล้วเรียก onHover แล้วพอเราลากผ่านช่องว่างไป มันจะเข้า onLeave แล้วไปเรียก onHoverEnd

 

ทีนี้ก็มาเขียน onHover , onHoverEnd ให้มันอัพเดทค่าของ enableWarning ใน table

เขียน method สำหรับทั้งสองกรณี
onHover จะแสดง warning อัพเดทเฉพาะ channel ที่มีค่าตรงกับ ตัวที่เรากำลังลากอยู่ เช็คเฉพาะแนวตั้งกับแนวนอนของ channel ที่ลากอยู่เท่านั้น (Conflict Mode = true)
onHoverEnd คืนค่า enableWarning เป็น false ให้กับทุก channel หมด  (Conflict Mode = false)

 

ทีนี้ก็กำหนด method ให้กับ callback ทั้งสองตัว

 

สร้าง method สำหรับค่าสี กรณี warning

 

ตอนนี้ Hover ทำงานแล้ว เมื่อลากผ่านช่องว่างก็จะ warning channel ที่มีค่าเหมือนกันในแถวและหลัก
แต่ว่า พอลากไปแล้ววางนอกตางราง ค่า warning ไม่ถูกลบออก

a7

 

ดังนั้นนอกจากต้อง เคลีย enableWarning = false ทั้ง table ตอน onHoverEnd แล้ว
ต้องทำกรณีที่ลากแล้วไปปล่อยนอกตาราง หรือลากแล้ววางด้วย ก็คือกรณี onDragEnd ให้เคลียเหมือนกัน

 

แก้ปัญหาไปอีก 1 อย่าง

a8

 

ทำ Responsive

ทำต่ออีกนิด มาลองเล่น responsive หน่อยละกันครับ
ปัญหาต่อมาคือ เกมตอนนี้ไม่รองรับหน้าจอขนาดอื่นๆ

เช่นเอาไปรันบนหน้าจอที่เล็กกว่า ก็จะมีส่วนที่เกินขอบจออกไป นั่นก็เพราะเราไป กำหนดค่าความกว้างไว้แบบคงที่ คือ 40

16

 

พอไปรันบน Tablet ก็มีปัญหา คือ ตารางมันเล็กไม่เหมาะกับขนาดจอ ตัวหนังสือก็เล็กด้วย

22

 

 

ดังนั้นเราจะมาทำ responsive กัน ให้แอปรองรับทั้งหน้าจอขนาดต่างๆ
เริ่มจากประกาศตัวแปรใน State ที่เก็บ size , fontscale

 

จากนั้นก็คำนวณ size ของ channel จากขนาดหน้าจอ ซึ่งผมเอาขนาดของจอด้านที่น้อยที่สุดมา หาร 9 เพราะ มันมี 9 ช่อง แล้วลบด้วยค่า padding ขอบต่างๆอีกนิดหน่อย แล้วแต่ความสวยงาม

 

แล้วก็เอา channelSize , fontScale ไปกำหหนดให้กับ Container ใน channel

 

 

ได้แล้วลองรันในจอขนาดเล็กก็ใช้งานได้แล้ว

17

 

ลองรันบน Tablet ก็แสดงผลแบบถูกต้องมากขึ้น แต่ถ้าจะเอาแบบสวยๆก็คงต้องไปกำหนด พวก padding margin ต่างๆสำหรับแต่ละขนาดหน้าจอ

แต่นี่งานหยาบเอาแค่นี้พอก่อน ฮ่าๆ

23a

 

จบแล้ว

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

หวังว่าบันทึกการทำแอปนี้ของผมจะมีประโยชน์กับผู้อ่านนะครับ

 

โค้ดทั้งหมดอยู่ที่ Github

https://github.com/benznest/sudoku_game_flutter