แพตเติลลูกบอล (ball hitting battle)

จัดทําโดย นายมุฮัมมัดอามีน แวสะมาแอ วฟ.สมทบ รหัสนักศึกษา 167204132021

คณะวิศวกรรมศาสตร์ สาขาวิศวกรรมไฟฟ้า

รายวิชา 04000104 การโปรเเกรมคอมพิวเตอร์ 1/2567

1. ความเป็นมา

เกมแพดเดิลตีลูกบอล (Paddle Ball) หรือที่มักเรียกกันว่า เกมแบดมินตัน (Breakout) เป็นเกมที่ได้รับความนิยมในหลายๆ แพลตฟอร์ม โดยพื้นฐานแล้ว เกมนี้มีการเล่นที่ง่ายและสามารถเล่นได้ทุกเพศทุกวัย เกมนี้มีประวัติยาวนานและเป็นหนึ่งในเกมคลาสสิคที่ผู้คนมักจะเล่นเพื่อคลายเครียด หรือใช้เวลาในช่วงพักผ่อน โดยในยุคแรกๆ เกมนี้ถูกพัฒนาในระบบอาเคด (Arcade) และต่อมาได้รับการพัฒนาให้เล่นได้บนเว็บและแอปพลิเคชันต่างๆ

2. วัตถุประสงค์

• เพื่อสร้างเกมออนไลน์ที่ง่ายและสนุก: เพื่อให้ผู้เล่นได้ฝึกทักษะการควบคุมการเคลื่อนไหว (hand-eye coordination) ผ่านการควบคุมแพดเดิลเพื่อชนลูกบอล
• เพื่อฝึกการเขียนโค้ด JavaScript: การพัฒนาเกมนี้ช่วยให้นักพัฒนาสามารถฝึกการใช้งาน HTML, CSS, และ JavaScript เพื่อสร้างเกมที่ใช้งานได้จริง
• เพื่อสร้างความบันเทิง: โดยการทดสอบทักษะการตอบสนองและการควบคุมแพดเดิลเพื่อทำคะแนนให้ได้มากที่สุด

3. ขอบเขต

• การควบคุมแพดเดิล: ผู้เล่นจะควบคุมแพดเดิลที่สามารถเคลื่อนที่ไปทางซ้ายและขวาได้โดยการใช้เมาส์
• การชนลูกบอล: ลูกบอลจะเด้งจากผนังหรือจากแพดเดิล หากลูกบอลตกลงไปด้านล่างจะถือว่าเกมจบ
• คะแนน: ผู้เล่นจะได้รับคะแนนทุกครั้งที่ลูกบอลชนกับแพดเดิล
• เกมโอเวอร์: หากลูกบอลตกลงไปด้านล่างของหน้าจอ ผู้เล่นจะได้รับข้อความ “Game Over” และคะแนนสุดท้ายจะปรากฏขึ้น

4. ประโยชน์ที่คาดว่าจะได้รับ

• ทักษะในการเขียนโค้ด: การพัฒนาเกมนี้ช่วยให้ผู้เรียนเข้าใจพื้นฐานการเขียนโค้ด HTML, CSS และ JavaScript ซึ่งเป็นทักษะที่จำเป็นในการพัฒนาเว็บ
• ความบันเทิง: เกมนี้เป็นกิจกรรมที่สามารถให้ความสนุกสนานและท้าทายสำหรับผู้เล่น
• การฝึกทักษะการควบคุม: การเล่นเกมช่วยให้ผู้เล่นพัฒนาทักษะในการตอบสนองและการควบคุมแพดเดิลให้แม่นยำ

5. ความรู้ที่เกี่ยวข้อง

• HTML: การใช้ HTML เพื่อสร้างโครงสร้างของเกม เช่น การสร้างกล่องเกม (game container), แพดเดิล (paddle), ลูกบอล (ball) และคะแนน (score) บนหน้าเว็บ
• CSS: การใช้ CSS เพื่อจัดรูปแบบและจัดตำแหน่งขององค์ประกอบต่างๆ ในเกม เช่น การตั้งขนาดของแพดเดิลและลูกบอล การตั้งตำแหน่งของตัวแสดงผลคะแนน
• JavaScript: การเขียนฟังก์ชันต่างๆ เช่น การควบคุมการเคลื่อนที่ของแพดเดิลตามตำแหน่งเมาส์, การเคลื่อนที่ของลูกบอล, การตรวจสอบการชนของลูกบอลกับแพดเดิล และการคำนวณคะแนน
• เกม: ความรู้เกี่ยวกับการพัฒนาเกมพื้นฐาน เช่น การควบคุมความเร็วของเกม การสร้างระบบคะแนนและการจัดการสถานการณ์เกมโอเวอร์

6. การดำเนินงาน

• การออกแบบอินเทอร์เฟซ (UI): ใช้ HTML และ CSS ในการสร้างอินเทอร์เฟซของเกม ซึ่งรวมถึงการกำหนดขนาดของพื้นที่เกม, การจัดตำแหน่งของแพดเดิล, ลูกบอล และตัวแสดงคะแนน
• การเขียนฟังก์ชัน JavaScript: ใช้ JavaScript เพื่อจัดการกับการควบคุมลูกบอลและแพดเดิล:
  1. การใช้ mousemove เพื่อควบคุมการเคลื่อนที่ของแพดเดิลตามตำแหน่งเมาส์
  2. การคำนวณตำแหน่งลูกบอลและการตรวจสอบการชน
  3. การเพิ่มคะแนนเมื่อบอลชนกับแพดเดิล
  4. การแจ้งเตือน “Game Over” เมื่อบอลตก
  5. การรีเซ็ตเกมใหม่หลังจากจบเกม
• การทดสอบและการปรับปรุง: หลังจากที่เขียนโค้ดแล้ว จำเป็นต้องทดสอบการทำงานของเกมในหลายๆ สถานการณ์ เช่น การทดสอบการเคลื่อนที่ของลูกบอลและการตรวจสอบการชนกับแพดเดิล และการคำนวณคะแนน
• การทำให้เกมรองรับหลายอุปกรณ์: การใช้เทคนิค responsive design เพื่อให้เกมสามารถเล่นได้ดีบนทั้งคอมพิวเตอร์และมือถือ

7.วิธีการใช้งานโปรแกรม

1. เปิดหน้าเว็บเกม.
2. เลื่อนเมาส์เพื่อควบคุมการเคลื่อนที่ของแพดเดิลไปซ้ายและขวา.
3. พยายามให้แพดเดิลชนกับลูกบอลเพื่อทำคะแนน.
4. ระวังไม่ให้ลูกบอลตกไปที่พื้น.
5. เมื่อเกมโอเวอร์จะมีการแสดงคะแนนสุดท้าย.
6. เริ่มเกมใหม่ได้โดยการโหลดหน้าเว็บใหม่.

8. การทดลอง

1. การทดลองการควบคุมแพดเดิล

วัตถุประสงค์: ทดสอบว่าผู้เล่นสามารถควบคุมแพดเดิลด้วยการเลื่อนเมาส์ได้อย่างถูกต้องและตอบสนองตามตำแหน่งที่ต้องการ

ขั้นตอนการทดลอง:

1. เปิดเกมขึ้นมา
2. ใช้เมาส์เลื่อนไปซ้ายและขวาเพื่อควบคุมการเคลื่อนที่ของแพดเดิล
3. ตรวจสอบว่าแพดเดิลเคลื่อนที่ไปตามตำแหน่งเมาส์อย่างถูกต้อง
4. ตรวจสอบว่าแพดเดิลไม่สามารถออกนอกขอบเขตของพื้นที่เกมได้ (ขอบเกมด้านซ้ายและขวาจะต้องมีขอบเขตที่แน่นอน)
5. ทดสอบความเร็วของการเคลื่อนที่ว่าไม่ช้าหรือเร็วเกินไป

ผลลัพธ์ที่คาดหวัง: แพดเดิลควรเคลื่อนที่ไปซ้ายและขวาอย่างราบรื่นตามตำแหน่งเมาส์ และไม่ควรสามารถเคลื่อนที่ออกจากขอบเขตของพื้นที่เกมได้

2. การทดลองการเคลื่อนที่ของลูกบอล

วัตถุประสงค์: ทดสอบการเคลื่อนที่ของลูกบอล ว่ามีการเด้งกลับจากขอบเกมและแพดเดิลได้ตามที่กำหนด

ขั้นตอนการทดลอง:

1. เปิดเกมขึ้นมา
2. ตรวจสอบให้แน่ใจว่าลูกบอลเริ่มต้นที่ตำแหน่งกลางของพื้นที่เกม
3. ตรวจสอบว่าลูกบอลเคลื่อนที่ในทิศทางที่ถูกต้องและเด้งกลับเมื่อชนกับขอบเกม (บน, ล่าง, ซ้าย, ขวา)
4. ทดสอบการชนกับแพดเดิล: เมื่อบอลชนกับแพดเดิลจะต้องเด้งกลับไปในทิศทางที่ถูกต้อง
5. ทดสอบการชนกับขอบเกมเพื่อให้แน่ใจว่าเมื่อบอลชนกับขอบข้างหรือขอบบน ลูกบอลเด้งกลับไปในทิศทางที่เหมาะสม
6. ทดสอบกรณีที่ลูกบอลตกไปที่พื้น

ผลลัพธ์ที่คาดหวัง: ลูกบอลควรจะเคลื่อนที่ได้ตามทิศทางที่ถูกต้องและเด้งกลับเมื่อชนกับขอบต่างๆ ของเกม รวมทั้งการชนกับแพดเดิลทำให้บอลเด้งกลับอย่างถูกต้อง

3. การทดสอบการทำคะแนน

วัตถุประสงค์: ทดสอบระบบการให้คะแนน โดยเมื่อผู้เล่นชนลูกบอลกับแพดเดิล จะต้องมีการเพิ่มคะแนนและแสดงผลบนหน้าจอ

ขั้นตอนการทดลอง:

1. เปิดเกมขึ้นมา
2. ตรวจสอบว่าผู้เล่นได้รับคะแนนเมื่อบอลชนกับแพดเดิล
3. เมื่อบอลชนกับแพดเดิล คะแนนควรเพิ่มขึ้น 1 คะแนน
4. ตรวจสอบให้แน่ใจว่าคะแนนที่แสดงบนหน้าจอ (ในส่วนของ #score) มีการแสดงผลที่ถูกต้อง
5. ทดสอบเกมที่จบลง (Game Over) ว่าคะแนนสุดท้ายแสดงผลอย่างถูกต้อง
6. เมื่อเกมเริ่มใหม่หลังจากการเล่นเสร็จ ค่าคะแนนควรรีเซ็ตเป็น 0

ผลลัพธ์ที่คาดหวัง: เมื่อผู้เล่นชนลูกบอลกับแพดเดิล คะแนนจะเพิ่มขึ้นตามจำนวนที่กำหนด และเมื่อเกมจบลง (ลูกบอลตก) คะแนนสุดท้ายจะต้องแสดงผลได้ถูกต้อง

9.เทคนิคการประยุกต์เพื่อเพิ่มประสิทธิภาพ

• เพิ่มความสามารถในการตั้งค่าเกม (เช่น ความเร็วของลูกบอล, ขนาดของแพดเดิล, ตัวเลือกในการเล่นหลายคน ฯลฯ)
• ใช้ CSS animations หรือ transition effects เพื่อเพิ่มความสมูทในการเคลื่อนไหวของลูกบอลและแพดเดิล
• ทำให้เกมรองรับอุปกรณ์และขนาดหน้าจอที่หลากหลายโดยใช้ Responsive Design (การออกแบบที่ตอบสนองต่อขนาดหน้าจอ)
• การเพิ่มเอฟเฟกต์เสียงและเพลงพื้นหลังสามารถเพิ่มประสบการณ์การเล่นเกมได้มากขึ้น เช่น เสียงเมื่อลูกบอลชนกับแพดเดิล หรือเสียงเมื่อเกมจบ

10.สรุปผลและข้อเสนอแนะ

สรุปผล

          โดยรวมแล้ว เกมแพดเดิลตีลูกบอลทำงานได้ดีและมีประสิทธิภาพที่ดีในการเล่น มีระบบการควบคุมที่ตอบสนองดี, การเคลื่อนที่ของลูกบอลราบรื่น, และระบบการให้คะแนนที่ทำงานได้ตามที่คาดหวัง 

ข้อเสนอแนะ

เพิ่มฟีเจอร์ใหม่:

• การเพิ่มฟีเจอร์ หลายผู้เล่น (Multiplayer) จะทำให้เกมน่าสนใจมากขึ้น ผู้เล่นสามารถแข่งขันกันในเวลาเดียวกัน ซึ่งจะเพิ่มความสนุกและความท้าทาย
• การเพิ่ม โหมดต่างๆ เช่น โหมด Hard Mode ที่มีความเร็วลูกบอลสูงขึ้น หรือโหมด Endless ที่มีการเล่นเกมต่อเนื่องโดยไม่มีการจบจะทำให้ผู้เล่นมีตัวเลือกในการเล่นที่หลากหลาย

ปรับปรุง UI/UX:

• การเพิ่ม หน้าจอแสดงผลสถิติ เช่น การแสดงคะแนนสูงสุด (High Score) จะทำให้ผู้เล่นมีแรงจูงใจในการเล่นมากขึ้น
• การเพิ่มเสียงเอฟเฟกต์ หรือ เพลงพื้นหลัง จะช่วยเพิ่มประสบการณ์การเล่นและทำให้เกมมีความสนุกมากขึ้น
• การเพิ่ม แอนิเมชัน และ เอฟเฟกต์การชน เช่น การกระเด้งของลูกบอลที่เห็นได้ชัดจะทำให้เกมมีความสมจริงยิ่งขึ้น

11.ข้อมูลอ้างอิง

วิดีโอ https://youtu.be/f8WW_Xd63_Q?si=fHA39jGgMOY8fvYs

โค้ดเกมส์https://drive.google.com/file/d/1Yoi1gK79BpY5jA5bctR8KZEgfFzX0eKy/view?usp=sharing