การสร้างเกมคอมพิวเตอร์เบื้องต้น

192 บทที่ 6 เกม Tic Tac Toe ขนั้ ตอนท่ี 5 เขยี นโปรแกรมให้เมนู Exit ออกจากเกม ขั้นตอนที่ 6 ท�ำการประกาศตัวแปรในบรรทดั ท่ี 14 และ 15 ขน้ั ตอนที่ 7 ตง้ั คา่ Event ของทง้ั 9 ปุ่ม โดยก�ำหนด Click : button_click เขยี นโปรแกรมให้ button_click ทดลองรันโปรแกรม แต่เม่ือลองคลกิ แล้วยงั สามารถคลิกทป่ี มุ่ ไดอ้ กี จงึ เขียนโปรแกรมในบรรทดั ที่ 41 เพมิ่ ดงั นี้

การสร้างเกมคอมพวิ เตอรเ์ บอื้ งต้น 193 ขน้ั ตอนที่ 8 ตรวจสอบผชู้ นะ ท�ำการเขยี นโปรแกรมดังน้ี เมอ่ื ทดลองรนั โปรแกรมโดยการกดปุ่ม F5 จะไดผ้ ลดังภาพ เขยี นโปรแกรมตรวจสอบผชู้ นะเพม่ิ ในสว่ นสดุ ทา้ ยของเงอื่ นไข บรรทดั ท่ี 51, 53 และ 55 ดงั ภาพ

194 บทที่ 6 เกม Tic Tac Toe ทดลองรนั โปรแกรมอีกคร้ัง เม่ือกดปุ่ม OK เกมยงั สามารถเล่นได้ ดังภาพ ทำ� การเขยี นโปรแกรมไม่ให้ปมุ่ ทำ� งาน ดังภาพ

การสร้างเกมคอมพวิ เตอรเ์ บ้ืองตน้ 195 และเขยี นโปรแกรมเพ่มิ ในบรรทัดที่ 60 ของเงอ่ื นไข there_is_a_winner ทดลองรนั โปรแกรม เม่อื คลิกป่มุ OK เกมจะไมส่ ามารถเล่นตอ่ ได้ ดังภาพ ข้นั ตอนท่ี 9 ให้เกมแสดงขอ้ ความแจง้ เม่ือเลน่ จนครบ 9 ปมุ่ แต่ไม่มีผ้ชู นะ โดยเขียนโปรแกรม เพม่ิ ในส่วนของ button_click บรรทัดท่ี 42 ดงั ภาพ

196 บทท่ี 6 เกม Tic Tac Toe และ there_is_a_winner บรรทดั ที่ 71 – 75 ทดลองรนั โปรแกรม ขั้นตอนท่ี 10 เป็นการตรวจสอบเงื่อนไขแนวตั้งและแนวทแยงมุม ซึ่งจากภาพการทดลองรัน โปรแกรมขา้ งต้น เหน็ ได้ว่าเกมตอ้ งแจง้ ว่า “X Wins” ตามแนวทแยงมุม

การสรา้ งเกมคอมพิวเตอร์เบือ้ งต้น 197 เราสามารถเพ่ิมเงือ่ นไขได้ ดังภาพ ขัน้ ตอนท่ี 11 ใหเ้ มนู New Game ท�ำงาน โดยเริ่มเกมใหม่ เขยี นโปรแกรมไดด้ ังนี้ ทดลองรนั โปรแกรม

198 บทท่ี 6 เกม Tic Tac Toe ข้ันตอนท่ี 12 เพิ่มความสามารถของเกม โดยให้ X หรือ O แสดง ณ ต�ำแหน่งที่จะวางได้ โดยต้ังค่า Event ของท้ัง 9 ปุ่มดังนี้ ก�ำหนด MouseEnter : button_enter และก�ำหนด MouseLeave : button_leave เริ่มจาก คลกิ เลอื กปุม่ A1 และตั้งค่า Event ของ MouseEnter เปน็ button_enter เมอ่ื พิมพ์ button_enter ครง้ั แรก เม่อื เรากดปุ่ม Enter ที่แป้นพมิ พ์ โปรแกรมจะแสดงหน้า เขียนโปรแกรม ดังภาพ ให้คลกิ เลือกที่ Form1.cs[Design] และกำ� หนด MouseEnter เปน็ button_enter ให้ครบ ทุกป่มุ และตงั้ ค่า Event ของ MouseLeave เปน็ button_leave ให้ครบทุกป่มุ เชน่ กนั

การสร้างเกมคอมพิวเตอร์เบอ้ื งตน้ 199 จากน้นั เขยี นโปรแกรมสำ� หรบั button_enter และ button_leave ทดลองรันโปรแกรม

200 บทท่ี 6 เกม Tic Tac Toe แบบทดสอบและกจิ กรรม การฝกึ ทกั ษะ บทท่ี 6 เน้ือหาการเรียนรู้ จุดประสงค์ - การสรา้ งเกม Tic Tac Toe - มที กั ษะในการเขยี นโปรแกรมเกมขนาดเลก็ คำ� ชแ้ี จง นักเรียนเลือกคำ� ตอบที่ถกู ต้องทีส่ ดุ เพยี งค�ำตอบเดียว 1. ข้อใดกล่าวไมถ่ กู ต้องเกีย่ วกับเกม Tic Tac Toe ก. เป็นเกมกระดานทม่ี ผี ู้เล่น 2 ฝ่าย ข. ตารางกวา้ ง 3 ชอ่ ง และยาว 3 ช่อง ค. ผูเ้ รม่ิ เล่นก่อน เป็นผู้ชนะในเกม Tic Tac Toe ง. สลบั กันเขยี นเคร่ืองหมายของตนเอง จนเต็มช่องกระดาน 2. เกม Tic Tac Toe เปน็ การเขียนโปรแกรมรูปแบบใด ก. Console Application ข. Windows Forms Application ค. WPF Application ง. Empty Project 3. จากภาพ ควรก�ำหนดคุณสมบัตขิ อง Text ให้ Form1 ตามข้อใด เหมาะสมท่ีสดุ ก. Hello World ข. Windows Forms Application Game ค. Form1 ง. Tic Tac Toe

การสร้างเกมคอมพิวเตอร์เบอ้ื งตน้ 201 4. จากภาพ เปน็ การก�ำหนด “สงิ่ ใด” และ “อย่างไร” ในคุณสมบตั ิของ Form1 ก. ก�ำหนดคุณสมบัติของ “ShowIcon” เปน็ False ข. กำ� หนดคณุ สมบตั ขิ อง “ShowIcon” เปน็ True ค. กำ� หนดคณุ สมบตั ิของ “MaximizeBox” เป็น False ง. ก�ำหนดคณุ สมบตั ขิ อง “MaximizeBox” เปน็ True 5. จากภาพ คอื คอนโทรลใด ก. Menu Strip ข. Menu Bar ค. Menu Form ง. Menu 6. จากรปู หมายเลข 1 หมายถึงขอ้ ใด ข. Properties ง. A1 หมายเลข 1 ก. Event ค. Form1

202 บทท่ี 6 เกม Tic Tac Toe 7. “checkForWinner( )” คือโปรแกรมในสว่ นใดของเกม Tic Tac Toe ก. ตรวจสอบการเรม่ิ เกมใหม่ ข. ตรวจสอบผู้ชนะ ค. ตรวจสอบปุม่ ท่ีกด เปน็ X ง. ตรวจสอบปุม่ ท่กี ด เปน็ O 8. โปรแกรมในข้อใด ไมไ่ ด้ อย่ใู นสว่ นของ checkForWinner() ก. !A1.Enabled ข. !B1.Enabled ค. !C1.Enabled ง. !D1.Enabled 9. โปรแกรมในภาพ อยูใ่ นสว่ นใดของเกม Tic Tac Toe ก. checkForWinner ข. NewGame ค. disableButtons( ) ง. button_click( ) 10. จากภาพ เปน็ ผลจากการทำ� งานของโปรแกรมในส่วนใด ก. button_enter ข. button_click ค. button_leave ง. button_XandO คำ� ช้แี จง นักเรียนจับคู่คณุ สมบัตกิ ับคา่ ของคณุ สมบตั ิให้ถูกตอ้ ง C3 ___________________ 1. ShowIcon button_leave ___________________ 2. Size 28 ___________________ 3. Font button_click ___________________ 4. TextAlign Width ___________________ 5. Font style

การสรา้ งเกมคอมพิวเตอรเ์ บ้อื งตน้ 203 ___________________ 6. Font Size CenterScreen ___________________ 7. StartPosition Bold ___________________ 8. Name False ___________________ 9. Click Microsoft Sans Serif ___________________ 10. MouseLeave MiddleCenter ค�ำชแ้ี จง ตอบคำ� ถามต่อไปนใ้ี ห้ถูกตอ้ ง 1. นักเรยี นฝกึ สร้างเกม Tic Tac Toe และเขียนผลสำ� เรจ็ และความรสู้ กึ ที่ได้จากการสรา้ งเกม 2. เหตุใด จงึ ตอ้ งตั้งคา่ คุณสมบัติ Form 1 ในส่วนของ MaximizeBox เปน็ false 3. เขียนโปรแกรม เพ่ือให้เมนู About แสดงกล่องขอ้ ความ โดยมีขอ้ ความ คอื “ช่ือ – สกลุ นกั เรยี น” และชอื่ ของกล่องข้อความ คอื “จัดท�ำโดย” private void aboutToolStripMenuItem_Click(object sender, EventArgs e) { ……..............................................…………………………………………………………………………………… } 4. อธิบายการท�ำงานของปมุ่ Exit จากโปรแกรมดังภาพ 5. ให้นกั เรียนเขียนโปรแกรมเพอื่ ใหเ้ มื่อรนั โปรแกรมแลว้ เกมจะไม่สามารถคลิกป่มุ ได้ private void button_click(object sender, EventArgs e) { Button b = (Button)sender; if (turn) b.Text = “X”; else b.Text = “O”; turn = !turn; ………………...............................………………………………....……………………………………………………… }

204 บทที่ 6 เกม Tic Tac Toe ใชภ้ าพ ตอบคำ� ถามข้อ 6 – 8 6. อธบิ ายการท�ำงานของโปรแกรม ในส่วนของการตรวจสอบแนวนอน 7. อธบิ ายการท�ำงานของโปรแกรม ในสว่ นของการตรวจสอบแนวต้งั 8. อธบิ ายการท�ำงานของโปรแกรม ในส่วนของการตรวจสอบแนวทแยงมุม 9. จากภาพโปรแกรมด้านลา่ ง เป็นการท�ำงานในสว่ นใดของเกม Tic Tac Toe

การสร้างเกมคอมพวิ เตอรเ์ บอ้ื งตน้ 205 10. นกั เรยี นฝึกเขียนโปรแกรมส�ำหรบั button_enter และ button_leave private void button_enter(object sender, EventArgs e) { ………………..........................................……………………………………………………………………………… ………………..........................................……………………………………………………………………………… ………………..........................................……………………………………………………………………………… ………………..........................................……………………………………………………………………………… ………………..........................................……………………………………………………………………………… ………………..........................................……………………………………………………………………………… ………………..........................................……………………………………………………………………………… ………………..........................................……………………………………………………………………………… ………………..........................................……………………………………………………………………………… } private void button_leave(object sender, EventArgs e) { ………………..........................................……………………………………………………………………………… ………………..........................................……………………………………………………………………………… ………………..........................................……………………………………………………………………………… ………………..........................................……………………………………………………………………………… }

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

การสรา้ งเกมงู บทท่ี 7 การสร้างเกมงู เกมงู เป็นเกมที่ผู้เลน่ บงั คบั ทิศทางการเคล่ือนท่ีของงูใหไ้ ปกนิ อาหาร ณ จุดทีก่ �ำหนด โดยทต่ี ้อง บังคับทศิ ทางไมใ่ ห้ส่วนหัวของงูไปชนสว่ นใด ๆ ของตัวงู โดยมีวิธกี ารสร้างตามขน้ั ตอน ดังนี้ เมือ่ เข้าสู่โปรแกรม > New Project > Windows Form Application ตงั้ ชื่อ “Snake”

208 บทท่ี 7 การสรา้ งเกมงู

การสร้างเกมคอมพวิ เตอรเ์ บ้ืองต้น 209 ตั้งค่า Text เปน็ “Snake Game” ตัง้ ค่า Size เป็น Width = 800 และ Height = 500

210 บทท่ี 7 การสรา้ งเกมงู ขน้ั ตอนท่ี 1 เลอื ก คลิกคา้ งไวแ้ ลว้ ลาก เพื่อก�ำหนดพืน้ ที่ท่งี ูสามารถเคลอื่ นทไ่ี ด้ 1. เลอื ก 2. คลิกคา้ งไว้ แลว้ ลาก ตั้งค่า name ของ PictureBox ว่า “pbCanvas” ตง้ั คา่ Lock เป็น True

การสรา้ งเกมคอมพวิ เตอร์เบอื้ งต้น 211 ข้นั ตอนที่ 2 คลิกเครอ่ื งมือ วางในฟอรม์ เพื่อใช้แสดงในสว่ นของคะแนน ตงั้ ค่า Text ว่า “คะแนน” ต้ังค่า Font

212 บทที่ 7 การสร้างเกมงู ตงั้ ค่า ForeColor ขนั้ ตอนที่ 3 คลกิ เลือก วางในต�ำแหน่งท่ตี อ่ จาก Label คะแนนในขน้ั ตอนที่ 2 ซง่ึ ใน ขั้นตอนนี้ เปน็ การก�ำหนดสว่ นท่แี สดงคะแนนของเกม ตง้ั ค่า Name เป็น “lblScore”

การสรา้ งเกมคอมพวิ เตอรเ์ บอื้ งต้น 213 ตั้งคา่ Font และ ForeColor ตัง้ ค่า Text ใหว้ ่าง ภาพกอ่ นการตง้ั ค่า Text ภาพหลงั การต้งั คา่ Text

214 บทที่ 7 การสรา้ งเกมงู ขั้นตอนที่ 4 ท่ีหน้าต่าง Solution Explorer คลิกขวาที่ Snake Project เลือกค�ำสั่ง Add และ Class ตงั้ ช่อื Class ว่า “Circle” จากนน้ั คลกิ ปมุ่ Add

การสร้างเกมคอมพิวเตอรเ์ บือ้ งตน้ 215 เขียนโปรแกรมใน Circle Class ในข้ันตอนน้ี นักเรยี นจะสงั เกตเห็นสญั ลกั ษณด์ อกจัน (*) หลงั ช่อื แสดงให้เห็นว่าโปรเจกตข์ องเรายงั ไม่ได้บันทึก นักเรียนควรบันทึกโปรเจกต์เป็นระยะ สามารถ ท�ำการบันทึกทุกไฟล์ได้หลายวิธี ได้แก่ วิธีที่ 1) เมนู File > Save All วิธีที่ 2) ใช้ Shortcut คือ Ctrl+Shift+S และ วิธีที่ 3) ที่แถบเคร่ืองมือ สามารถเลอื กสญั ลักษณ์

216 บทท่ี 7 การสร้างเกมงู เมื่อบนั ทึกแลว้ สญั ลักษณด์ อกจัน (*) จะหายไป หมายถึงทุกไฟลไ์ ดร้ บั การบันทกึ เรยี บรอ้ ยแลว้ ข้ันตอนท่ี 5 ท่หี นา้ ตา่ ง Solution Explorer คลกิ ขวาท่ี Snake Project เลือกค�ำสง่ั Add และ Class ตง้ั ชอ่ื Class วา่ “Input” จากน้ันคลกิ ปุม่ Add และเขยี นโปรแกรม ดงั ภาพ เมอื่ โปรแกรมปรากฏข้อผดิ พลาดเตือนในระหว่างเขียนโปรแกรม นักเรียนสามารถเลอื กตัวเลอื ก ทีท่ างโปรแกรม Microsoft Visual C# แสดงให้เพ่อื แก้ข้อผิดพลาดดงั กล่าว ดังภาพ

การสร้างเกมคอมพวิ เตอร์เบ้ืองตน้ 217 จากนนั้ จึงท�ำการเขียนโปรแกรมใน Input Class ตามภาพ

218 บทท่ี 7 การสร้างเกมงู ขั้นตอนที่ 6 ท่ีหน้าต่าง Solution Explorer คลิกขวาท่ี Snake Project เลือกค�ำสั่ง Add และ Class ต้ังชือ่ Class ว่า “Settings” จากนั้นคลกิ ปุม่ Add และเขยี นโปรแกรม ดังภาพ ข้ันตอนที่ 7 เลือกเครอื่ งมือ มาวางในฟอร์มและตง้ั ค่า Name เปน็ “gameTimer”

การสร้างเกมคอมพวิ เตอรเ์ บ้อื งต้น 219 ขนั้ ตอนที่ 8 ทห่ี นา้ ตา่ ง Solution Explorer คลกิ ขวาที่ Form1.cs เลอื ก View Code หรอื กด F7 จะปรากฏหนา้ ตา่ งส�ำหรับเขียนโปรแกรม

220 บทที่ 7 การสรา้ งเกมงู เขียนโปรแกรม ดงั ภาพ เขียนโปรแกรมเพอ่ื ก�ำหนดคา่ เริ่มตน้ ของเกม ดังภาพ

การสร้างเกมคอมพวิ เตอรเ์ บ้ืองต้น 221 เขียนโปรแกรมในสว่ นของ StartGame ( ); เขยี นโปรแกรมในส่วนของ GenerateFood ( );

222 บทท่ี 7 การสร้างเกมงู เขยี นโปรแกรมในสว่ นของ UpdateScreen ( ); ข้ันตอนท่ี 9 คลกิ เลือก ต้งั คา่ Event “Paint” ทห่ี นา้ ตา่ ง Properties ของ pbCanvas

การสร้างเกมคอมพิวเตอร์เบื้องตน้ 223 ท�ำการดับเบิลคลกิ “Paint” จะปรากฏหนา้ ตา่ งใหเ้ ขียนโปรแกรม เขยี นโปรแกรม ขั้นตอนที่ 10 คลกิ เลอื กท่ี เลือกเครอ่ื งมอื มาวางในฟอร์ม 1

224 บทท่ี 7 การสร้างเกมงู ตง้ั ค่า Name เป็น “lblGameOver” ตงั้ คา่ Font และ ForeColor ตั้งคา่ TextAlign เป็น “MiddleCenter” ต้งั ค่า Visible เปน็ “False”

การสรา้ งเกมคอมพวิ เตอรเ์ บื้องตน้ 225 คลิกขวาท่ี label2 ในฟอร์ม เลือกค�ำสั่ง Bring to Front เลือก และเขียนโปรแกรมเพม่ิ ในส่วนของ StartGame( )

226 บทท่ี 7 การสร้างเกมงู และเขียนโปรแกรม ข้ันตอนท่ี 11 เขยี นโปรแกรมในส่วนของ MovePlayer ( )

การสร้างเกมคอมพวิ เตอรเ์ บือ้ งตน้ 227 ขน้ั ตอนที่ 12 เลอื กในสว่ นของ Form Design เลอื ก Event “KeyDown” ท่ี Properties ของ Form1 ดบั เบลิ คลกิ เพ่ือเขยี นโปรแกรม

228 บทที่ 7 การสรา้ งเกมงู ขนั้ ตอนที่ 13 เลอื กในสว่ นของ Form Design เลอื ก Event “KeyUp” ท่ี Properties ของ Form1 ดบั เบลิ คลิกเพอื่ เขียนโปรแกรม ขั้นตอนท่ี 14 เขียนโปรแกรมในสว่ นของ Eat ( )

การสรา้ งเกมคอมพวิ เตอร์เบอ้ื งตน้ 229 ข้นั ตอนที่ 15 เขยี นโปรแกรมในสว่ นของ Die ( ) ทดลองรนั โปรแกรม

230 บทท่ี 7 การสรา้ งเกมงู แบบทดสอบและกิจกรรม การฝกึ ทักษะ บทท่ี 7 เนือ้ หาการเรยี นรู้ จุดประสงค์ - การสร้างเกมงู - มที กั ษะในการเขียนโปรแกรมเกมขนาดเลก็ ค�ำชี้แจง นักเรยี นเลือกค�ำตอบท่ถี ูกตอ้ งทีส่ ดุ เพียงค�ำตอบเดียว 1. ข้อใดกล่าว ไมถ่ กู ตอ้ ง เก่ียวกบั เกมงู ก. บังคับทิศทางไม่ให้สว่ นหวั ของงไู ปชนสว่ นใด ๆ ของตวั งู ข. บังคบั ทิศทางให้สว่ นหวั ของงไู ปชนสว่ นใด ๆ ของตวั งู ค. เคลือ่ นท่ีใหไ้ ปกนิ อาหาร ณ จุดทีก่ �ำหนด ง. เปน็ เกมทผ่ี เู้ ลน่ บังคับทิศทางการเคลือ่ นท่ขี องงู 2. เกม งู เป็นการเขยี นโปรแกรมรูปแบบใด ข. Empty Project ก. WPF Application ง. Windows Forms Application ค. Console Application 3. จากภาพ ควรก�ำหนดคณุ สมบัติของ Text ให้ Form1 ตามข้อใดเหมาะสมที่สุด ก. Form1 ข. Snake ค. Hello World ง. Windows Forms Application Game

การสร้างเกมคอมพิวเตอรเ์ บ้อื งต้น 231 4. จากภาพ เป็นการก�ำหนด “ส่งิ ใด” และ “อย่างไร” ในคุณสมบัติของ Form1 ก. ก�ำหนดคุณสมบตั ิของ “Location” เป็น True ข. ก�ำหนดคณุ สมบตั ิของ “Location” เปน็ False ค. ก�ำหนดคุณสมบัตขิ อง “Locked” เป็น True ง. ก�ำหนดคณุ สมบตั ิของ “Locked” เป็น False 5. จากภาพ คือ คอนโทรลใด ก. PictureBox ข. TextBox ค. Label ง. MenuStript 6. จากภาพ เป็นการก�ำหนดคุณสมบตั ขิ องขอ้ ใด ก. Text ข. ForeColor ค. Font ง. Name

232 บทที่ 7 การสร้างเกมงู 7. “StartGame( )” คอื โปรแกรมในส่วนใดของเกมงู ก. เร่ิมเกมใหม่ ข. เพิ่มสว่ นล�ำตวั ของงู ค. สมุ่ ต�ำแหน่งของอาหาร ง. เปล่ียนสสี ่วนหวั ของงู 8. โปรแกรมในขอ้ ใด ไมไ่ ด้ อยู่ในสว่ นของ MovePlayer() ก. case Direction.Right; ข. case Direction.Left; ค. case Direction.Up; ง. case Direction.Back; 9. โปรแกรมในภาพ อยูใ่ นส่วนใดของเกมงู ก. StartGame ( ) ข. Timer ( ) ค. Direction( ) ง. Settings( ) 10. จากภาพ เป็นผลจากการท�ำงานของโปรแกรมท่ีแสดงในคอนโทรลใด ก. lblGameOver ข. lblScore ค. label1 ง. lblNewGame

การสรา้ งเกมคอมพิวเตอรเ์ บ้ืองต้น 233 ค�ำช้แี จง นกั เรยี นจับคู่คณุ สมบัติ กับคา่ ของคณุ สมบัตใิ หถ้ กู ตอ้ ง ____________________ 1. Lock pbCanvas ____________________ 2. Size pbCanvas_Paint ____________________ 3. ForeColor False ____________________ 4. Interval Form1_KeyDown ____________________ 5. Paint Height ____________________ 6. Visible TopLeft ____________________ 7. KeyDown 100 ____________________ 8. Name True ____________________ 9. TextAlign Normal ____________________ 10. WindowState 0, 0, 192 ค�ำชแ้ี จง ตอบค�ำถามตอ่ ไปนใ้ี ห้ถกู ตอ้ ง 1. นกั เรยี นฝึกสร้างเกมงู และบันทกึ ผลการสร้าง 2. นกั เรยี นทบทวนการเขียนโปรแกรมในสว่ นของ Circle Class 3. นักเรยี นทบทวนการเขยี นโปรแกรมในสว่ นของ Input Class 4. นกั เรียนทบทวนการเขยี นโปรแกรมในส่วนของ Settings Class 5. นักเรยี นทบทวนและเขยี นโปรแกรมในสว่ นของ StartGame( ); 6. นกั เรียนทบทวนและเขียนโปรแกรมในส่วนของ GenerateFood ( ); 7. นักเรยี นทบทวนและเขียนโปรแกรมในส่วนของ KeyUp 8. นกั เรียนทบทวนและเขียนโปรแกรมในสว่ นของ KeyDown 9. นกั เรียนทบทวนและเขยี นโปรแกรมในสว่ นของ Eat ( ); 10. นกั เรยี นทบทวนและเขียนโปรแกรมในสว่ นของ Die ( );

แนวคิด บทท่ี การทดสอบโปรแกรมทเ่ี ขยี นเสรจ็ แลว้ เปน็ การตรวจสอบและแกไ้ ขขอ้ ผดิ พลาด 8 (Error) ที่เกิดขึ้นระหว่างการเขียนโปรแกรม ข้อผิดพลาดในโปรแกรม Microsoft Visual C# เรียกว่า Exception และการแก้ไขข้อผิดพลาด เรียกว่า Exception การทดสอบและ ิตดตั้งเกม Handling ประเภทของข้อผิดพลาดมี 3 รูปแบบ ได้แก่ 1. ข้อผิดพลาดจากการพิมพ์ คำ�สั่งผดิ หรือ Syntax Error 2. ข้อผดิ พลาดจากสภาวะแวดลอ้ มในการท�ำ งานหรือ Runtime Error 3. ขอ้ ผดิ พลาดจากการออกแบบหรือ Logical Error การสร้างชุดติดตั้งของโปรแกรมที่พัฒนาขึ้น เป็นกระบวนการในการติดตั้ง โปรแกรมหรือแอปพลิเคชันในคอมพิวเตอร์เครอื่ งอนื่ ๆ ท้งั การตดิ ตัง้ ผ่านเครือข่าย และโปรแกรม ซง่ึ ในกระบวนการนเ้ี รยี กวา่ Deployment สาระการเรยี นรู้ 1. การทดสอบ 2. การสรา้ งชดุ ติดตงั้ ของโปรแกรมทีพ่ ฒั นาขึ้น สมรรถนะประจ�ำ บท 1. เรยี นรกู้ ารทดสอบและติดต้งั เกม 2. ปฏิบัติการทดสอบและตดิ ตั้งเกมตามขั้นตอนไดถ้ ูกตอ้ ง จุดประสงค์เชงิ พฤตกิ รรม 1. อธบิ ายและปฏบิ ัตกิ ารทดสอบโปรแกรมท่เี ขียนเสรจ็ แล้ว 2. จำ�แนกประเภทของข้อผดิ พลาด 3. อธิบายการสรา้ งชดุ ตดิ ตัง้ ของโปรแกรมที่พฒั นาขน้ึ 4. ระบุแนวทางในกระบวนการ Deployment 5. ปฏิบตั ิการสร้างชุดตดิ ตงั้ ของโปรแกรมทพี่ ัฒนาขึ้น

การทดสอบ และติดตั้งเกม บทท่ี 8 การทดสอบ การทดสอบโปรแกรมทเี่ ขยี นเสรจ็ แลว้ เปน็ การตรวจสอบและแกไ้ ขขอ้ ผดิ พลาด (Error) ทอ่ี าจเกดิ ขน้ึ ระหวา่ งการเขยี นโปรแกรม ซง่ึ การทดสอบนนั้ จ�ำเปน็ ตอ่ การเขยี นโปรแกรมทนี่ กั เขยี นโปรแกรมตอ้ งเรยี นรู้ ท�ำความเข้าใจ และแก้ไขขอ้ ผดิ พลาดที่เกดิ ข้ึน ข้อผดิ พลาดในโปรแกรม Microsoft Visual C# เรียกว่า Exception และการแก้ไขขอ้ ผดิ พลาด เรยี กวา่ Exception Handling ประเภทของข้อผดิ พลาด ในการเขยี นโปรแกรม มีข้อผดิ พลาดท่ีอาจเกิดข้ึน 3 รปู แบบ ได้แก่ 1. ข้อผดิ พลาดจากการพมิ พค์ �ำสง่ั ผิด หรอื Syntax Error ตัวอย่าง เมอ่ื เรยี กใชง้ านตวั แปร แต่ยังไม่ได้ประกาศค่าตัวแปร การพิมพ์ค�ำสั่งผิด ข้อผิดพลาดน้ีโปรแกรม IDE, Code Editor จะมี ความสามารถในการช่วยแกไ้ ขขอ้ ผิดพลาด ในข้นั ตอนการรันโปรแกรม

236 บทที่ 8 การทดสอบและตดิ ตง้ั เกม 2. ขอ้ ผดิ พลาดจากสภาวะแวดลอ้ มในการทำ� งาน หรอื Runtime Error ข้อผดิ พลาดประเภทน ้ี สง่ ผลให้การท�ำงานผิดพลาด ตัวอย่าง ปอ้ นขอ้ มูลผดิ ประเภท เปน็ ตน้ 3. ขอ้ ผดิ พลาดจากการออกแบบ หรอื Logical Error เปน็ ขอ้ ผดิ พลาดจากการเขยี นโปรแกรม แม้โปรแกรมสามารถท�ำงานได้ แต่เป็นการท�ำงานท่ีไม่ถูกต้อง ไม่ตรงกับความต้องการในการเขียน โปรแกรม

การสรา้ งเกมคอมพวิ เตอร์เบอ้ื งต้น 237 การตรวจสอบและแก้ไขขอ้ ผิดพลาด ในโปรแกรม Microsoft Visual C# เปน็ โปรแกรมประเภท IDE หรอื Integrated Development Environment ซง่ึ มเี ครื่องมอื ทจ่ี �ำเป็นในการเขียนโปรแกรม ทั้งตัวช่วยเขียนโปรแกรม (Code Editor) ตัวแปลภาษา (Compiler) เคร่ืองมือในการจัดการวัตถุ (Tools) เอกสารอ้างอิง (Document) และ เคร่ืองมอื ในการทดสอบหรอื ตรวจสอบ พรอ้ มท้ังแก้ไขข้อผดิ พลาด (Debugger) การท�ำงานใน Debug Mode Debug Mode คือ โหมดท่ีใช้ทดสอบการท�ำงานของโปรแกรม เรียกว่า Debugging ซ่ึงใน โปรแกรมสามารถเลือกการท�ำงาน Debug Mode ได้ที่เมนู Debug แสดงดังภาพ ท้ังนี้ เมอื่ เรากด F5 หรือ Run Program เพอ่ื ทดสอบการท�ำงานในโปรแกรม เป็นการท�ำงานท่ี Debugger ด�ำเนนิ การให้สามารถทดสอบการท�ำงานและแก้ไขโปรแกรมได้พร้อมกัน ตวั อย่างภาพหนา้ จอในโหมดปกติ ทส่ี ามารถแก้ไขโปรแกรมได้

238 บทที่ 8 การทดสอบและตดิ ต้งั เกม

การสรา้ งเกมคอมพวิ เตอร์เบือ้ งตน้ 239 ตวั อยา่ งภาพหนา้ จอในโหมด Debugging ทส่ี ามารถทดสอบการท�ำงานและแกไ้ ขโปรแกรมได้ การตรวจสอบข้อผิดพลาดด้วย Breakpoint Breakpoint เปน็ การหยดุ การท�ำงานในต�ำแหนง่ ทต่ี อ้ งการ เมอ่ื ก�ำหนด Breakpoint แลว้ สามารถ เลอ่ื นเคอร์เซอร์ใน Code Editor มายังบรรทัดที่เขียนค�ำสั่งน้ันแล้วกดปุ่ม F9 หรือเลอื กเมนู Debug > Toggle Breakpoint ซึ่งโปรแกรมจะแสดงบรรทัดท่ีก�ำหนด Breakpoint ด้วยพื้นสีน�้ำตาลแดง และเมื่อกดปุ่ม F9 อีกคร้ัง จะเป็นการยกเลิกการท�ำงานของ Breakpoint หรือ Debug > Stop Debugging

240 บทที่ 8 การทดสอบและตดิ ตั้งเกม การหยดุ การทำ� งานของโปรแกรมอยา่ งมีเงอ่ื นไข ในการหยุดการท�ำงานนนั้ สามารถก�ำหนดเงื่อนไขได้ 3 ประเภท คอื - Condition เป็นเง่ือนไขปกติที่เราสามารถก�ำหนดได้ โดยใช้ตวั แปรทอ่ี ยใู่ นโคด้ มาสรา้ งเปน็ เงอื่ นไข - Hit Count เปน็ การก�ำหนดใหโ้ ปรแกรมหยดุ การท�ำงาน เมอื่ ท�ำงานผา่ นจดุ ทเี่ ปน็ Breakpoint ที่ต้องการกร่ี อบ จึงจะหยดุ การท�ำงาน ซึ่งโดยปกตจิ ะให้หยดุ ทนั ทที ี่ผ่าน - Filter เปน็ การก�ำหนดเงอื่ นไขในการหยุดการท�ำงานได้ จากการระบุชื่อเคร่ือง (Machine) ระบุ Process และระบุ Thread ซ่ึงเราอาจพบได้ในกรณีที่มีการทดสอบการท�ำงานจากโปรแกรม ท่ีท�ำงานแบบขนาน (Parallel Application) ซ่ึงมกี ารกระจายงานยอ่ ย ๆ ผ่านโพรเซสเซอร์หลาย ๆ ตัว (Multi-Processor) การสัง่ โปรแกรมทำ� งานหลังจาก Breakpoint เม่ือเราหยุดการท�ำงานของโปรแกรมตามจุด Breakpoint ที่ตั้งไว้แล้วนั้น เราสามารถส่ังให้ โปรแกรมท�ำงานในช่วงของการ Debug ได้ด้วยรูปแบบตา่ ง ๆ ดงั ต่อไปนี้ Step Into : รันทีละค�ำสั่ง เปน็ การส่งั งานให้โปรแกรมท�ำงานทีละค�ำสั่ง หลังจากที่โปรแกรม หยุดการท�ำงานที่ Breakpoint เพ่ือตรวจสอบผลการท�ำงานทีละค�ำสั่ง สามารถท�ำได้โดยกดปุ่ม F8 เมื่อรันทลี ะค�ำสั่งกส็ ามารถตรวจสอบสถานะต่าง ๆ ของโปรแกรมได้หลายรูปแบบ Step Over : รนั ค�ำสงั่ ในโปรแกรมยอ่ ยเปน็ ค�ำสง่ั เดยี ว เปน็ การรนั โปรแกรมโดยคดิ วา่ ฟงั กช์ นั ตา่ ง ๆ เป็นเพียงหน่ึงค�ำส่ัง โดยไม่สนใจวา่ ขา้ งในจะมกี ารท�ำงานอยา่ งไร สามารถท�ำได้โดยกดปุ่ม Shift + F8 ท้ังน้ีตัวอย่างการรันค�ำสั่งแบบ Step Over คือ จะมองว่าฟังก์ชัน Add เป็นค�ำสั่งเดียวและไม่สนใจ ว่าในฟังก์ชัน Add จะมีก่ีค�ำส่ัง แต่การรันค�ำส่ังแบบ Step Info จะเข้าไปท�ำงานทีละค�ำสั่งในฟังก์ชัน Add ดว้ ย Step Out : รันค�ำสั่งท่เี หลอื ในโปรแกรมยอ่ ยในขั้นตอนเดียว เป็นการรันทุกค�ำสัง่ ที่ยงั เหลืออยู่ ในฟังก์ชันภายในคร้งั เดยี ว สามารถกดปมุ่ Ctrl + Shift + F8 จะใช้เมอื่ เกิดการสงสัยในการท�ำงานของ บางค�ำสั่ง Run to Cursor : หยดุ การท�ำงาน ณ จดุ ทเ่ี คอรเ์ ซอรค์ ้างไว้ เครือ่ งมอื สำ� หรับตรวจสอบขอ้ มลู ขณะ Debug การตรวจสอบขอ้ มูลในขณะ Debug Mode ซง่ึ มีเครอื่ งมือช่วยเหลอื ดังน้ี หนา้ ตา่ ง Locals เป็นหนา้ ตา่ งที่ใชต้ รวจสอบคา่ ตัวแปรทกุ ๆ ตวั ทอ่ี ยภู่ ายในขอบเขตของบลอ็ ก ค�ำสัง่ ทีก่ �ำลงั รนั ในแบบ Debug Mode ซ่ึงสามารถเรยี กดูหนา้ ตา่ งไดโ้ ดยคลกิ เมนู Debug > Windows > Locals

การสรา้ งเกมคอมพิวเตอร์เบอ้ื งตน้ 241 ซง่ึ สามารถสรุปการใช้งานของหน้าตา่ ง Locals ไดด้ ังน้ี - Locals จะแสดงรายละเอียดของตัวแปรทั้งหมดที่อยู่ในขอบเขตของบล็อกค�ำสั่งน้ัน ๆ ซึ่ง อาจจะเป็นระดับฟงั กช์ ัน - ถ้าหากตัวแปรใด ยังไม่ถูกก�ำหนดค่า ณ จุดที่หยุดการท�ำงาน ในหน้าต่าง Locals ก็จะ ไมแ่ สดงคา่ นนั้ ใหเ้ ราส่ังให้ท�ำงานแบบ Step Info ไปทีละค�ำสั่ง กจ็ ะเหน็ วา่ ตัวแปรในหน้าตา่ ง Locals เปลีย่ นแปลงไป - เราสามารถเปลี่ยนคา่ ตวั แปรไดใ้ นขณะ Debug - เมื่อออกนอกขอบเขตของฟังก์ชันแล้วเข้าสู่ฟังก์ชันตัวใหม่ หรือบล็อกของค�ำส่ังที่ลึกลงไป กจ็ ะแสดงคา่ ตวั แปรทง้ั หมดในขอบเขตนั้นใหเ้ หน็ ใน Locals Window หนา้ ต่าง Watch สามารถตรวจสอบผลการท�ำงานของฟงั กช์ นั ที่ตอ้ งการได้ สามารถตรวจสอบ ค่าคงท่ี โดยไม่เปลยี่ นไปมองคา่ อื่น ๆ ตามขอบเขตการท�ำงานท่ีเปลย่ี นไป โครงสร้างการเขียนโปรแกรมเพ่อื จัดการกบั ข้อผิดพลาด การเขียนโปรแกรมเพื่อจัดการกับข้อผิดพลาดนั้น ในโปรแกรมสามารถใชค้ �ำส่งั try…catch… finally เพ่ือดักขอ้ ผิดพลาดในลักษณะที่มีโครงสร้างการท�ำงานเปน็ บลอ็ ก โดยน�ำโปรแกรมทีค่ าดว่านา่ จะ ผดิ พลาด ไวใ้ นบลอ็ ก try และน�ำโปรแกรมทจ่ี ะรองรับหากเกิดข้อผดิ พลาดมาวางในบล็อก catch และ บลอ็ ก finally เป็นโปรแกรมทีต่ อ้ งท�ำเสมอไม่ว่าจะมีข้อผิดพลาดเกดิ ข้ึนหรือไม่ และจะมีบล็อก finally หรอื ไม่ก็ได้ ตวั อยา่ งจากเกม Tic Tac Toe