จัดทําโดย นายอาริด สาเล๊ะ วฟ.สมทบ รหัสนักศึกษา 167204132032
รายวิชา 04000104 การโปรเเกรมคอมพิวเตอร์ 1/2567
คณะวิศวกรรมศาสตร์ สาขาวิศวกรรมไฟฟ้า
บทความ: เกมเก็บของ: ความสนุกที่ซ่อนไว้เบื้องหลังโค้ด
1. ความเป็นมา
เกมเก็บของเป็นเกมแนวคาชวลที่ได้รับความนิยมอย่างแพร่หลาย เกมประเภทนี้มักจะมาพร้อมกับกราฟิกที่เรียบง่ายและรูปแบบการเล่นที่ไม่ซับซ้อน ผู้เล่นจะต้องค้นหาและเก็บรวบรวมวัตถุต่างๆ ที่ซ่อนอยู่ภายในฉากเกม โดยมีเป้าหมายเพื่อให้ได้คะแนนหรือผ่านด่านไปเรื่อยๆ เกมเก็บของมีต้นกำเนิดมาจากเกมคอมพิวเตอร์ในยุคแรกๆ และได้รับการพัฒนาให้มีความหลากหลายมากขึ้นในปัจจุบัน
2. วัตถุประสงค์
- ความบันเทิง: เกมเก็บของถูกออกแบบมาเพื่อให้ผู้เล่นได้ผ่อนคลายและสนุกสนาน โดยไม่ต้องใช้ความคิดที่ซับซ้อนมากนัก
- การฝึกทักษะ: เกมบางประเภทอาจช่วยฝึกทักษะการสังเกต การจำ และการตอบสนองที่รวดเร็ว
- การเรียนรู้: เกมเก็บของบางเกมอาจถูกออกแบบมาเพื่อสอนความรู้ในด้านต่างๆ เช่น ภาษาต่างประเทศ หรือวิทยาศาสตร์
3. ความรู้ที่เกี่ยวข้อง
- HTML: ภาษาสำหรับสร้างโครงสร้างของเว็บเพจ
- CSS: ภาษาสำหรับกำหนดรูปแบบและลักษณะที่ปรากฏของเว็บเพจ
- JavaScript: ภาษาสำหรับสร้างสรรค์การทำงานแบบไดนามิกบนเว็บเพจ เช่น การตอบสนองต่อการคลิกของผู้ใช้ การสร้างภาพเคลื่อนไหว และการคำนวณต่างๆ
- DOM (Document Object Model): โครงสร้างของเอกสาร HTML ที่ JavaScript สามารถเข้าถึงและจัดการได้
4. ประโยชน์ที่จะได้รับจากการสร้างเกมเก็บของ
- ความเข้าใจในหลักการพื้นฐานของการพัฒนาเว็บ: การสร้างเกมเก็บของจะช่วยให้ผู้เริ่มต้นเข้าใจวิธีการสร้างเว็บเพจที่ใช้งานได้จริง และสามารถนำไปประยุกต์ใช้ในการพัฒนาเว็บไซต์อื่นๆ ได้
- พัฒนาทักษะการแก้ปัญหา: การเขียนโปรแกรมจำเป็นต้องอาศัยการแก้ไขปัญหาต่างๆ ที่เกิดขึ้นในระหว่างการพัฒนา
- เพิ่มความคิดสร้างสรรค์: การออกแบบเกมจะช่วยกระตุ้นให้เกิดไอเดียใหม่ๆ และความคิดสร้างสรรค์ในการออกแบบกราฟิกและรูปแบบการเล่น
- ความภาคภูมิใจในผลงาน: เมื่อสร้างเกมเสร็จสมบูรณ์ ผู้สร้างจะรู้สึกภูมิใจในผลงานของตนเองและสามารถนำไปแบ่งปันให้ผู้อื่นได้
5. การดำเนินงานของเกมเก็บของ (อ้างอิงจากโค้ดที่ให้มา)
- เริ่มต้นเกม: เมื่อผู้ใช้คลิกปุ่ม “เริ่มเกม” ฟังก์ชัน
startGameจะถูกเรียกทำงาน ซึ่งจะรีเซ็ตคะแนนและสร้างไอเทมแรกขึ้นมา - สร้างไอเทม: ฟังก์ชัน
spawnItemจะสร้างองค์ประกอบ HTML ที่เป็นตัวแทนของไอเทมหนึ่งๆ กำหนดตำแหน่งของไอเทมแบบสุ่ม และเพิ่มเหตุการณ์เมื่อคลิกไอเทม - เก็บคะแนน: เมื่อผู้ใช้คลิกที่ไอเทม คะแนนจะเพิ่มขึ้น 1 คะแนน และไอเทมนั้นจะถูกเอาออกจากหน้าจอ จากนั้นจะมีการสร้างไอเทมใหม่ขึ้นมาแทนที่
- วนซ้ำ: ขั้นตอนการสร้างไอเทมและการเก็บคะแนนจะเกิดขึ้นซ้ำๆ ตราบใดที่เกมยังทำงานอยู่
6. ผลการดำเนินการ
โครงการนี้ได้ดำเนินการพัฒนาเกม Whack a Prairie โดยเริ่มจากการวางแผนและออกแบบเกม รวมถึงการเขียนโค้ดโดยใช้ HTML, CSS, และ JavaScript ซึ่งทำให้สามารถสร้างฟีเจอร์ต่างๆ ของเกมได้สำเร็จ เช่น การนับคะแนน, และ ผลคะแนนแสดงให้เห็นว่าเกมสามารถทำงานได้ตามที่คาดหวัง
6.1 CSS (การจัดรูปแบบ)CSS ใช้ในการจัดรูปแบบและการออกแบบส่วนต่าง ๆ ของหน้าเว็บ:
6.2 JavaScript (ฟังก์ชันการทำงาน) JavaScript ใช้เพื่อเพิ่มฟังก์ชันการทำงานให้กับเกม:
7. สรุปโค้ดเกมเก็บของ
โค้ดนี้สร้างเกมง่ายๆ ที่ผู้เล่นต้องคลิกที่วัตถุ (ที่ปรากฏเป็นสี่เหลี่ยมสีส้ม) เพื่อเก็บคะแนน
วิธีการทำงาน:
- เตรียมหน้าจอ: สร้างพื้นที่สำหรับเล่นเกม (game-area) และแสดงคะแนนเริ่มต้นเป็น 0
- เริ่มเกม: เมื่อกดปุ่ม “เริ่มเกม” จะมีวัตถุสีส้มปรากฏขึ้นมาบนหน้าจอแบบสุ่ม
- เก็บคะแนน: เมื่อคลิกที่วัตถุ คะแนนจะเพิ่มขึ้น 1 คะแนน และวัตถุนั้นจะหายไป
- สร้างวัตถุใหม่: หลังจากวัตถุเดิมหายไป จะมีวัตถุใหม่ปรากฏขึ้นมาแทนที่
- วนซ้ำ: ขั้นตอนที่ 3 และ 4 จะวนซ้ำไปเรื่อยๆ จนกว่าผู้เล่นจะปิดหน้าต่างเกม
โค้ดแต่ละส่วนมีหน้าที่:
- HTML: กำหนดโครงสร้างของหน้าเว็บ เช่น พื้นที่แสดงผล ปุ่ม และตำแหน่งต่างๆ
- CSS: กำหนดลักษณะที่ปรากฏขององค์ประกอบต่างๆ เช่น สี ขนาด และตำแหน่งของวัตถุ
- JavaScript: เป็นส่วนที่ทำให้เกมทำงาน เช่น การสร้างวัตถุ การตรวจจับการคลิก และการคำนวณคะแนน
เทคนิคที่ใช้:
- createElement: สร้างองค์ประกอบ HTML ใหม่ (วัตถุ)
- appendChild: เพิ่มองค์ประกอบ HTML ลงในเอกสาร HTML
- addEventListener: เพิ่มฟังก์ชันที่ทำงานเมื่อเกิดเหตุการณ์ เช่น การคลิก
- Math.random: สร้างตัวเลขสุ่ม เพื่อกำหนดตำแหน่งของวัตถุ
สรุปง่ายๆ: โค้ดนี้แสดงให้เห็นถึงการสร้างเกมพื้นฐานโดยใช้ภาษา JavaScript และ HTML/CSS โดยเน้นไปที่การสร้างวัตถุแบบสุ่มและการตอบสนองต่อการคลิกของผู้ใช้
ถ้าอยากพัฒนาเกมนี้ต่อ สามารถลองเพิ่มลูกเล่นต่างๆ ได้ เช่น
- เปลี่ยนรูปร่างของวัตถุ: แทนที่จะเป็นสี่เหลี่ยม อาจเป็นรูปดาว หรือรูปอื่นๆ
- เพิ่มระดับความยาก: ทำให้วัตถุเคลื่อนที่เร็วขึ้น หรือเพิ่มจำนวนวัตถุ
- เก็บคะแนนสูงสุด: บันทึกคะแนนที่ได้สูงสุดของผู้เล่น
- สร้างด่าน: เพิ่มความหลากหลายในการเล่นเกม
8. อ้างอิง
GeeksforGeeks. (n.d.). CSS Tutorial. Retrieved from geeksforgeeks.org
W3Schools. (n.d.). HTML Tutorial. Retrieved from w3schools.com
Mozilla Developer Network. (n.d.). JavaScript Guide. Retrieved from developer.mozilla.org
