จัดทำโดย นายวันเฉลิม เมืองจันทร์ วฟ.สมทบ รหัสนักศึกษา 167204132023
คณะวิศกรรมศาสตร์ สาขาวิศวรรมไฟฟ้า
รายวิชา 04-000-104 การโปรแกรมคอมพิวเตอร์ 1/2567
1. ความเป็นมา
เกมยิงฟองสบู่เป็นเกมคลาสสิกที่ได้รับความนิยมมานานหลายปีแล้ว โดยมีต้นกำเนิดจากเกมอาเขตในอดีต ปัจจุบันได้พัฒนาเป็นเกมบนคอมพิวเตอร์ โทรศัพท์มือถือ และแพลตฟอร์มอื่นๆอีกมากมาย
2. วัตถุประสงค์
เป้าหมายหลักของเกมคือการยิงฟองสบู่ที่มีสีเดียวกันให้รวมกันเป็นกลุ่ม เพื่อทำลายฟองเหล่านั้น
3. ขอบเขต
* รูปแบบเกม: มีหลากหลายรูปแบบ ทั้งแบบคลาสสิก, แบบมีอุปสรรค, แบบจำกัด
* แพลตฟอร์ม: เล่นได้บนคอมพิวเตอร์, โทรศัพท์มือถือ, แท็บเล็ต
* ผู้เล่น: สามารถเล่นคนเดียว
4. ประโยชน์ที่คาดว่าจะได้รับ
* ความสนุกสนาน: เป็นเกมที่ช่วยผ่อนคลายและลดความเครียด
* ฝึกสมอง: ช่วยพัฒนาทักษะการวางแผน, การแก้ปัญหา, และการสังเกต
* เพิ่มสมาธิ: ต้องใช้สมาธิในการเล็งและยิงฟองให้แม่นยำ
5. ความรู้ที่เกี่ยวข้อง
* หลักการทางฟิสิกส์: เกี่ยวกับการเคลื่อนที่ของวัตถุ, แรงโน้มถ่วง, และการชนกัน
* การออกแบบเกม: เกี่ยวกับการสร้างกราฟิก,และการเขียนโปรแกรม
* จิตวิทยา: เกี่ยวกับการออกแบบเกมให้ผู้เล่นรู้สึกสนุกและติดใจ
6. การดำเนินงาน
* เล่นเกม: ยิงฟองสบู่ให้ตรงเป้าหมายและทำลายฟองที่มีสี
* ได้คะแนน : เมื่อทำลายฟองสบู่ตามเป้าหมายจะได้คะแนน
* จบเกม: เมื่อฟองสบู่ถึงกรอบล่าง
*เปิดเว็บเพจ https://www.onlinegdb.com/edit/utU3Amc-3
7. วิธีการใช้งานโปรแกรม
- ควบคุมด้วยลูกศรซ้ายขวา
- เวลายิงกดด้วย Space Bar
- จบเกมส์เมื่อฟองสบู่ถึงกรอบล่าง
8.การทำงานของโปรแกรม
8.1 ส่วน HTML
* <div id=”gameArea”>: เป็นพื้นที่หลักที่ใช้แสดงผลเกมทั้งหมด
* <div id=”shooter”>: เป็นตัวแทนของปืนที่ใช้ยิงฟองสบู่
* <div id=”score”>: แสดงคะแนนของผู้เล่น
* <div id=”gameOver”>: แสดงข้อความ “Game Over” เมื่อเกมจบ
8.2 ส่วน CSS
* กำหนดสไตล์ให้กับองค์ประกอบต่างๆ: เช่น ทำให้พื้นหลังของเกมมีสีเทาอ่อน กำหนดขนาดและรูปร่างของฟองสบู่และกระสุน กำหนดตำแหน่งของปืนและคะแนน
* สร้างเอฟเฟกต์การเคลื่อนไหว: เช่น การเคลื่อนที่ของฟองสบู่และกระสุน
ส่วน JavaScript
* สร้างฟองสบู่: สร้างองค์ประกอบ HTML ใหม่ (div) เพื่อเป็นตัวแทนของฟองสบู่ กำหนดสีสุ่มและตำแหน่งเริ่มต้น แล้วเพิ่มเข้าไปในพื้นที่แสดงผลของเกม
* เคลื่อนที่ฟองสบู่: ใช้ setInterval เพื่อเรียกฟังก์ชันที่ปรับเปลี่ยนตำแหน่งของฟองสบู่ให้เคลื่อนที่ลงมาเรื่อยๆ
* ยิงกระสุน: เมื่อผู้ใช้กดปุ่ม space จะสร้างกระสุนขึ้นมาและเคลื่อนที่ขึ้นไป
* ตรวจจับการชน: ตรวจสอบว่ากระสุนชนกับฟองสบู่หรือไม่ ถ้าชนจะทำลายทั้งกระสุนและฟองสบู่ และเพิ่มคะแนน
* คำนวณคะแนน: เพิ่มคะแนนเมื่อผู้เล่นยิงฟองสบู่แตก
* จบเกม: เมื่อฟองสบู่ตกลงมาถึงด้านล่าง จะแสดงข้อความ “Game Over” และหยุดการทำงานของเกม
8.3 JavaScript จะประกอบไปด้วยฟังก์ชันต่างๆ เช่น:
* createBubble(): สร้างฟองสบู่ใหม่
* fall(bubble): ทำให้ฟองสบู่เคลื่อนที่ลง
* shoot(): ยิงกระสุน
* moveBullet(bullet): ทำให้กระสุนเคลื่อนที่
* isColliding(bullet, bubble): ตรวจสอบการชน
* moveShooter(event): ควบคุมการเคลื่อนที่ของปืน
* updateScore(): อัปเดตคะแนน
* showGameOver(): แสดงข้อความ “Game Over”
นอกจากนี้ ยังมีการใช้ event listener เพื่อรับเหตุการณ์ต่างๆ เช่น:
* keydown เพื่อรับการกดปุ่มบนคีย์บอร์ด
* click เพื่อตรวจสอบการคลิกที่ฟองสบู่
โดยสรุป โค้ดเกมยิงฟองสบู่ทำงานโดยการสร้างฟองสบู่ให้ตกลงมา ผู้เล่นจะใช้ปืนยิงฟองสบู่เพื่อทำลายฟองสบู่ และได้รับคะแนนเมื่อทำลายฟองสบู่ได้สำเร็จ
