web analytics

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

cove

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

ก่อนหน้านี้เป็น เกม 2048 ครับ ใครสนใจตามไปอ่านได้ 

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

 

ประวัติของเกม Othello

เผื่อใครสงสัยแบบผมว่า ชื่อมันมาจากอะไร ผมก็อป wiki มาให้ละ

โอเทลโล่ เป็นหมากกระดานที่ถูกคิดค้นในราวปี ค.ศ. 1880 โดยชาวอังกฤษ นามว่า ลูอิส วอเตอร์แมน แรกเริ่มมีชื่อว่า รีเวอร์ซี่ (Reversi) ต่อมาในปี ค.ศ. 1898 บริษัท ราเวนส์เบอร์เกอร์ (Ravensburger) ประเทศเยอรมันได้ทำการซื้อลิขสิทธิ์ และทำการจำหน่ายหมากกระดานชนิดนี้เป็นครั้งแรก ในชื่อเกมว่า รีเวอร์ซี่

ต่อมาในราวปี ค.ศ. 1970 ชาวญี่ปุ่น โกโร่ ฮาเซกาว่า (Goro Hasegawa) ได้ทำการปรับเปลี่ยนกฎ และกติกาใหม่ โดยได้รับแรงบันดาลใจ มาจากหมากล้อม และละครที่สร้างจากบทประพันธ์ของ วิลเลี่ยม เช็คสเปียร์ (William Shakesphere) ที่มีเนื้อหาเกี่ยวกับโศกนาฏกรรมของคนดำ และคนขาวจึงเป็นที่มาของชื่อหมากกระดาน “โอเทลโล่” ตามชื่อของละครดังกล่าว

ในปี ค.ศ. 1973 โกโร่ ฮาเซกาว่า ได้ทำการจำหน่ายหมากกระดานโอเทลโล่ โดยใช้ชื่อ “โอเทลโล่” เป็นครั้งแรก จัดจำหน่ายโดยบริษัท ซึคุดะ ออริจินัล (Tsukada Original) หมากกระดานโอเทลโล่จึงเริ่มเผยแพร่ และเป็นที่นิยมตั้งแต่นั้นเป็นต้นมา

https://th.wikipedia.org/wiki/%E0%B9%82%E0%B8%AD%E0%B9%80%E0%B8%97%E0%B8%A5%E0%B9%82%E0%B8%A5%E0%B9%88

 

เริ่มต้น

New Flutter Project
เวลาเริ่มโปรเจคใหม่ ทำหน้า splash screen จะเป็นการสร้างขวัญกำลังใจ ฮ่าๆ

1

 

สร้างตาราง

เกมนี้เป็นเกมที่ใช้ตารางเป็นพื้นที่การเล่น ปกติจะใช้ตารางขนาด 8×8

กำหนดขนาดของบล็อกในตาราง

 

วาดตาราง ผมก็ copy มาจากเกมก่อนๆ ฮ่าๆ

2

 

ทีนี้ลองสมมุติ ว่ามีหมากสีขาวในตาราง โดยหมากจะเป็นวงกลม
ใน Flutter จะวาดวงกลม แค่ใช้ shape: BoxShape.circle ง่ายมากๆ

3

 

สร้าง BlockUnit

ต่อมาสร้างคลาสเพื่อให้ตารางเปลี่ยนค่าตามต้องการ แต่ละช่องชื่อว่า BlockUnit

 

โดย BlockUnit มี 3 ค่า คือ ว่าง สีขาว สีดำ

 

สร้าง BlockUnit เป็น List แบบ 2 มิติ ชื่อ table
กำหนดค่าเริ่มต้นใน initState ให้ตารางทุกช่องเป็น ค่าว่าง

 

ปรับให้ตาราง เชื่อมกับตัวแปรใน state

2

 

ทีนี้ลองสุ่ม ค่าหมาก ขาว ดำ ลงไปในตาราง

 

แสดงว่าตอนนี้ ตารางเชื่อมกับค่าตัวแปรใน state แล้ว

4

 

การเริ่มต้นของกระดาน

กำหนดตารางเริ่มต้นของเกม คือให้ทุกช่องว่างเปล่า
แล้วที่กลางตารางมีหมากขาว ดำ อันละ 2 ตัววางสลับกัน

5

 

การเดินหมาก

ส่วนไฮไลด์ คือการทำส่วนการเดินหมาก
กำหนดให้เริ่มต้น คือ สีดำเดินก่อน

 

ใส่ GestureDetector ให้กับ BlockUnit เพื่อจะได้ดักการกดในช่องของตาราง

 

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

ลูปเช็ค (ตอนนี้เฉพาะทางขวา) ถ้าเจอหมากของคนอื่นก็เก็บหมากไว้ใน list แต่ถ้าเจอเป็นของเราก็หยุดแค่นั้น แล้ว return list กลับไป แต่ถ้าเป็นช่องว่าง หรือสุดขอบก็ return list เปล่าๆ เมื่อทำเสร็จก็มาดูว่า list ผลลัพธ์ว่างเปล่าหรือไม่ ถ้าว่างแสดงว่าไม่มี หมากไหนที่เปลี่ยนเป็นของเราเลย หมากจะวางตรงนี้ไม่ได้ แต่ถ้า list ไม่ว่างก็เปลี่ยนหมากเป็นสีของเรา พร้อมกับเปลี่ยน turn

 

เริ่มต้นสีดำวางก่อน และตอนนี้เช็คเงื่อนไขทางขวาเท่านั้น

a1

 

ทำเช็คเงื่อนไขด้านล่างบ้าง ใช้หลักการเดิม

 

ได้ผลลัพธ์ก็เอา list มารวมกัน

a2

 

ดังนั้นเราต้องเช็คทั้งหมด 8 ทิศ
ซ้าย ขวา บน ล่าง
บนซ้าย บนขวา
ล่างซ้าย ล่างขวา

กรณีเช็คบนซ้าย

 

เมื่อเขียนครบทุกทิศทาง

 

ตอนนี้สลับกันเดินหมากได้แล้ว

a3

 

สร้างเมนูเกม

เพิ่มเมนูเกมด้านบน โดยมีปุ่มเริ่มเกมใหม่ กับแสดงว่า Turn ปัจจุบันเป็นของหมากสีอะไร
ส่วน method เริ่มเกมใหม่ค่อยเขียนทีหลัง

 

เพิ่มเมนูด้านบนของตารางเกม

6

 

แสดงจำนวนหมาก

ต่อมาทำ แถบแสดงจำนวนหมาก

ประกาศตัวแปร count

 

สร้างแท็บสำหรับแสดงจำนวนหมาก

 

เอาไปวางไว้ด้านล่างของจอ

7

 

 

 

a4

 

ปุ่มเริ่มเกมใหม่

ที่เหลือก็แค่ กหนดค่าเร่มต้นให้เกม เมื่อกดปุ่มเริ่มเกมใหม่

a5

 

 

จบแล้ว

วันนี้สนุกแค่นี้ก่อนครับ สรุปเกม Othello ง่ายกว่าเกมทีผ่านมาเยอะเลย เพราะ copy โค้ดมา ไม่ใช่! เพราะกติกามันน้อย โปรเจคคลายเครียดครั้งหน้าจะทำเกมอะไร เดี๋ยวคิดดูอีกทีครับ

 

โค้ดอยู่ที่ Guthub นะ

https://github.com/benznest/othello-game-flutter