---
title: การเขียนโปรแกรมภาษาคอมพิวเตอร์ 100264
subtitle: 
date: วันพุธที่ 10 กุมภาพันธ์ 2564  เวลา 08.50 น.
---

								(ข้อความสดจากระบบถอดความเสียงพูดทางไกล)


(อาจารย์) สวัสดีค่ะ เดี๋ยววันนี้บอกแล้วว่า เราจะพาทำเกมนะคะ มันก็จะต่อเนื่องมมาจากสัปดาห์ที่แล้ว ที่เราลงโปรแกรมกันไปบางส่วนแล้วนะ ทีนี้ก่อนอื่นเราต้องหาตัวช่วย มาให้ทำให้การเขียน Coding ของเรานี่ มาให้สะดวกขึ้น เร็วขึ้น ไวขึ้นนะคะ Anaconda มันจะเป็นแพกเกจที่อยู่ใน Pygame แต่เป็น Package นะ แทนที่จะต้องมาพิมพ์ทุกคำนี่ มันจะขึ้น มันจะมีโค้ดหรือฟังก์ชันน่ะขึ้นมาให้เราเลือกว่าจะพิมพ์ตัวไหน จะได้เกิดปัญหาพิมพ์ไปไม่ผิด แล้วก็จะทำให้พิมพ์ได้ไวขึ้น อันดับแรกเราจะต้อง Install Package ก่อน ก่อนที่จะ Install ได้ นะคะ เมื่อกี้ แม่บอกให้เปิด Sublime แล้วนะ ให้เปิด Sublime ไว้นะคะ ให้ไปที่เมนูที่ชื่อว่า Tool เห็นไหม เลือก Tool เห็นหรือเปล่า เลือกไปที่ install Package คลิก คลิก Install Package Contolr รอหน่อยตรงนี้มันกำลังต้องรอ ๆ เดี๋ยวมันจะมี มันจะมีหน้าต่างนี่ขึ้นมา พอเจอหน้าต่างนี้ปุ๊บ คลิก O.K. ได้เลย คลิกได้เลย เสร็จแล้วไปไหนต่อ รอก่อนนะ รอก่อน มันให้รอ สังเกต ตรงนี้มันจะวิ่ง ๆ หน่อย รอแป๊บหนึ่งนะ เดี๋ยวให้ดูสไลด์รอว่าถ้าคลิกนี่เสร็จ คลิก Tool คลิก Install Package เสร็จ นี้ Click ok เราจะไปคลิกที่ preferences แล้วก็ Package Control นะคะ เพราะฉะนั้น คลิกไหน Tference เลือก Package Control อันล่างสุด โอ.เค. ไหม ทันนะ โอ.เค. โอ.เค. พอตรงส่วนนี้ขึ้นมาให้พิมพ์ Install แค่พิมพ์ I เห็นไหม พิมพ์แค่ I ก็ขึ้นแล้วให้คลิกเลือกที่คำว่า install Packageทีนี้รอหน่อยหนึ่ง พอขึ้นนี้มานะคะ ขึ้นหรือยังทันไหม ฝั่งนี้ทันนะ ฝั่งนี้ทันไหมลูก ขึ้นหน้านี้หรือยัง ทุกคนขึ้นหน้านี้แล้วนะ ไปต่อ ให้ดูว่าไปต่อ เดี๋ยว ๆ โอ.เค. ค่ะ เมื่อกี้ เมื่อกี้นะคะ เราคลิก Preferences แล้ว มันจะมีช่องให้พิมพ์ใช่ไหม ให้เราพิมพ์ a พิมพ์ ana ในช่องนี้ พิมพ์เลย A-n หาคำว่า Anaconda น่ะ ถ้ามันยังไม่ขึ้นอีก เห็นไหม ถ้าขึ้น Anaconda คลิกเลือกที่ ananconda เลย เอาแค่ Anaconda อย่างเดียวน่ะ ไม่มีอะไรต่อน่ะ อันแรกเลยอันแรก อันนี้ เอาตัวนี้ เลือกตัวนี้ โอ.เค. ไหม เลือกที่มี ananconda อย่างเดียว ไม่ต้องมีgo. php. เอาแค่ anaconda เฉย ๆ โอ.เค. นะ ต้องรอนะคะ รอจนกระทั่งถ้ามันเสร็จ มันจะขึ้นแบบนี้ เดี๋ยวให้ดูรูปมีหน้าต่างนี้ขึ้นมา หน้าต่าง anaconda ขึ้นมาอย่างนี้ ถ้าใคร Install เสร็จ รอนะคะ เราต้องรอ ขึ้นอย่างนี้หรือยัง ถ้าเสร็จแล้ว ถ้าขึ้นหน้านี้แล้ว หมายความว่าเรา ทำการ Install Package ของ Anaconda ได้แล้ว ลง เรียก ก็คือสามารถเรียกมาใช้งานได้แล้วนะคะ เพราะฉะนั้น เราก็สามารถปิดหน้าต่างนี้ได้เลยนะคะ ก็กดเพื่อปิดนี่ นึกออกนะ ปิดหน้าต่างนี้ กดที่เครื่องหมาย กากบาท ปิดหน้าต่างนี้ไปเลย นะคะ เมื่อเรา ทีนี้สิ่งที่เราจะมาทำในวันนี้ ก็คือ สร้างเกม OX หรือ XO นี่ล่ะ เกมนี้ สิ่งแรกที่เราจะต้องมี เราต้องมีอะไรคะ ตัวพื้นที่ของมันใช่ไหม เพราะอยู่ดี ๆ มาถึงจะให้มันจิ้ม X จิ้ม O เลยไม่ได้ เราจะต้องทำพื้นที่เพื่อสร้างอะไร ช่องตารางตัวนี้ใช่ไหมคะ สะก่อนนะ ให้ดูรูปนะคะ สัญญาณล่ามไม่ได้น่ะนะ สัญญาณล่ามหลุดไปแล้ว สัญญาณล่ามหลุดไปแล้ว กระตุกเหมือนเดิม น่าจะไม่ได้ ฝั่ง ๆ สัญญาณมันค่อนข้างกระตุกนะ เด็กจะดูไม่ค่อยรูู้เรื่อง เดี๋ยวลองต่ออีกสักหน่อย ได้ไหมเด็ก ๆ ได้ไหม โอ.เค. ก็คือหลักการนะคะ เราจะต้องสร้างพื้นที่ อันดับแรก ขั้นตอนแรกนี่ ก่อนเราจะต้องสร้างพื้นที่ของเกมน่ะให้เราเล่น มาดู มาดูขั้นตอนมันก่อน เราจะต้องรู้ว่าหน้าจอหรือตำแหน่ง หรือพิกัดของเกมนี่มันดูอย่างไร ให้นึกถึงนะคะ ถ้าหน้าจอเรานี่ ถ้าจากแนวนี้ลงมา จอนะ แนวตั้งลงมานี่ เราจะเรียกแกนนี้ว่าแกน Y นะคะ ก็คือเพราะอะไร เพราะใน 1 จอนี่ เวลาเอารูปใส่น่ะ ตำแหน่งมันจะนับเป็น Pixel นับเป็นจุดตำแหน่งของแนวตั้งนี่ ก็คือแกน Y ก็คือแกน X คอลัมน์ ก็คือ อันนี้สมมติมันขึ้นอยู่กับขนาดแต่ละแบบ เหมือนไอซ์ใช้จอมันเล็กกว่าใช่ไหม All In One หน้าจอแบบกว้าง มันก็จะมี 14 นิ้ว 26 นิ้ว 26 นิ้ว อันนี้ก็คือแม่ยกตัวอย่างให้ดูว่าถ้าขนาดหน้าจอเรามัน 400x600 หรือ 700 หรือคูณ 600 นั่น แกนแนวตั้งก็คือ ความสูงนะคะ เดี๋ยวให้ดู ถ้าแนวตั้งนี่หมายถึงส่วนสูงของจอเรา ถ้าแนวนอน ความกว้างนะคะ เพราะฉะนั้น ตำแหน่งเริ่มต้นของคอมพิวเตอร์น่ะ ตำแหน่ง 00 มันจะอยู่มุมบนสุด ก็คือที่ X0 Y0 y 0 ถ้าสมมติเราจะวาด วาดหน้าจอเหมือนรูปแรกเห็นไหม มันใช้พื้นที่ บางทีต้องใช้พื้นที่เต็ม นึกออกนะ บางเกมไม่ต้องใช้พื้นที่เต็มหน้าจอไง คือให้นึกถึงเหมือนเรามเอารูปมาใสยิ่งภาพใหญ่ ก็จะเปลืองพื้นที่ เพราะฉะนั้นหลักการทำหน้าจอเกมน่ะ เราก็ต้องดูว่าเกมที่เราใช้เล่นนี่ มันจำเป็นไหมที่ต้องทำหน้าจอใหญ่ ๆ นึกออกนะคะ ให้นึกถึงหลักง่าย ๆ ว่า ถ้าพื้นที่ใหญ่ขนาดนี้ แต่เราต้องการใช้พื้นที่แค่ส่วนนี้ แค่ล็อกเดียวอย่างนี้ นึกออกนะ ถ้าสมมติว่า 1 ช่องที่แม่เว้นไว้ ใช้ช่องละ 100 ถ้าแม่อยากใช้ส่วนแค่ตรงนี้ พื้นที่มันก็จะแค่ประมาณ 100 x 100 เท่านั้น เราต้องการความสูงของจอ 100 ความกว้างของจอ 100 แค่นั้น อย่างนี้นะคะ เพราะฉะนั้น ขึ้นอยู่กับลักษณะเกมที่เราจะสร้างด้วยนะคะ แต่ให้รู้ไว้ว่าเมื่อเราจะตั้ง อันไหนคือแนวตั้ง อันไหนคือส่วนสูง อันไหนคือ ความกว้างของจอ เพราะมันจะต้องใช้คำสั่งของจอ เพื่อกำหนดค่าให้จอที่เราจะสร้างขึ้นมา นึกออกนะคะ เพราะฉะนั้นไปต่อนะคะ ทีนี้ ก่อนจะทำในส่วนนั้นได้ เราจะต้องสร้างในเกมนี่ ทุกเกมนี่ ที่เขียนด้วย pyGame หลักการ ก็คือจะต้องมีในส่วนของ ไปเร็วไปหน่อย ส่วนของ Import นึกถึงที่สัปดาห์ที่แล้วนะ เห็นไหมคะ Import ต้องมีคำสั่งหรือ ฟังก์ชัน Import นี่ ทุกครั้ง ขาดไม่ได้นะคะ เพื่อบอกให้รู้ว่าเราจะไปเปิดใช้งานโมดูลหรือ library เกม หรือ นึกออกนะ มันจะเอามาเขียนโค้ดอื่นที่เกี่ยวกับการเล่นเกมนี่ไม่ได้ เพื่อเปิดใช้งานมันImport นี่จะต้องมาเสมอนะคะ ต่อไป ส่วนต่อมาส่วนนี้ ความจริง เอาอีกแล้ว ทำไมคอมพิวเตอร์มันรู้มาก ที่จริง i ตัวเล็ก Inicอันนี้ ส่วนนี้ คำสั่งนี้จะให้ดู มันจะหมายถึง บอก บอกให้เกมเริ่มทำงาน คำสั่งนี้ Init

() นี่ เพราะมีวงเล็บนี่ มันหมายถึง เดี๋ยวจะให้ดูว่า คำสั่งนี้เขียนอย่างไร ก็ขาดไม่ได้ ต้องมีการเรียกใช้มันขึ้นมา ต้องมีเสมอ ในส่วนต่อมา ส่วนที่ 3 ส่วนของการกำหนดค่าที่จะทำเพราะทุกครั้งที่ทำเกม จะต้องมากำหนด สร้างหน้าจอทุกครั้งไง นึกออกนะ หน้าจอแต่ละอันไม่เหมือนกัน มันจะต้องมีส่วนของการกำหนดค่า งหน้าจอ สี หรือรูป หรือรูปที่จะเอามาใช้ หรือตัวเกม หรือตัวเกม เช่น สมมติเราจะใช้ X กับ O ใช่ไหม เราจะทำเกม XO เพราะฉะนั้น คือตัวเกมที่เราจะนำมาทำ หรือตัวละครของเรา หรือเหมือนทำเกมงู ตัวเกมของเราก็หมายถึงตัวงูนั่นเอง ก็คือจะมีส่วนของตัวนี้ขาดไม่ได้ มาดูลส่วนต่อมา ส่วนของ Loop เป็นส่วนของการกำหนดเงื่อนไขหรือการทำงานต่าง ๆ เพื่อให้ เพราะโดยปกติเกมมันไม่ได้เล่นแค่กดครั้งเดียวจบ มันต้องมีการวน Loop ใช่ไหมคะ สามารถเล่นซ้ำได้ หรือกดซ้ำ หรือกดเพิ่มจำนวนครั้งได้ เพราะในจำนวนครั้งมันต้องมากกว่า 1 รอบอยู่แล้วนะคะ แล้วใน Loop มีแต่ Loop อย่างเดียวไม่ได้ ในลูปก็ต้องมี Event อยู่ข้างใน มีส่วนของ Envet คือเหตุการณ์ ก็คือเหมือน เหมือนจะทำ Loop นี้ ใน Loop นี้ มีเงื่อนไขว่าอย่างไรคะ มันก็จะเข้าไปทำตามเหตุการณ์ต่าง ๆ นะคะ ที่เราตั้งเงื่อนไขไว้ ก็จะมีส่วนนี้อยู่ข้างใน และส่วนที่ขาดไม่ได้ ในเกมทุกครั้งนี่ มันจะต้องมีส่วนของการอัปเดตนะคะ เพราะพอทำไป พอทำเกมไป บางครั้งบางค่ามันโดนบันทึกเข้าไป เหมือนเราคลิก X  ตรงนี้ นึกออกใช่ไหมคะ คลิกตำแหน่ง X ตรงตัวบนนี่ ไม่ใช่ครั้งหน้าเข้ามาตัว X ยังอยู่ นึกออกไหม การอัปเดต การปรับปรุงข้อมูลในเกมที่เราทำนี่ มันต้องมีการอัปเดตเสมอ ไม่ใช่สถานะอย่างไรก็อยู่อย่างนั้น ซึ่งมันไม่ถูกต้องใช่ไหมคะ และส่วนสุดท้าย Quit เพราะมี init

() แล้ว มีเริ่มต้นก็ต้องมีสิ้นสุดใช่ไหม คำสั่ง Quite ให้รู้ว่า จบแล้วนะ เกมจบแล้ว ไม่ใช่เกม เกมเล่นวนอยู่อย่างนั้น ออกไม่ได้ เข้าใจไหม ทำเกม มันจะต้องมีเริ่ม มีสิ้นสุดนะคะ นะคะ ถ้าเกมวนไม่หยุดนั่นก็คือ Error นะคะ ทำลูปไม่ถูกต้องบ้างอะไรบ้าง เพราะฉะนั้น ต้องมีส่วนเหล่านี้ให้ครบนะคะ ขาดไม่ได้เลย นะคะ คือ องค์ประกอบของมันนี่จะอยู่ในนี้ เราพร้อมจะทำเกม XO ของเราหรือยัง ถ้าพร้อมแล้ว เริ่มเลยนะคะ นี่นะคะ อันดับแรกเราจะสร้างหน้าจอให้มันแบบนี้นะคะ หน้าจอของเกม ก่อนอื่น บอกแล้ว เราจะต้องนำเข้า Module หรือนำเข้าคำสั่ง import ก่อนใช่ไหมคะ เพราะฉะนั้น ไปที่ Sublime Text เรา เรา Import type เกมมาแล้ว ในสัปดาห์ที่แล้ว ตรง print ตรงบรรทัดนี้เราไม่เอา เราลบออกเลย นึกออกนะคะ ลบออกไป ในสัปดาห์นี้ที่มีเพิ่มเข้ามาในส่วนของ import จากสไลด์ ก็คือคำสั่ง from pygame locaFrom Pygame พิมพ์ ให้พิมพ์นะ อย่าถ่าย ๆ มันจะช้า เดี๋ยวเปิด sublime Text แล้วพิมพ์ตามแม่เด้อ เพราะเราใช้ Anaconda แล้ว เห็นไหมคะ แค่พิมพ์ คำว่า Fr คำว่า From มันจะขึ้นมา ถ้าตำแหน่งมันอยู่ไม่ตรงคำว่า From นี่ เรากด Enter ได้เลย ถ้าใช่ from อย่างนี้ ไม่ต้องไปพิมพ์ยาวนะ วรรคพอเสร็จ เสร็จ 1 ลักษณะการพิมพ์ Coding นี่ พอกดประโยค เราจะกด Space Bar เพื่อเว้นวรรคเสมอ from from อะไร fromPygame.pygame.localsPy เฉย ๆ นี่ หาคำว่า Pygame เห็นไหม pygame เป็นโมดูล กดลงไป ทันไหม เราใช้ ananconda ตัวนั้นมันจะขึ้น พอใช้ Anaconda ช่วย From Py เราหาไปเลย เราไปที่คำว่า "Pygame" เลย แล้วกด Enter ทันไหม พี่จ๊าบทันไหม เข้า sublime ไม่ได้หรือ ต่อไปใครที่ pygame ขึ้นแล้ว กด จุด . จุด ๆ กด dot 1 ครั้ง พิมพ์ dot 

(.) dot อะไร ดู .locals พิมพ์ LO นะคะ เห็นไหม เห็นไหม แค่ l ก็ขึ้นมาแล้ว กด Enter ได้เลย เห็นไหมคะ ถ้าเราใช้เมื่อกี้ เรา Install Package anaconda ง่ายขึ้น มันจะรู้เลยว่า ถ้าเราเลือกฟังก์ชันหรือโมดูลฟอร์มแล้ว Modle ต่อไปมันจะเป็นอะไร ทำให้เราเขียนไม่ผิดพลาดได้ เราก็เลือก ต่อไป ก็คือเราจะใช้ Module local กด Specbar 1 ครั้งค่ะ เพื่อวรรค แล้วพิมพ์ Import พิมพ์ I แล้วเลือก import พิมพ์ ร เห็นไหม i มันมี if if mant เราก็เลือก คลิกที่ Import แล้วตัวสุดท้าย คือ เห็นไหมคะ ต้องกด Sp เครื่องหมาย Star หรือ ดอกจันนึกออกนะ อยู่ตรงปุ่มตัวเลขนะคะ กดวรรค แล้วเลือก สังเกต ดูง่าย ๆ เช็กว่าพิมพ์ Coding ถูกไหม ดูสีต้องตรงกับแม่ด้วย ดูที่สีเห็นไหมคะ สีของ Codeing เรา เพราะเราใช้โปรแกรมตัวเดียวกัน ความผิดพลาดใช้ Package เดียวกัน เราจะพิมพ์ไม่ผิดแน่นอน ดูได้เลย ดูที่สีได้เลย เราเริ่มที่ส่วนของการ Imneแล้วนะคะ ส่วนต่อไป เริ่มที่ส่วนของการ start game หรือเริ่มเกม Enter ไป เว้นไป 1 บรรทัดนะคะ เราจะอยู่ที่บรรทัดที่ 5 คือพอพอจะเริ่มส่วนใหม่นี่ ความจริงแล้วทุกครั้งแม่จะให้เขียน comment เพื่อจะบอกว่า เรากำลังทำอะไร การเขียนคอมเมนต์คือการกดเครื่เครื่องหมาย Hashtag 

(#) แล้วก็บอกว่า ให้รู้ว่าตรงส่วนนี้ ก็คือ Start เริ่มเกม หรือ Start game คือ Comment เราสามารถเขียนเป็นภาษาไทยหรือภาษาอังกฤษก็ได้ ทีนี้เพื่อความรวดเร็ว ไม่อยากอะไรล่ะ แต่เด็ก ๆ จะเข้าใจยาก เริ่ม ก็พิมพ์เป็นภาษาไทยว่า "เริ่มเกม" ส่วนตัวนี้ก็คือตัว Comment ข้างบนนี่ นำเข้าข้อมูล เป็นส่วนของการนำเข้า Module ส่วนบนนี่มันจะเป็นส่วนของการนำเข้าข้อมูล Module locals ส่วนของ import ต่าง ๆ นี่นะคะ ส่วนนี้เป็นส่วนของเริ่มต้นเกม ให้ดูทั้งภาษาไทย ภาษาอังกฤษ เริ่มต้นเกม หรือ Strt \ในส่วนนี้นะคะ ก็คือ init

() นั่นเอง init

() นั่นเองนะคะ บางคนอ่าย ดูแล้วอ่าน init

() น่าจะใกล้เคียงกว่า ก็คือในนี้ส่วนในบรรทัดที่ 5 เห็นไหมลูก เริ่มต้นนี่ เริ่มต้นโปรแกรมหรือเริ่มเกมนี่ นั่นก็คือเราจะพิมพ์ module pygame.init

() Pygame.init เพราะฉะนั้นตรงบรรทัดที่ 6 เราก็พิมพ์ py ก่อน มันรู้เลยว่าต่อไปจะพิมพ์คำว่าอะไร pygame ตามด้วยเครื่องหมาย 

(,) .init

() i ตัวเดียว เห็นคำว่า "init

()" แล้วใช่ไหม มันเป็นฟังก์ชัน ว่า init เป็นอะไร เป็นฟังกชัน เราก็คลิกเลือกที่ init ฟังก์ชันนะคะเสร็จแล้วเราจะต้องใส่เครื่องหมายวงเล็บ ก็คือกดที่วงเล็บ เห็นไหม กดแค่วงเล็บเปิดวงเล็บปิดมันจะมาทีน เจอไหมคะ เจอไหมคะ หาเจอไหม เห็นไหมคะ บรรทัดนี้เราก็จะได้ pygame.init

() นั่นก็คือบอกว่า ฉันจะเริ่มทำเกมแล้วนะคะ เริ่มต้นแล้ว ต่อไป เราจะไปส่วนต่อไปเลย เข้า module แล้ว สั่ง Start แล้วนะคะ ต่อไป เราก็จะ ทำ loop สร้าง Loop นะคะ ตอนนี้ให้ดู Loop เพื่อจะตรวจสอบว่าพอขึ้นมาแล้วมีอะไรบ้างนะคะ สร้าง loop กับ Event ตรงนี้ คือ Event pygame.event.get มันจะมีรูปแบบของมัน ในส่วนนี้นะคะ จะอยู่ต่อที่บรรทัดที่เท่าไหร่ต่อจากบรรทัดของ เพราะฉะนั้น ก็จะเว้น 2 บรรทัดทุกครั้ง พอจะขึ้น ส่วนของการ coding การ Coding ใหม่ แม่จะเว้น 2 บรรทัดเสมอนะ เพื่ออะไร ก็คือบรรทัดหนึ่งจะเว้นไว้ว่า อีกบรรทัดหนึ่งจะเว้นเพื่อให้เขียน แฮทแท็กหรือ comment ตรงนี้ก็จะบอกไว้ว่าเป็นส่วนการสร้าง Loop และ Event คือที่ใส่ Comment ไว้ เหมือนเวลาบอกไปแก้ loop ใช่ไหม นะคะ คำสั่งแรก อันแรกพิมพ์คำว่า "run" run ก่อน ลองพิมพ์ ๆ ขอโทษ ๆ ต้องพิมพ์ while คำสั่ง why ที่เป็น keyword หรือ why ที่เป็นเราต้องเลือก while loop นะคะ เห็นไหม เห็นไหมคะ มันก็จะขึ้นมาให้ ถ้าเลือกเป็น while ที่เป็นคีย์เวิร์ดดู ถ้าเลือก while แบบคีย์เวอร์ด มันจะเป็นแค่ตัวแดง ๆ อย่างนี้ แต่ของเราบอกแล้วว่า เราทำเป็น Loop ถ้าเป็น loop จะเป็น , นึกออกนะคะ เพราะรูปแบบของ Loop ก็คือมี Loop ก่อน แล้วค่อยมี event อยู่ข้างใน ใช่ไหมคะ ต้องเลือกใช้ให้ถูก คือถ้าพิมพ์ ถ้าเด็ก ๆ ไม่คลิกถ้าเด็ก ๆ ไม่คิดฟังก์ชัน หรือ พิมพ์นี่ แล้วพอเวลา Build หรือ Run โปรแกรมนี่ บางทีมันจะขึ้น Error นึกออกไหม เพราะ ตัวเขียน Coding ยุคใหม่นี่ มันจะเป็นตัวช่วยเลย มันจะช่วยให้รู้ว่าส่วนนี้เป็น Loop นะ ส่วนนี้เป็นฟังก์ชันนะคะ ส่วนนี้เป็น modle ถ้าเด็ก ๆ ไปพิมพ์ ดู Code แล้วพิมพ์ พอเวลาเรามา Run น่ะ เหมือนไปก็อบ Coding ชาวบ้านเขามาแล้วมารันแล้วมัน Error เพราะอะไร บ้างทีไปบางเว็บ ฟ้อนต์ ก็เป็นอีกฟ้อนต์หนึ่ง พอมาใส่ใน Coding มันไม่ได้ เพราะ การ Coding มันจะเป็นการ Copy paste Codeing pหรือไอ้ตัวนี้เป็น Event อะไรพวกนี้ เพราะฉะนั้น ต้องพยายามตามให้ทัน และพยายามจำไว้ Loop เป็นอย่างไร ลักษณะสังเกตที่สีด้วย สีหรือค่าต่าง ๆ หรือตัวองค์ประกอบต่าง ๆ ใน Coding เรานะคะ เพราะฉะนั้น ตอนนี้ whilเพราะบอกแล้ว จะสร้าง loop เพราะฉะนั้น พอ while ขึ้นมา เราต้องเลือก while loop แล้วตามด้วย ก็คือสั่งให้มันทำอะไรคะ โปรแกรมมัน  while เพราะฉะนั้นคำสั่งมันจะยังไม่มีนะคะ เพราะเราเป็นสร้างใหม่ เราพิมพ์เองได้เลย R-u-n Run นะคะ เพราะอะไร เพราะเรายังไม่ได้บอกแค่บอกว่า Loop  นี้ ชื่ออันนี้ แล้วไปบรรทัดบน เราจะมาบอกแล้ว run จะขึ้นแล้ว เห็นไหม run= อะไรคะ ลืมเหมือนกัน ไม่ค่อยได้เขียนนาน ก็คือ run = True ก็คือทำงานเมื่อเป็นอะไรคะ True true ก็คือเป็นจริง เลือก True True Keyword เลย True ที่เป็น K สีเป็นสีม่วง ใน่สวนของตรงนี้ สีแดง ๆ ตรงนี้เราจะลบออกนะคะ เพราะเป็นส่วนของ envnt ก็คือส่วนนี้ ส่วนของตัวนี้นะคะ ก็คือเราจะบอก Event แล้วว่า คำสั่ง... จะบอกว่าอะไร คำสั่งที่ใช้ในการสร้าง envent  ก็คือ for ตามด้วย event เราพิมพ์นิดเดียว เดี๋ยวมันก็จะขึ้นมาเอง ตรงคำว่า past นี่ ลบออก ทำแถบแล้วก็ลบออกนะคะ เคไหม ลบยังคะ เอาใหม่นะ ย้อนให้ดู Ctrl + Z เลือก while loop มันจะส่วนของ past ก็คือส่วนของ event นั่นเองนะคะ แต่เราจะไม่ใช้ตัวนี้ เราจะลบมันออก เราจะลบมันออก ลบมันออก แล้ว past ออกนะคะ เข้าไป ก็คือ for เห็นไหมคะ for ลองดู ถ้าเลือก for loop เป็นอย่างไร ถ้าเลือก for loop เห็นไหมคะ จะเป็นอย่างนี้ แต่ของเรา นี่เห็นไหมคะ ดูอีกตัวหนึ่ง เมื่อกี้เลือก for loop ทีนี้เลือก for ที่เป็นคีย์ เห็นไหมคะ เป็น Keyword จะมีแค่นี้ จะไม่มีจึก ๆ ต่อ แต่ตอนนี้ให้เลือก for loop ก็ได้ ใช้ได้ทั้ง 2 ตัวนะคะ เลือก for loop แต่ตรงนี้ loop ของเราไม่ใช่ X แต่จะเป็น event ev พิมพ์ ev แล้ว event จะขึ้นมา เห็นไหมคะ Event ทำไมเป็นตัวใหญ่ ทำไมเป็นตัวเล็ก in ตามด้วย pygame pygame ตอนนี้เราจะทำเป็น Event นะคะ เพราะฉะนั้น เพื่อไม่ให้สับสน ๆ จะง่ายกว่า ถ้าเป็น Event คำสั่ง for ให้เลือกเป็นคีย์เวิร์ด เพราะมันเป็น event มันไม่ใช่ loop นะคะ เสร็จแล้วพิมพ์ event เลย event in "In" เคีย์เวิร์ดนะคะ แล้วก็ pygame module.event นะคะ เห็นไหมคะ .event นี่เป็น Module .event นี่ เป็น Module เหมือนหรือยัง ต่อไปตามด้วย . get function นะคะ ถ้า get_

() ใส่วงเล็บนึกออกนะ วงเล็บเลย วรรคก่อน แล้วก็วงเล็บ .get แล้วตามด้วย get เป็นฟังก์ชัน ต้องใส่วงเล็บนะคะ โอ.เค. ไหม ทันไหมคะ เสร็จแล้วปิดด้วยเครื่องหมาย :นะคะ colon ปิดหลัง ฟังก์ชัน โคลอน : ส่วนต่อมา ก็คือการเลือก envet นั้นมาตรวจสอบเงื่อนไข if event ถ้า =pygame.quit

() นี่ หมายก็คือถ้าเงื่อนไขนี้ถ้าเราเลือกออกนี่ เลือกคำสั่งออกนี่ มันก็จะจบการทำงานนั่นเอง ต่อไป if เลือก if เลือก if conเห็นไหมคะ if Event ของเราเป็น statement ตอนนี้เป็น Statement . อะไรคะ .type นะคะ .type เห็นไหมคะ type. == .type เลือก == เครื่องหมาย เท่ากับของ python 2 ครั้งนะคจะต้องพิมพ์ = 2 ไม่ได้นะคะ = pygame Pygame เลือก module .quit

() ตัวใหญ่นะคะ QUIT ที่เป็น Statement ที่เป็นฟังก์ชัน เห็นไหม เหมือนหรือยัง ๆ ตรงบรรทัดใส่คำว่าอะไรคะ ใส่ฟังก์ชัน run เห็นไหม ใส่ statment run = แต่ถ้าเป็นค่าที่แน่นอนนี่ เครื่องหมาย 

(=) == ตรงตอนเปิดเลือก run เป็น true F Keyword ก็คือ False เราได้ส่วนของ loop กับ event ตรงนี้คือ event นะคะ ส่วนนี้ คือ loop เห็นไหม ส่วนของ while คือ สนนย ส่วนของตรงนี้ก็คือ event นะคะ ต่อไป เราจะไปส่วนต่อไป ส่วนของ มี มีนำเข้า มีเริ่มต้น มีเริ่มต้น มีเงื่อนไข แล้วก็มามีส่วนจบนะคะ ก็คือ pygame.quite

() นะคะ ทำ hashtag หรือ คอมเมนต์เหมือนเดิม ใส่ Comment ไว้ว่า สิ้นสุดเกมหรือ end game จะได้รู้ เลือก Module นะคะ แล้วก็ตามด้วย .qute quit

() ตัวเล็ก q ตัวเล็ก นะคะ หัวข้อ บอกแล้วถ้าเมื่อเลือกฟังก์ชันเด็กจะเลือกอะไร อะไร ๆ ไม่ทันแล้วบอกนะ เพราะมันต้องค่อย ๆ เป็น ตรงนี้ ถ้าลอง run ดู ถ้าลอง Run ดู มันอาจจะไม่ขึ้นอะไรนะคะ Ctrl + B Control +ฺ ฃจำได้นะ contral แล้วก็ตัว B เห็นไหมคะ pygame มันก็จะขึ้นมาว่า Run แล้ว Pygame มันก็จะขึ้นมาว่า run แสดงว่า แสดงว่าเราเขียนโค้ดถูกนะคะ อันนี้บอก Loop ไว้ก่อน มีแค่เริ่มกับสิ้นสุด ยังไม่มีปฏิกิริยาอะไรเลย หน้าจอก็ยังไม่ขึ้น ต่อไป สิ่งต่อไปที่เราจะทำ เราจะสร้างหน้าจอ ก็คือกำหนดขนาด กว้าง 300 สูง 300 นะคะ จะสร้างหน้าจอเกมเราแล้วนะคะ เพราะฉะนั้น อยู่ต่อจากอะไร อยู่ต่อจากบรรทัดเริ่ม start ใช่ไหมคะ ต่อจาก init

() เพราะฉะนั้น เราจะไปที่บรรทัดที่ต่อจาก ใส่ comment ตอนนี้เราจะสร้างหน้าจอ XO เราจะสร้างหน้าจอเกม XO เราแล้วนะคะ จะได้รู้ว่าอยู่ตรงส่วนไหน ก่อนอื่นเลย กำหนดค่า ตัวแปรใช้ชื่อว่า screen_width สกรีน ก็คือหน้าจอเห็นไหม จะได้รู้ว่าตรงนี้เป็นส่วนของความกว้าง กำหนดความกว้าง screen_height ก็คือกำหนดความสูงของหน้าจอ เห็นไหมคะ คือเวลา บอกแล้ว การเขียน ตัวแปรควรจะสื่อให้เห็นscreen อันนี้มันเป็นชื่อตัวแปร เพราะฉะนั้นพวกนี้จะไม่ขึ้นเพราะเป็นการตั้งใหม่ เราตั้งเอง นึกออกนะคะ ไอ้พวก Module Funches เมื่อกี้ตามด้วย Unders สกรีน whil หน้าความกว้างของหน้าจอนะคะ เท่ากับ 300 นะคะ ตัวต่อไป ก็คือ  สร้างหน้าจอเกมแล้วนะคะ สร้างหน้าจอเกมแล้วนะคะ 300 screen_hight ก็คือ กว้าง 300 สูง 300 มันก็จะประมาณตัวอย่างนั่นละ ส่วนต่อมา เมื่อกำหนดขนาดแล้ว เขาเรียกว่าเป็นการเปิดใช้มัน ต้องเรียกใช้มันนั่นเอง เห็นไหมคะ ก็คือคำสั่งต่อมานะคะ ตรงส่วนนี้ Screen = Pygame เห็นไหม Display เราให้แสดง หรือให้เล่นนะคะ คำสั่งเปิดหน้าจอเราก็ บรรทัดที่ 2 Pygame.setcaption setcaption ก็คือใส่ชื่อ ใสชื่อให้มันน่ะ ชื่อตรงหน้าจอน่ะ เดี๋ยวตอนแรกจะให้ดูแบบยังไม่ใส่ชื่อมันจะเป็นอย่างไรนะคะ เอาแค่ Screen เท่ากับนี้ก่อน เพราะฉะนั้น เมื่อ เมื่อสร้างแล้ว เสร็จแล้วเรียกใช้มัน ก็คือ screen =module Pygame.dispay นะคะ เราจะเรียก Module นี้มาใช้งาน ก็คือใหมันเลือกใช้หน้าจอที่เราสร้างนี่ เรียกขึ้นมานะคะ .set Set อะไร เราเลือก set mode .set เห็นไหม มี set_caption set_game นะคะ เพราะหน้าจอมันจะเป็น Mon นะคะ เลือก Set Mode เมื่อมันเป็นฟังก์ชัน ใส่อะไรคะ วงเล็บใช่ไหม ค่าที่อยู่ข้างใน ก็คือ ค่าตัวนี้ ใช้ตัวแปรเข้าไปเลย ใส่ชื่อตัวแปรเข้าไปเลยนะคะ ใส่ Screen อะไรก่อน screen width ก่อน แล้วก็ตามด้วย screen_higคือคั่นด้วย , เลือก 2 ตัวนะคะ Screen เมื่อกี้ Screen width ไปแล้ว เป็นรายการต่อไป ลอง Ctrl + B ดู นี่บางทีมั้น Error มาเตือนอย่างนี้ เพราะอะไร เพราะในบรรทัดที่ 46 บอกว่า Error ที่ขึ้นนะคะ ให้ดูตัวอย่าง มันบอกว่า Unexpected Indent ก็คือต้องมาแปลอีก วงเล็บมี 2 วงเล็บ unspace ก็คือการเยื้อง ก็คือรูปแบบเรายังไม่เสร็จนะคะ ตอนเราเยี่ยงนี่ เยื้องผิดก็ไม่ได้ เยอะ เยื้องผิดก็ไม่ได้นะคะ เยื้องเข้าไปก็ไม่ได้เห็นไหมคะ มันจะ Error ทันทีนะคะ ต่อด้วยการใส่ชื่อนะคะ กำหนดชื่อที่หน้านี่ pyที่หน้าจอนี่ display.game ฟังก์ชัน setcaption เข้าไป เห็นไหมคะ ในเครื่องหมายคำพูดนี่ จะมีตัวนี้ เพราะฉะนั้น ก่อนอื่น เราก็พิมพ์ ดูด้วยนะคะ ระยะเยื้องไม่เยื้ยงเข้าไปนะคะ มันขึ้น ไม่ถูกต้อง ไม่เยื้องนะคะ ไม่เยื้อง เพราะมันไม่ใช่ส่วนของ event นะคะ เพราะฉะนั้น ต่อไปพิมพ์ Module Pygame.display_module .set set เราเปลี่ยนเป็น set caption มีหลาย Set เลย Set Caption Set gamma ถ้าจะใส่รูป ให้เลือก set captions ให้เลือก set_icon ก็คือถ้าในหน้าต่างเกมเราให้เลือกในรูปด้วย เลือกที่ Set icon โอ.เค. ไหม แต่ตอนนี้จะใส่แค่ชื่อก่อน จะใส่แค่ชื่อก่อน ก็เลยเลือก set caption ใส่ชื่อ เมื่อมันเป็นฟังก์ชัน อย่าลืมอะไรคะ ใส่วงเล็บทุกครั้ง ต้องจำให้แม่น ถ้าเลือกเป็นฟังก์ชันโอ.เค. ไหม ตอนนี้เราได้ pygame ให้ Pygame นี่ pygame นี้ ในชื่อนะคะ ใส่เครื่องหมาย single เครื่องหมาย 

(') อยู่ที่ตัว ง. งู เห็นไหมลูก ใช่ไหม double ก็คือมี 2 อัน ตอนนี้เราใส่ single quote ดูแบบไม่มีชื่อ ก็คือว่างเปล่าไว้ ใส่ aaa อย่างนี้ไปก่อน จะให้ดูก่อน ๆ จะลอง Run ดู ว่าขึ้นไหม นี่เห็นไหม ๆ เห็นไหมคะ จะได้หน้าจอ 1 หน้าจอ ขนาด 300 x 600 ตรง caption ก็คือส่วนนี้ ส่วนข้างบนนี้ คือ captions ถูกไหมคะ นี่ตรงส่วนนี้ คือ Icon ถ้าเราต้องการเปลี่ยนรูปน่ะ เราต้องเปลี่ยนจาก SetCapiton เป็น แล้วเราเปลี่ยน aa เป็นคำว่า game แล้วก็ X แล้วก็ ลองดูนะคะ แล้วลอง control b ดูถ้าใครพิมพ์ผิด ไอ้นี่จะไม่ขึ้นใช่ไหม เราจะไม่ได้หน้าต่างตรงนี้ขึ้นมา แสดงว่า Codeing ผิดไปแล้ว กดอะไรคะ กด Ctrl เมื่อได้ค่านี้แล้ว เดี๋ยวตัวนี้ค่อยมาเพิ่ม กด ctrl b ทุกครั้ง เพื่อจะ Run Run โปรแกรมดูนะคะ คำสั่ง Ctrl + B จะเป็นการ Run Codeing ของเราทำงานได้ไหม ถ้ากด ctrl b แล้ว ไอ้หน้าดำ ๆ นี้ ขึ้นมานี่ เรา Coding ถูก ไม่ขึ้น ไม่ผ่าน ผิดใช่ไหม เดี๋ยวไปดูให้ เดี๋ยวนะคะ คือ เดี๋ยวเปิด Code ให้ดู นี่สังเกตที่ coding เรานะคะ ระยะการเยื้องแต่ละครั้งนี่ ก็มีผล ถ้าเมื่อใดที่พอ Run ไปแล้ว เดี๋ยว ๆ เดี๋ยว Test ให้ดู เหมือนเมื่อกี้แม่ให้มันเยื้องไป พอกด ctrl b ปุ๊บ นะคะ ตรง Error บรรทัดที่ 13 นี่ มาดูตรงนี้ เห็นไหม ตรงประโยค มันเลื่อนนี่หว่า เห็นไหมคะ identation Error เวลาเช็ก Error ให้มาก่อนที่ Identationนะคะ แล้วมันจะมีบรรทัดต่อมา ประโยคต่อมาบอก แจ้ง Error ว่า Unexspected inหมายถึงการเยื้อง เราเยื้องไม่ถูก ก็คือพอมาเยื้องตรงนี้ เพราะบอกแล้ว บางตัวมันเป็นบางตัวมันเป็น module บางตัวมันเป็นฟังก์ชันแต่บางตัวมันไม่ใช่ มันเป็นแค่ตัวแปลหรือประกาศค่าเฉย ๆ เพราะฉะนั้น การเยื้องก็จะมีผลกับ Coding ถ้าขึ้นอย่างนี้ปุ๊บ เด็ก ๆ จะต้องไปแก้การเยื้อง ก็คือลบออก ไม่ให้มันเยื้อง ก็คือคลิกตรงนี้แค่นั้น เสร็จแล้วแล้วปิด แล้วลอง run ใหม่ ปิดไป แล้วก็ลอง Run ใหม่นะคะ ลบออกเพื่อเคลียร์หน้าจอให้เห็นว่ามันจะขึ้น Error อีกไหม นี่เห็นไหม Error ก็หาย แค่นั้นเองนะคะ ก็จะได้หน้านี้ ใครยังไม่ได้ หน้าต่าง หน้าจอเกมขึ้นมา ใครยังไม่ได้ ใครยังทำไม่ได้ เพราะฉะนั้นเวลา Coding ต้องใจเย็น ๆ ต้องตรวจ ต้องเช็ก คือ ถ้าหมั่นเช็กบ่อย ๆ Ctrl + B บ่อย ๆ มันก็จะเหมือนเราเช็กว่าคำสั่งที่เราพิมพ์ มันถูกไหมนะ code ที่เรา Code ลงไปมันถูกไหมด้วย ทำไมพิมพ์ 2 บรรทัด แม่ Ctrl + B อีกแล้วนะคะ ว่าที่เรา Coding ไปในแต่ละบรรทัดมันถูกต้องไหมนะคะ ถ้าเยอะ ๆ ถ้าเยอะ ๆ มันยิ่งจะแก้ยาก ต้องพยายามทำไปทีละนิด ๆ แล้ว Coding แล้วก็ Run ดูนะคะ โอ.เค. นะ ได้ยัง ฝั่งนี้ได้จอยังจ๊าบยังไม่ได้หรือ เดี๋ยวรอเพื่อนแป๊บหนึ่งนะคะ พี่จ๊าบดูนะครับ ที่บอกถ้าขึ้น ident เมื่อไหร่เกี่ยวกับการเยื้องนี่ สังเกตของจ๊าบไปผิดตรง for งเพราะฉะนั้น ฟังนะคะ ถ้าไม่ทันต้องรีบยกมือ เพราะเด็ก ๆ จะมาพิมพ์ตามไม่ได้ แม่บอกแล้วนะ เพราะมันมีทั้งเป็น Module เป็นฟังก์ชัน เหมือนจ๊าบ จ๊าบไม่ทันเลยใช้วิธีพิมพ์ Text หมดเลย ไม่รู้จักว่าเป็น Module ว่าเป็นฟังก์ชัน นึกออกไหม มันก็เลยขึ้นเตือน Error simtext erแสดงว่าเด็ก ๆ ไปพิมพ์เอา พิมพ์ตามที่เห็น ไม่ใช่นะคะ เราต้องเลือกด้วย เพราะเราเปิดใช้ Package Anaconda แล้ว มันเป็นฟังก์ชันหรือเปล่า คือ มันไม่ใช่ให้เรารู้นะ ต้องเข้าใจ คนที่จะรับคำสั่งเรา คือ คอมพิวเตอร์ นึกออกหรือเปล่า นะคะ คือคอมพิวเตอร์มันก็จะแยกส่วนออกได้เลย อ๋อตรงนี้เป็น loop ตรงนี้เป็น Event นึกออกไหม ตรงนี้เป็นตัวแปรอะไรอย่างนี้นะคะ โครงสร้างแต่ละส่วนที่แม่ทำให้ดู แต่ละส่วนมันไม่เหมือนกันถูกไหมคะอเพราะฉะนั้น เออ ถ้าตาม คลิกคลิกตามไม่ทัน ต้องยกมือ ต้องรีบยกมือ จะกลายเป็นตัวเองไปพิมพ์จะไม่ถูกนะคะ เพราะฉะนั้น ต้องรีบยกมือนะลูก ได้แค่หน้าจอ ยังไม่ได้อะไรคะ ช่องตารางใช่ไหม เราต้องมี ใช่ไหม จะมาติ๊ก XO ลง รู้ไหมคะ ใครจะถูก ไม่เห็นอะไรเลยนะ ต่อไป ลำดับต่อไป เราจะสร้างเส้น Grip หรือตารางนั่นเองนะคะ กี่โมงแล้วนี่ วันนี้เสร็จไหมนี่ ได้เท่าไรก็เท่านั้นล่ะนะ ใจเย็น ๆ เราไม่รีบ ๆ ตอนนี้ได้ตัวพื้นที่แล้ว ก็ต้องมาทำหน้าจอมันต่อนะคะ ต่อไปเราจะสร้างส่วนของ Grid หรือส่วนของไอ้ตัวนี้ค่ะ นี่ ๆ เราจะให้มันมีเส้นใช่ไหม เส้นอย่างนี้ขึ้นมาเพราะ เราจะได้จิ้ม X ลงไปได้ จิ้ม O ลงไปได้เมื่อกี้มันไม่มีเส้นใช่ไหมคะ ตอนนี้เราจะมาใส่เส้นให้มันนะคะ เพราะฉะนั้นจะย้อนกลับไปก่อนสร้าง Grid นะคะ กดไว้ไปหน่อย ประโยค ส่วนต่อไปที่เราจะทำ ก็คือตรงส่วนนี้ เห็นไหมสีเขียว ๆ ที่เรา ส่วนนี้มันจะเป็น เราจะมากำหนดฟังก์ชันนะคะ คำที่มีคำว่า "D-e-f" นี่ def หมายถึงการกำหนด กำหนดค่า กำหนดค่า หรือนิยามค่า เพราะฉะนั้น พอ definition ปุ๊บ ที่แม่บอก มีวงเล็บใช่ไหมคะ นั่นก็คือเราจะมากำหนด ฟังก์ชัน ทำเส้น ฟังก์ชันนี้เลยชื่อว่า Def Def ตัว Grid ตัวบนนี่นะคะ ก็คือวาดเส้น ตัววาดเส้นฟังก์ชันนี้จะใช้สำหรับในการวาดเส้น มีอะไรบ้าง มีระบุ BG BG ก็คือ Blackgro Grid Grid ก็คือเส้น ระบุเส้น screen.screen.field ก็คือระบุ บอกว่าเห็นไหมคะ Screen.fill ก็คือเติมสีให้หน้าจอเติมสี background ส่วนตรงนี้เป็น Loop พอมี for เงื่อนไข เพราะอะไร เพราะเส้นเราไม่ได้วาดแค่เส้นเดียวเส้นเราจะต้อง เพราะตารางเรามันจะเป็น 9 ช่อง มันก็ต้องมีเส้นแนวตั้ง 3 แถว ใช่ไหมคะ แนวนอน 3 แถว 3 คูณ 3 เป็น 9 ส่วนนี้เป็นตัวเรียกใช้งานคำสั่งมันนะคะ อันดับแรก ๆ ส่วนหน้าจอที่มันขึ้นมาอย่างนี้ให้เราปิดไปเลยนะเด็ก ๆ หน้าจอที่เรา Run ขึ้นมา เราปิดไปมาดู เราจะอยู่ต่อจากบรรทัดของอะไรคะ บรรทัดส่วนของการสร้างหน้าจออยู่ ก็คือ อยู่ตรงนี้ บรรทัดที่ 16 ใส่ Comment เข้าไปหน่อย จะได้รู้ว่า จะได้บอกว่าตรงนี้เป็น... ก็คือตรงส่วนนี้เราจะกำหนด function วาดเส้นตารางนั่นเองนะคะ จะได้รู้กัน คือตรงบรรทัดเด็ก ๆ อาจจะไม่เป๊ะ เพราะแม่เว้น 2 ที แม่เว้น 1 ที คือ โดยปกติ บอกแล้วว่าถ้าขึ้นอันใหม่จะเว้น 2 บรรทัดใช่ไหมคะ เพื่อบรรทัดหนึ่งจะเขียน Comment ไว้ อีกบรรทัด คำสั่งแรกก็คือ เลือก Dev. ที่เป็นฟังก์ชัน เห็นไหม ไม่เอาคีย์เวิร์ด เอา def ที่เป็นฟังก์ชัน ก็จะขึ้นมาแบบนี้ เลือกให้ถูกเห็นไหมคะ อย่าพิมพ์นะคะ แม่บอกแล้วใช่ไหม ลบก่อน เผื่อไม่ทัน พี่จ๊าบดูดี ๆ นะครับ มันจะมีเห็นไหมครับ def ที่เป็นข้างหลังก็จะบอก def_ def คียเวิร์ด ที่เป็นฟังก์ชัน เพราะในคอมเมนต์ที่ระบุไว้ข้างต้นบอกว่าเราจะกำหนดฟังก์ชัน def ที่เป็นฟังก์ชัน โอ.เค. ไหม ก็จะได้รูปแบบฟังก์ชันนั้นมา พอได้รูปแบบอย่างนี้มาก็จะทำให้เราเลือกใช้งานมันง่าย แล้วก็ถ้าพิมพ์เฉย ๆ มันก็จะเป็น text ธรรมดา ต่อไป ตรงตำแหน่งฟังก์ชัน ตรงนี้นะคะ คลิกให้... แล้วก็ทำไฮไลต์ให้มันครอบคำว่าฟังก์ชันคลิกค้างแล้วก็ลากเมาส์ ให้มันครอบคำว่า function แล้วก็ลบออก เพราะเราไม่ได้... แป๊บหนึ่งนะคะ เพราะฟังก์ชันตัวนี้เราจะกำหนดขึ้นมาใช้เอง เพราะฉะนั้น เราก็ต้องสร้างชื่อให้นะคะ บอกแล้ว ชื่อของมันที่เราเขียนไว้ ก็คืออะไรคะ draw grid d-r-a-w อันนี้น่ะต้องพิมพ์เอง เพราะมันเป็นฟังก์ชันที่เราจะสร้างเอง ก็พิมพ์ d-r-a loop _แล้วก็ grid ทีนี้เด็กจะต้องจำนะคะ ว่าเด็ก ๆ จะต้องจำนะคะ ว่า ที่แม่บอกว่า อันนี้เราตั้งเองนี่ เวลาสะกดน่ะ แม่เขียนอย่างนี้แต่เครื่องบางคน Sreen ตัวเองพิมพ์อะไรไปดูด้วยเช็กด้วย ด้วยนะครับ เพราะพอมาเรียกใช้ ไม่รู้จัก ให้นึกถึงการตั้งชื่อตัวแปร ตัวเล็ก ตัวใหญ่ก็มีผลน่ะที่บอก เพราะฉะนั้น พิมพ์ใหฟ้ ดูด้วยนะคะ ว่าพิมพ์อย่างไร สมมุติ ถ้าเกิด draw grid  ไม่เติมอย่างนี้ แล้วเด็ก ๆ มาเรียกใช้ draw grid ที่มี s มันก็จะไม่เจอ นึกออกนะ มันจะขึ้นตามนั้นให้ดูด้วย เอาแบบตัวอย่าง จะได้ไม่มึนงง เอาแบบตัวอย่างจะได้ไม่มึนงงสับสน เสร็จแล้วมาดู ส่วนย่อหน้าต่อมา ส่วนของ partมันเป็นแค่ส่วนบอกว่า มันจะเป็นส่วนที่ต่อ เราก็ลบออกเหมือนที่บอกนะคะ ตามด้วย ต่อไป ก็คือบอกว่า for ใช้ for นะคะ for x in range = เอ้ย ดู ๆ ดู for ก่อนเลือก for ที่เป็น loop เลือก for ที่เป็น loop เพราะมันเป็น loop ไง ให้มันทำซ้ำ เห็นไหมคะ นี่ ๆ บรรทัดที่ 2 พิมพ์ for ก่อน ใช่ไหม พอพิมพ์ for ปุ๊บ ใหตรงนี้เอา X เหมือนเขา เพราะว่ามันคือเริ่มที่แกน X โอ้โห ทำไมเพิ่งมาคุณลูก แล้วหนูจะทันเพื่อนไหมนี่ หนูได้นั่งดูแล้วงานนี้นะคะ เราใช้ Rang เฉย q นะคะ ก็คือบอกตำแหน่งที่ 1 ถึง ตำแหน่งที่ 3 ในส่วนของ Past เราจะเป็นเรียกใช้ pygame module ขึ้นมา เลือก pygame module นะคะ เลือกให้ถูกนะ เลือก Pygame module แล้วตามด้วยอะไรคะ .romodule ที่ชื่อว่า draw นะคะ .draw เห็นไหมคะ drwเลือก module ที่ชื่อว่า drawตามด้วย . อะไรคะ line line ฟังก์ชัน ใส่อะไรคะ ใส่อะไร จำได้ไหม line ฟังก์ชัน พอเป็นฟังก์ชันต้องใส่วงเล็บใช่ไหผมม แล้วในฟังก์ชันใส่อะไร เรียกใช้ Screen เห็นไหม เรียกใช้อะไร เห็นไหมคะ ไปเรียกใช้ตัวนี้มาใช้งานเห็นไหม ตัวหน้าจอที่เราตั้งไว้ มาใช้นะคะ เพราะฉะนั้น พิมพ์ screen S-c เอ้ยมือไปไหนแล้ว ขอโทษ ๆ เลือก screen ที่เป็น Statement ตัวนี้ โอ.เค. นะ เลือกให้ถูกนะ ดูดี ๆ นะคะ พี่จ๊าบทันไหมลูก Screen เลือก Screen พอพิมพ์ screen นี่ เลือก statemant นะคะ ทีนี้ตัวต่อไปจะมี grid ทีนี้ ตัวต่อไปจะมี grid กับไอ้นี่ใช่ไหม แล้วก็ grid นะคะ พิมพ์ พอใส่ Comma แล้ว comma แล้วก็ก็ต้องเว้นวรรคนะคะ อันนี้พิมพ์เอง เพราะเรายังไม่ได้เปิดใช้งานมัน พิมพ์ grid เอง พิมพ์ Comma ตามด้วย Comma แล้วก็ วรรควงเล็บ ใส่วงเล็บนะคะ เพื่อบอกตำแหน่ง ตำแหน่งเริ่มต้นเห็นไหมคะ 0 เริ่มที่ 0 โดยที่ X คูณนะคะ คูณก็คือเครื่องหมายดอกจันคูณ 100 ใส่วงเล็บปุ๊บ 0 แล้วก็ x x ในที่นี้ ก็คือ x นะคะ เลือก x statement เพราะนี่ก็คือค่านี้ ตามด้วยเครื่องหมาย วรรค แล้วก็ตามด้วย star แล้ววรรค แล้วก็ตามด้วย Star หรือ ในที่นี้หมายถึงคูณนะคะ คูณแล้วก็วรรค จำนวน 100 ดูดี ๆ นะคะ เมื่อใดใดที่มันเป็นสัญลักษณ์หรือตัวดำเนินการทางคณิตศาสตร์ สังเกตสี สีมันจะเป็นสีนี้ ดูให้ดีด้วยล่ะ แล้วก็ตัวนี้ ก็คือจะสร้างเส้นในแนวนอนนี่ สร้างเส้นในแนวนอนเห็นไหม ต่อไปก็เพิ่ม Comma แล้วก็เพิ่มหลังปิดของค่าเมื่อกี้ ใส่ comma วงเล็บเพิ่มเข้าไปอีก 1 วงเล็บ screen ตอนนี้เลือก screen_width ไม่เอา Hinth Screen width X x 100 นะคะ X มีค่าเป็น X ใส่ Comma แล้วก็ตามด้วย X ที่เป็น stement แล้วก็ตามด้วย star หรือเครื่องหมาย * แล้วก็ตามด้วยค่า 100 ทีนี้ copy ค่ะ เหมือนกัน เปลี่ยนไปเปลี่ยนแค่ เดี๋ยวแม่บอกว่าไปเปลี่ยนตรงไหน กด Ctrl + C แล้วก็ Copy แล้วก็กดวางได้เลย อย่าลืมระยะเยื้องนะคะ เดี๋ยวจะผิดอีก ต้องเยื้องให้มันตรงกัน เพราะมันเป็นส่วนเดียวกัน เราเปลี่ยนจากค่าที่เราต้องเปลี่ยน เพราะเมื่อกี้ screen เปลี่ยนเป็น Screen High แทน เห็นไหม เปลี่ยน width ใช่ไหมคะ เราเปลี่ยนเป็น Hingt นะคะ  เพราะฉะนั้นตรงนี้ต้องเปลี่ยน อีกท่าหนึ่ง เปลี่ยนตรงค่า X เห็นไหมคะ ช่องนี้ จาก 0 ใส่ X เข้าไปแทน X อันนี้เป็นสลับค่ากันน่ะ ค่ามันจะตรงกันข้ามกัน ไม่เหมือนกัน เห็นไหม x คูณ 100 แล้วก็ 10 : แล้วก็ 0 เห็นไหม ตอน Set สลับ อันตรง width High นี่เป็น X x 100 สลับตำแหน่งกันแค่ 2 ที่ เห็นไหมคะ screen_ เหมือนเดิมไหม เอา คูณ 100 ขึ้นมาก่อนนะคะ เอา x 100 ขึ้นมาก่อน สลับตำแหน่งกัน แค่นั้นล่ะ สลับตำแหน่ง โอ.เค. ไหม เช็กค่า เพราะคำสั่งอื่นเหมือนกันนึกออกนะลูกนะ มาเปลี่ยนตรงค่าที่ใส่นี่สลับตำแหน่งกัน แค่นั้นล่ะ เห็นไหม แม่บอกแล้วนะ เวลาพิมพ์นี่เห็นไหมคะ ตรง screen hight กับ ไเฉย ๆ มันหายไป วิธีแก้ก็ไปเพิ่ม เข้าไปตรงนี้ก็ได้ มันก้จะขึ้นที่ค่านี้ เวลาเรียกใช้มันก็จะขึ้นมา เพราะตรงนี้มันเป็นตัวแปรที่เราตั้งชื่อเองนะคะ เพราะฉะนั้น ใครตั้งอย่างไร ของตัวเองมันก็จะขึ้นนึกออกนะ คือ ถ้าใครตั้งแค่ screen แล้วก็ w เฉย ๆ มันก็จะไม่ขึ้น นะคะ เพราะฉะนั้น ต้องดูด้วยว่าตอนตั้งของตัวเองตั้งอย่าไงวทำไมพอเวลามัน run ของแม่มีคำว่า screen hight ตัวเองไม่มี ไม่ใช่ ตัวเองพิมพ์ไม่ครบ พิมพ์ชื่อไม่ตรงกันมันก็จะไม่รู้จักนะคะ เพราะมันจะเป็นชื่อคนละตัว มันจะเป็นตัวแปร เพราะฉะนั้นถ้าชื่อตัวแปร ถ้าพิมพ์ไม่เหมือนกัน เวลาเรียกใช้น่ะ ค่ามันน่ะ มันก็จะไปตามชื่อตัวแปรที่เราตั้งไว้น่ะนะคะ มันไม่ได้หายไปไหนหรอก มันอยู่ โอ.เค. ไหม ไปต่อนะคะ ได้ส่วนของ กำหนดฟังก์ชันได้ส่วนของ Loop มาเพิ่มตรงส่วนนี้ต่อนะคะ ส่วนของ เห็นไหมคะ กำหนดค่า ของ Backg ค่าของเส้น แล้วก็ค่าของ screen ว่าจะใส่เข้าไปส่วนบน มันอยู่บรรทัดข้างบน for ตัวแปรแรกชื่อ bg = bg หมายถึง Background นั่นค่าของมัน 255 255 200ตำแหน่งนี่ คือ x แกน X แกน Y นั่นล่ะ แกน X Y แล้วก็สี สีที่จะ ขนาด พื้นที่ที่จะใส่ ประมาณนี้ล่ะ ลองดูนะคะ เปป็นฟังก์ชันนะคะ วงเล็บ255 Back255 255 200 โอ.เค. กำแล้วว่าใส่เข้าไปจะพอดีอันนี้ ต่อไปตัวแปรที่ชื่อว่า "grigก็เธอทำตามไม่ได้นี่ มันไม่ได้เริ่มมาแต่ต้น ไม่ค่อยสบายหรือเปล่า ถามน้องสิ ไม่สบายก็นอนเสีย เท่ากับ grid นี่คือ เส้น เห็นไหมคะ ขนาดเส้น ความยาว ความสูงของเส้นน่ะ เส้นมันมี 3 เส้น นึกออกนะ วงเล็บเหมือนเดิมนะคะ ใส่วงเล็บเข้าไป 50 เหมือนกันนะคะ เท่ากัน ก็คือความกว้างของช่องตาราง เป็น เขาเรียกว่า เป็นอย่างไรล่ะ เป็นลักษณะของ Dimension น่ะ มิติน่ะนะคะ 3 ล็อก มี grid แล้ว ใส่อะไรอีก ตัวแปร screen field ไปเรียกใช้ screen นี้ ไปเรียก screen นี้มาใส่ ก็พิมพ์ Screen เลือก screen statement นะคะ screen.fill field ใช้คำสั่ง field นะคะ bg เรียก bg มา เห็นไหมคะ โอ.เค. ไหม ก็คือตัวนี้ ใส่Background ตัวนี้ ใส่ Background ตัวนี้เข้าไป ใช่ bg นี่ไง เราตั้งค่าว่า "bg" เห็นไหม ตัวแปรสำหรับเก็บ Backgr 255, 255, 200 bg นะคะ grid 50 50 50 แล้วเราก็เรียกเรียก screen เรียกหน้าจอที่เราสร้างไว้ข้างบนนี่มาเติม fill เห็นไหมคะ ฟังก์ชัน fill ก็คือใส่ BG เข้าไป ใส่ Background เข้าไปสังเกต มันจะไปเรียกตัวนี้มา เห็นไหม มันจะรู้เลย อะไรมาใส่ ไปต่อนะคะ ตต่อไป จะประกาศตัวแปร line_width line_width ก็คือตัวแปรที่ความกว้างหรือความหนา นั่นเองนะคะ คือถ้าลอง Run ดู เส้นมันจะบาง ๆ แต่พอใส่ตัวแปรที่ชื่อ line_widrh = เข้าไปน่ะ ความหนาของเส้นจะมีมา ก็คือเท่ากับ 6 ใครจะเอาหนากว่านั้นก็ได้ เดี๋ยวใส่คอมเมนท์ก่อน ส่วนอันนี้จะเอาไว้ บอกให้รู้ว่าตรงส่วนนี้เราจะใช้ประกาศที่จะใช้งานต่าง ๆ นะคะ ตัวแรก ตัวแปรแรกเราจะใช้ชื่อว่า "line_line แล้วก็วรรค = รูปแบบการประกาศตัวแปร ก็คือพิมพ์ชื่อตัวแปรแล้วตามด้วยค่าที่ต้องการให้ค่าเริ่มต้น หรือค่าที่แน่นอน ให้ตัวนี้มันทำงานนะคะ ก็คืออยากได้เส้นที่มีความกว้าง 6 น่ะค่ะ ก็เลย line_width = 6 พอประกาศไปแล้ว เราก็จะมาเรียกใช้มัน เพราะในหน้าจอนี้นะคะ เรียกใช้ได้อย่างไร เรียกใช้ได้อย่างไร ก็จะพิมพ์หลังเครื่องหมายวงเล็บปิดของ screen_width นะคะ ก็ใส่ colon แล้วก็วรรค line l พิมพ์ -li-แล้วเลือก line_width = เหมือนกัน อันล่างก็เหมือนกัน แล้วก็พิมพ์ line width แล้วเลือก line width statement พวกนี้มันจะเรียกขึ้นมาได้เลย ถ้าเราไม่ประกาศมันจะไม่รู้จัก เห็นไหม ตอนแรกไม่มีใช่ไหม พอประกาศเรียก พอมาเรียกใช้ รู้จักเลยนะคะ ได้กรอบ ได้ตาราง ได้ความหนาของตารางแล้ว ลอง Run ดู กด ctrl B แล้วและจะได้หน้านี้ไหม เดี๋ยววันนี้จะพอแค่ตรงทำหน้านี้ล่ะ แม่ก็เมื้อยแล้วเหมือนกัน เสร็จสิ้นแล้วนะคะ เราเสร็จสิ้นแล้ว แล้วเราลองกด ไม่ขึ้น เส้นไม่ขึ้น หรือเร็วไปหน่อย อาจจะต้องรอแป๊บหนึ่ง อาจจะขึ้นช้าหน่อย ทำไมเครื่องนี้ขึ้นช้า Error ไม่ขึ้นเสียด้วย เดี๋ยวนะแม่ขาดบรรทัดไปไ Balckgrod เดี๋ยวของลองทำไมตอนแรก run ได้เดี๋ยวนะ line

(screen) fill backgr = 6 อีกแล้วลูก ไม่สบายไม่นอกพักรอก็ได้นะคะ ไม่สบายหรือเปล่าลูกไม่ทันเดี๋ยวให้... เดี๋ยวขอ Test อะไรหายไป ไม่เป็นไร เดี๋ยวใส่มาร์กเกอร์แล้วจะขึ้น นะคะ ลองดูนะคะ ให้มันขึ้นตำแหน่ง ตัวต่อไป เราจะใส่ Markers ก็คือกำหนดเงื่อนไขก่อน สร้าง loop สร้าง... นี่นะคะ เงื่อนไขว่าถ้าตำแหน่ง X อยู่นี่ พิกัดที่ 3 นี่ แถวที่ 0 คูณ *3 นี่ marker จะต้องปรากฏ ที่บรรทัดแรกนี่นะคะ คือ markers คือ จุดน่ะ ตัวพอร์ตจุดของเรานั่นเองนะคะ ทำ loop เราจะทำ loop มันก่อน มาประกาศตัวแปรให้มัน แล้วก็ แสดง marker นะคะ ขั้นตอนจะมีอย่างนี้ ทำ Loop ให้ก่อน อันดับแรกไปใส่ Loop ให้ markers เราก่อนนะคะ ไปอยู่ตรง สังเกตนะคะ เราอยู่ตรง ตัวเดียวกับตัวนี้นะ เพราะเรายังอยู่ในการสร้างเส้นอยู่นะคะ สร้างเส้นแล้วก็ทำไอ้ตัวนี้มาfor loop X เลือก X in range range จะต้องเป็น Class นะคะ lange class ที่มีขนาด 3 ช่องเดียว ๆ 3 ภาพของเรานะคะ row บอกว่า row = row นี่คือแถว ระบุแถว ใช้เครื่องหมาย วงเล็บปีกกาที่เป็นสีเหลี่ยม จะอยู่ตรงตำแหน่งเดียวปีกกาใหญ่ เห็นไหมคะ ใส่ 0 เข้าไป 0 แล้วก็โคลอน แล้วก็ 3 ค่า บรรทัดนะคะ เริ่มที่ตำแหน่งที่ 0-3 นี่ มีทั้งหมด 3 คูณ ใส่ * ใส่เครื่องหมาย * ด้วย 3 คูณด้วย 3 เพราะ ไอ้ช่อง ไอ้นั่นเรา มันจะเป็นแบบคูณ 3 ช่อง เห็นไหม 0 วรรค คูณ วรรค 3 วรรค เสร็จแล้วไปประกาศตัวแปร marlersv marker ใส่ s เข้าไปด้วย เพราะ markers ไม่ได้มีจุดเดียว Mark ได้หลายจุด ก็เลยต้องเติม s นะคะ = ปีกกาสี่เหลี่ยม ตอนนี้ประกาศตัวแปรแล้ว สามารถมาเรียกใช้มันได้ พอบรรทัดนี้ บรรทัดต่อมา ก็เรียกใช้ markers marker statment นะคะ เรียกใช้มัน ตามด้วย Module ทที่ชื่อว่า applane อะไร applane อะไร เพราะเราจะให้มันแสดงค่าในแนวนอน ไปเรียก Row มาเห็นไหมคะ เลือก row statement สิ่งที่จะเพิ่ม ก็คือให้แสดงผล Markers แสดง marker Print เห็นไหมคะ print ที่เป็นฟังก์ชัน ใส่วงเล็บปุ๊บ พิมพ์ markerแล้วก็พิมพ์ marker Ctrl + B bg เราทำไมไม่ขึ้น แสดงว่า สีเครื่องนี้เป็นอะไรหว่า เส้นก็ไม่ขึ้น สีก็ไม่ขึ้น ขอเช็กตำแหน่งก่อนนะคะ x in range 1 ค่าตำแหน่งอาจจะผิด ผิดนี่ก็ไม่ขึ้นแล้วนะ ขอเช็ก Code แป๊บหนึ่ง draw_grid screen ขึ้น grid ก็ขึ้น ลองลบใหม่ก็ได้นะ grid = grid ต้องเป็น statement อะไรขาดไป ลืมใส่อะไร เป็นเรื่อง x*100 จะต้อง screen_height screenrange พิกัด 13 สีหายไปไหน ทำไมตอน Run ตอนนี้ นะ XO ไอ้นี่ Error Background ไม่ขึ้น เดี๋ยวขอเคลียร์ Sublimeจะเยอะเกิน เดี๋ยวขอเคลียร์แป๊บหนึ่ง แล้วลอง Test ใหม่นะคะ ทำไมไม่ขึ้น error ก็ไม่ขึ้นอีก locals_screen_wiscreen ไม่ขึ้น เดี๋ยวขอไล่... บอกแล้ว ผิดนิด ผลลัพธ์ไม่โชว์เลย screen ถูกนี่นา draw_linedrawline ปุ๊บ ๆ ๆ อันนี้ขึ้นแล้ว เส้นไม่ได้ เล็กไปหรือ พอเปลี่ยนขนาดเส้น ไม่ขึ้น เส้นก็ไม่ได้เล็ก ก็ถูกแล้ว ไม่วาดเส้น ไม่ใส่สี screen ทำไมไม่ขึ้น ก็เลือกใช้ screenhigh st caption ตรงหน้าจอเกมหรือเปล่า เดี๋ยวนะ ขอดูอันแรก โอ.เค. ผ่าน ท่อนที่ 2 event_get อันนี้ไม่มีปัญหา อันที่ 3 setเดี๋ยวขอดูคำต่อไป ขึ้นแบบนี้ ตอนสร้าง driปัญหาก็ไม่ผิดนี่น่ะทำไมขึ้นแต่สีดำ บอร์ดไม่ขาวเลย Finish มันดันมาขึ้นแบบนี้ 0 0 0 0 นี่ ไม่ถูกสิ มันต้องขึ้นแบบนี้ดูนะ open file ตอนเทสอยู่บ้านก็ออกนะ นี่ มันต้องขึ้นแบบนี้สิ ไม่เป็นไร ไม่เป็นอะไร เดี๋ยวเรามาต่อ ไปเช็ก Code ก่พอมันยังมีต่อนะ โค้ดทั้งหมดทั้งปวงนี่ 100 กว่าบรรทัดนะ ตอนนี้เราได้แค่ ตอนนี้เราได้ grid ดูที่ค่าไอ้นี่ด้วยนะ ค่าBlackground  ถ้าใครไม่ขึ้น ค่าที่คูณ ๆ เข้าไปส่วน 0 X 100 0 x 100 ก็ขึ้น ก็ถูกแล้ว ไม่ขึ้น ไม่ปรากฏ ไปขึ้นอะไรไม่รู้ ไม่ขึ้นแบบนี้ ไม่ขึ้นเหมือนตอน Run อยู่บ้าน ไม่เป็นไร เดี๋ยวจะ Texsนะคะ เดี๋ยวสัปดาห์หน้า ที่อะไรคะ ที่ ๆ เมื่อได้ Markers มาร์กจุดแล้ว เสร็จแล้วเราจะใส่ตัว X ลงไปอย่างนี้ ตัว O ลงไป นี่ นี่ เห็นไหม ถ้าใครชนะ มันจะขึ้นบอกว่าคนที่ 2 ชนะนี่เห็นไหม สี ทำไมสีพื้นไม่ขึ้น backgr ไม่ขึ้นก็ไม่ผิดนี่นา screen_fill Background ก็ถูกแล้วน่ะ นะคะ งั้นขอขอบคุณฝั่งพี่ล่าม อย่างนั้นขอขอบคุณฝั่งพี่ล่ามนะคะ สัปดาห์นี้เราจะพอแค่นี้ก่อน เดี๋ยวจะเช็กโค้ดว่ามันผิดตรงไหนกับเด็ก ๆ โอ.เค. ค่ะ เด็ก ๆ ขอบคุณพี่ล่าม เด็ก ๆ ขอบคุณพี่ล่ามหน่อย ปิดล่ามได้ 

[สิ้นสุดการถอดความ]