ผู้เขียนบทความ : นาย อนุวัฒน์ ชำนาญแทน
คณะวิศวกรรมศาสตร์ สาขาวิศวกรรมไฟฟ้า
วิชา : 04000104 การโปรแกรมคอมพิวเตอร์
1.ความเป็นมา
เกมงูกินผลไม้ หรือ Snake Game เป็นเกมคลาสสิกที่ได้รับความนิยมมาอย่างยาวนาน โดยเฉพาะในยุคของโทรศัพท์มือถือ Nokia ที่มีเกมนี้ติดตั้งมาให้เล่น ซึ่งเกมงูได้สร้างความสนุกสนานและเป็นที่รู้จักของผู้คนทั่วโลก ด้วยความเรียบง่ายของกติกาและการเล่นที่ท้าทาย ทำให้เกมงูยังคงเป็นที่นิยมและมีการพัฒนาต่อยอดมาในรูปแบบต่างๆ บนแพลตฟอร์มที่หลากหลาย การสร้างเกมงูกินผลไม้ด้วย HTML นั้นเป็นการนำเอาเกมคลาสสิกมาดัดแปลงให้เข้ากับเทคโนโลยีเว็บ ซึ่งเป็นที่แพร่หลายและเข้าถึงได้ง่าย ทำให้ผู้คนสามารถเล่นเกมนี้ได้ทุกที่ทุกเวลาผ่านทางเว็บเบราว์เซอร์
2.วัตถุประสงค์
2.1 ฝึกทักษะการเขียนโปรแกรม: เพื่อฝึกฝนและพัฒนาทักษะการเขียนโปรแกรมโดยใช้ HTML, CSS และ JavaScript ในการสร้างเกมง่ายๆ
2.2 ทำความเข้าใจหลักการทำงานของเกม: เพื่อเรียนรู้หลักการพื้นฐานในการสร้างเกม เช่น การควบคุมตัวละคร การตรวจจับการชน การคำนวณคะแนน และการสร้างกราฟิก 2.3สร้างสรรค์ผลงาน: เพื่อสร้างผลงานที่เป็นรูปธรรมและสามารถนำไปเผยแพร่หรือแบ่งปันให้ผู้อื่นได้
2.4นำไปประยุกต์ใช้: เพื่อนำความรู้ที่ได้จากการสร้างเกมไปประยุกต์ใช้ในการพัฒนาเว็บไซต์หรือแอปพลิเคชันอื่นๆ
3.ขอบเขตการทำงาน
3.1 การออกแบบเกม: ออกแบบหน้าตาของเกมให้มีความสวยงามน่าสนใจ กำหนดขนาดของสนามเล่น และจำนวนระดับความยาก
3.2 การเขียนโปรแกรม:
3.2.1 สร้างโครงสร้างของเกมด้วย HTML
3.2.2 ออกแบบรูปแบบและสีสันของเกมด้วย CSS
3.2.3เขียนโค้ด JavaScript เพื่อควบคุมการเคลื่อนไหวของงูและผลไม้ ตรวจสอบ เงื่อนไขการจบเกม และคำนวณคะแนน
3.3 การทดสอบและปรับปรุง: ทดสอบเกมเพื่อหาข้อผิดพลาดและปรับปรุงประสิทธิภาพของเกมให้ดียิ่งขึ้น
3.4 การสร้างเอกสาร: สร้างเอกสารรายงานโครงงานเพื่ออธิบายขั้นตอนการทำงานและผลลัพธ์ที่ได้
4.ประโยชน์ที่ได้รับ
4.1 ความรู้และทักษะ: ได้รับความรู้และทักษะในการเขียนโปรแกรมเว็บเบื้องต้น
4.2 ประสบการณ์: ได้รับประสบการณ์ในการสร้างโปรเจคจริง
4.3 ความคิดสร้างสรรค์: ได้พัฒนาความคิดสร้างสรรค์ในการออกแบบเกม
4.4 ความภาคภูมิใจ: ได้สร้างผลงานที่เป็นของตนเอง
5.ความรู้ที่เกี่ยวข้อง
5.1ฟังก์ชันหลักและหน้าที่
- window.onload = function()
- เป็นฟังก์ชันที่ถูกเรียกทำงานเมื่อหน้าเว็บโหลดเสร็จสมบูรณ์
- ทำหน้าที่เริ่มต้นเกม โดย:
- กำหนดตัวแปรต่างๆ เช่น canvas, context, คะแนนเริ่มต้น
- ตั้งค่า event listener เพื่อรับการกดปุ่ม
- เริ่ม game loop ด้วย setInterval
- game()
- keyPush(evt)
- ฟังก์ชันนี้ถูกเรียกเมื่อมีการกดปุ่ม
- ทำหน้าที่เปลี่ยนทิศทางของงูตามปุ่มที่กด
5.2อธิบายตัวแปรสำคัญ
- canv, ctx: แทน canvas element และ context 2d ที่ใช้สำหรับวาดภาพบน canvas
- positionX, positionY: พิกัด x, y ของหัวงู
- gs, tc: ขนาดของ grid และจำนวน grid ในแนวนอน/แนวตั้ง
- cherryX, cherryY: พิกัดของอาหาร
- xv, yv: ความเร็วในการเคลื่อนที่ตามแกน x และ y
- trail: array ที่เก็บพิกัดของแต่ละส่วนของงู
- tail: ความยาวของงู
- score: คะแนน
5.3วิธีการทำงานโดยรวม
- เมื่อหน้าเว็บโหลดเสร็จ จะเริ่มต้นเกมและเตรียม canvas สำหรับวาดภาพ
- game loop จะถูกเรียกซ้ำๆ ทำให้เกมเคลื่อนไหวไปเรื่อยๆ
- เมื่อผู้เล่นกดปุ่ม ทิศทางของงูจะเปลี่ยนไป
- งูจะเคลื่อนที่ไปตามทิศทางที่กำหนด
- ถ้างูกินอาหาร ความยาวของงูจะเพิ่มขึ้น และจะมีการสร้างอาหารใหม่
- ถ้างูชนขอบหรือตัวเอง เกมจะเริ่มต้นใหม่
5.4สิ่งที่โค้ดนี้ทำได้และข้อจำกัด
- ข้อดี:
- เป็นตัวอย่างพื้นฐานของเกมงูที่ใช้ HTML5, CSS และ JavaScript
- โค้ดอ่านง่ายและเข้าใจได้ไม่ยาก
- สามารถนำไปปรับปรุงและเพิ่มฟีเจอร์ต่างๆ ได้
- ข้อจำกัด:
- เป็นเกมงูแบบง่าย ยังไม่มีฟีเจอร์พิเศษ เช่น อาหารพิเศษ, อุปสรรค, หรือหลายผู้เล่น
- กราฟิกยังเรียบง่าย
- ไม่มีการจัดการกับเหตุการณ์อื่นๆ เช่น การหยุดเกม หรือการเริ่มเกมใหม่
5.5การพัฒนาเพิ่มเติม
- เพิ่มกราฟิก: ใช้ CSS หรือ library อื่นๆ เพื่อสร้างกราฟิกที่สวยงามขึ้น
- เพิ่มเสียง: ใช้ HTML5 Audio API เพื่อเพิ่มเสียงประกอบ
- เพิ่มฟีเจอร์: เช่น อาหารพิเศษที่ให้ผลต่างกัน, อุปสรรคที่ขวางทาง, หรือโหมดหลายผู้เล่น
- ปรับปรุงประสิทธิภาพ: ใช้เทคนิคต่างๆ เพื่อเพิ่มความเร็วของเกม เช่น requestAnimationFrame แทน setInterval
- ทำเกมให้ซับซ้อนขึ้น: เพิ่มระดับความยาก หรือสร้างเงื่อนไขพิเศษในการเล่น
6.ผลการดำเนินงาน
6.1 ระดับความยาก: เกมที่ตั้งค่าความยากสูงจะทำให้เกมจบเร็วขึ้น เนื่องจากความเร็วของงูเพิ่มขึ้น หรือมีอุปสรรคมากขึ้น
6.2 ทักษะของผู้เล่น: ผู้เล่นที่มีทักษะในการควบคุมงูจะสามารถเล่นได้นานขึ้นและได้คะแนนสูงขึ้น
6.3 โหมดการเล่น: บางเกมอาจมีโหมดการเล่นที่แตกต่างกัน เช่น โหมดเวลาจำกัด โหมดเอาชีวิตรอด ซึ่งจะส่งผลต่อผลการเล่น
6.4 อุปกรณ์ที่ใช้เล่น: อุปกรณ์ที่ใช้เล่น เช่น คอมพิวเตอร์ มือถือ ก็มีผลต่อประสบการณ์การเล่นและผลลัพธ์
6.5 คะแนนสูงสุด: คะแนนที่ผู้เล่นทำได้สูงที่สุดในเกม
6.6 ระยะเวลาที่เล่น: ระยะเวลาที่ผู้เล่นสามารถเล่นได้ก่อนเกมจบ
6.7 ความยาวของงู: ความยาวสูงสุดของงูที่ผู้เล่นสามารถทำได้
6.8 ระดับที่ผ่าน: ในบางเกมอาจมีการแบ่งระดับความยาก ผู้เล่นจะต้องผ่านแต่ละระดับไปเรื่อยๆ
6.9 สถิติอื่นๆ: เช่น จำนวนครั้งที่ชนอุปสรรค จำนวนครั้งที่กินอาหาร เป็นต้น
7.ผลการทดลอง
7.1 เมื่องูกินเชอร์รี่ความยาวงูจะเพิ่มขึ้นและสกอร์จะเพิ่มขึ้น
7.2 เมื่องูกินหางตัวเองจะทำความยาวงูและสกอร์ลดลง
8.สรุปผลการทดลอง
เข้าใจพื้นฐานของเว็บ: เกมนี้ช่วยให้เข้าใจการทำงานของ HTML, CSS, และ JavaScript ในการสร้างองค์ประกอบของหน้าเว็บและสร้างปฏิสัมพันธ์ ฝึกฝนตรรกะในการเขียนโปรแกรม: การสร้างเกมงูต้องใช้ตรรกะในการควบคุมการเคลื่อนที่ของงู การตรวจจับการชน และการจัดการคะแนน เรียนรู้การใช้ Canvas: Canvas เป็น API ที่ทรงพลังสำหรับการวาดภาพบนหน้าเว็บ ซึ่งเกมงูเป็นตัวอย่างที่ดีในการใช้งาน Canvas เข้าใจ Event Handling: การรับ input จากผู้ใช้ผ่านการกดปุ่มบนแป้นพิมพ์เป็นการฝึกฝนการใช้ event listener ใน JavaScript สร้างสรรค์ผลงาน: เกมงูเป็นโครงงานที่สามารถปรับแต่งและขยายได้หลากหลาย ทำให้ผู้สร้างสามารถสร้างสรรค์ผลงานที่เป็นเอกลักษณ์
9.เอกสารอ้างอิง
9.1 W3Schools. (n.d.). HTML Tutorial. Retrieved from https://www.w3schools.com
9.2 การใช้งานโปรแกรม Visual Studio Code from https://youtu.be/RhSOtdQsu70?si=LKtJev9I5nSHhFuU
