ลีโอปาเป้า(LEO DARTS)

จัดทำโดย นายคณาธิป เอียดเฉลิม วฟ. 167404130051

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

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

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

เกมปาเป้า (Darts) เป็นหนึ่งในเกมและกีฬาที่มีความนิยมอย่างแพร่หลายทั่วโลก โดยมีประวัติความเป็นมายาวนานตั้งแต่สมัยโบราณ เดิมทีมีการคาดเดาว่าเกมนี้อาจมีจุดกำเนิดมาจากการที่ทหารในยุคกลางใช้ลูกธนูและอาวุธปลายแหลมปาไปที่เป้าหมายไม้หรือถังไม้เพื่อฝึกฝนความแม่นยำ ต่อมาเมื่อเกมมีการพัฒนาและได้รับความนิยมมากขึ้น จึงมีการประดิษฐ์แผ่นเป้ากระดาษหรือไม้ขึ้นมาให้ใช้งานได้ง่ายขึ้น

ในช่วงศตวรรษที่ 19 เกมปาเป้าได้รับความนิยมในผับของอังกฤษ โดยมีการสร้างกติกาและรูปแบบการเล่นที่เป็นมาตรฐานมากขึ้น เป้าหมายที่ใช้ในปัจจุบันแบ่งเป็นส่วนต่าง ๆ มีการกำหนดคะแนนชัดเจน ลูกดอกที่ใช้ก็มีการพัฒนาให้มีความปลอดภัยและความแม่นยำมากขึ้น

เกมนี้ไม่เพียงแต่เป็นเกมที่เล่นสนุกสนานในวงเพื่อนหรือครอบครัวเท่านั้น แต่ยังเป็นกีฬาที่มีการแข่งขันในระดับมืออาชีพอีกด้วย โดยมีการแข่งขันระดับนานาชาติ เช่น รายการ PDC World Darts Championship ซึ่งได้รับความนิยมจากแฟนกีฬาและผู้ชมทั่วโลก

ในยุคปัจจุบัน เกมปาเป้ายังได้รับการพัฒนาให้เข้ากับเทคโนโลยี มีการสร้างเกมปาเป้าในรูปแบบดิจิทัลและแอปพลิเคชันมือถือ ซึ่งช่วยให้คนที่สนใจสามารถเล่นเกมนี้ได้ทุกที่ทุกเวลา

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

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

2.พัฒนาทักษะ: การเล่นเกมปาเป้าช่วยฝึกฝนทักษะการควบคุมมือ-ตา (hand-eye coordination) การเล็งเป้า การคำนวณแรง และทิศทางในการปา ซึ่งทำให้ผู้เล่นมีทักษะด้านความแม่นยำและสมาธิที่ดีขึ้น

3.การแข่งขัน: ในการแข่งขันอย่างเป็นทางการ วัตถุประสงค์คือการทำคะแนนให้สูงกว่าคู่แข่งภายในจำนวนรอบที่กำหนด

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

3. ขอบเขต

1. อุปกรณ์ที่ใช้ในเกม:

• Canvas: ใช้เป็นพื้นที่สำหรับแสดงเป้าหมายที่ผู้เล่นจะปาลูกดอก
• ลูกดอก (Arrow): ผู้เล่นจะคลิกที่ Canvas เพื่อทำการ “ปาลูกดอก” ไปที่เป้าหมาย

2. กติกาและการทำงานของเกม:

• ผู้เล่นจะมีลูกดอกทั้งหมด 10 ดอกสำหรับการปาในแต่ละรอบ (แสดงใน UI ว่า “เหลือ: 10 ลูกดอก”)
• เกมจะจบลงเมื่อผู้เล่นปาลูกดอกครบ 10 ดอก และจะแสดงคะแนนรวมของผู้เล่นคะแนนจะถูกคำนวณตามตำแหน่งที่ลูกดอกปาโดนเป้าหมาย:
• โดนจุดศูนย์กลางจะได้ 10 คะแนน
• โดนรอบกลางจะได้ 5 คะแนน
• โดนรอบนอกสุดจะได้ 1 คะแนน
• เป้าหมายจะเคลื่อนที่ไปมาตลอดเวลาเพื่อเพิ่มความยากในการเล็งผู้เล่นสามารถเริ่มเกมใหม่หลังจากจบเกม หรือรีเซ็ตคะแนนและเริ่มรอบใหม่ได้ทุกเมื่อ

3. เป้าหมายและการเคลื่อนไหว:

• เป้าหมายจะเป็นวงกลมที่มีสามชั้น (สีแดง เหลือง และเขียว) แต่ละชั้นมีคะแนนที่แตกต่างกันตามความใกล้ศูนย์กลาง
• เป้าหมายจะเคลื่อนที่ในแนวนอนและแนวตั้งด้วยความเร็วที่กำหนด หากชนขอบ Canvas จะเด้งกลับ

4. การเริ่มและจบเกม:

• ผู้เล่นสามารถเริ่มเกมด้วยการกดปุ่ม “เริ่มเกม” หรือกดปุ่ม “เริ่มใหม่”
• เมื่อเกมเริ่มแล้วเมื่อปาครบ 10 ครั้ง เกมจะหยุดและแจ้งคะแนนสุดท้ายให้ผู้เล่นทราบ พร้อมทั้งอัปเดตคะแนนสูงสุดหากทำลายสถิติเดิม

5.อินเทอร์เฟซผู้ใช้ (UI):

• มีการแสดงคะแนนปัจจุบัน จำนวนลูกดอกที่เหลือ และคะแนนสูงสุดของผู้เล่นที่ถูกเก็บไว้ระหว่างรอบ
• ปุ่ม “เริ่มเกม” หรือ “เริ่มใหม่” จะเปลี่ยนสถานะขึ้นอยู่กับสถานะของเกมในขณะนั้น

6.การรีเซ็ตและเริ่มใหม่:

• เมื่อเกมจบลง ผู้เล่นสามารถเลือกที่จะเริ่มรอบใหม่ ซึ่งจะรีเซ็ตคะแนนและจำนวนลูกดอกให้กลับไปเริ่มต้น

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

1 .การฝึกทักษะความแม่นยำ:

• ผู้เล่นจะได้ฝึกฝนทักษะในการเล็งและคำนวณตำแหน่งการปาเป้า ช่วยพัฒนาความแม่นยำของการเคลื่อนไหวมือและสายตา

2. เพิ่มความสนุกสนานและผ่อนคลาย:

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

3. พัฒนาสมาธิและการควบคุมตนเอง:

• การปาลูกดอกไปที่เป้าหมายที่เคลื่อนไหวได้ต้องอาศัยสมาธิที่สูง ซึ่งเป็นการฝึกการควบคุมจิตใจและการจดจ่อในสิ่งที่ทำ

4. การพัฒนาทักษะการเขียนโปรแกรม:

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

5. ส่งเสริมความคิดสร้างสรรค์:

• การออกแบบเกม เช่น การเลือกการเคลื่อนไหวของเป้า การคำนวณคะแนน หรือการออกแบบ UI ช่วยให้ผู้พัฒนาหรือผู้เล่นสามารถสร้างสรรค์สิ่งใหม่ ๆ ได้ตลอดเวลา

6. ส่งเสริมสุขภาพจิต:

• เกมที่มีความท้าทายแต่สนุกสนานช่วยให้ผู้เล่นคลายความเครียดได้ และยังเป็นวิธีที่ดีในการสร้างแรงจูงใจให้พยายามทำลายสถิติหรือทำคะแนนสูงสุด

7. พัฒนาทักษะการวางแผนและการตัดสินใจ:

• เกมปาเป้านี้ช่วยให้ผู้เล่นต้องคิดและตัดสินใจในการเลือกช่วงเวลาที่จะปา เพื่อให้ได้คะแนนสูงสุด ซึ่งเป็นการพัฒนาทักษะการวางแผนในระยะสั้น

8. เพิ่มความสัมพันธ์ทางสังคม:

สามารถเล่นในกลุ่มเพื่อนหรือครอบครัว เพื่อเพิ่มความสัมพันธ์ในสังคมและสร้างความสนุกในการแข่งขันอย่างเป็นมิตร

5. ความรู้ที่คาดว่าจะได้รับ

1. ความรู้ด้านการพัฒนาเว็บไซต์และการเขียนโปรแกรม:

• HTML, CSS และ JavaScript: ผู้พัฒนาจะได้ฝึกฝนและเรียนรู้การใช้ภาษาเหล่านี้ในการสร้างอินเตอร์เฟซ การแสดงผลกราฟิก และการควบคุมการทำงานของเกม เช่น การคลิก การนับคะแนน และการแสดงผลคะแนน
• การใช้ Canvas: การสร้างภาพและการทำงานกราฟิกในเกมใช้เทคโนโลยี Canvas ซึ่งช่วยให้เข้าใจการวาดวัตถุแบบ 2D และการเคลื่อนไหวของวัตถุในหน้าเว็บ
• การเขียนฟังก์ชันเชิงโต้ตอบ (Event Handling): เรียนรู้วิธีการเขียนโค้ดเพื่อจัดการกับการตอบสนองของผู้ใช้ เช่น การคลิกบนพื้นที่ที่ต้องการ และการคำนวณคะแนนจากการกระทำของผู้เล่น

2. ความรู้ด้านการออกแบบเกม:

• การออกแบบกลไกการเล่นเกม (Game Mechanics): เรียนรู้วิธีการออกแบบกลไกที่ทำให้เกมสนุกและท้าทาย เช่น การกำหนดคะแนนตามตำแหน่งที่โดนเป้า การเคลื่อนที่ของเป้า และการเพิ่มความยากเมื่อผู้เล่นมีความเชี่ยวชาญมากขึ้น
• การสร้างประสบการณ์ผู้ใช้ (User Experience): เข้าใจวิธีการออกแบบเกมที่สามารถดึงดูดผู้เล่น และทำให้ผู้เล่นรู้สึกสนุกสนาน โดยการออกแบบ UI ที่ใช้งานง่ายและให้ข้อมูลสำคัญ เช่น คะแนนหรือจำนวนลูกดอกที่เหลือ

3. ความรู้เกี่ยวกับการพัฒนาทักษะส่วนบุคคล:

• ทักษะการแก้ปัญหา (Problem Solving): เมื่อเกิดปัญหาหรือบั๊กในการพัฒนาเกม ผู้พัฒนาจะได้ฝึกทักษะการวิเคราะห์และการแก้ไขปัญหาในโค้ด
• การวางแผนและการจัดการเวลา: การพัฒนาเกมตั้งแต่ต้นจนจบต้องอาศัยการวางแผนลำดับการทำงานที่ชัดเจนและการจัดสรรเวลาให้เหมาะสม เพื่อให้เกมเสร็จตามกำหนด

4. ความรู้ด้านฟิสิกส์พื้นฐานและคณิตศาสตร์:

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

5. การพัฒนาความคิดสร้างสรรค์:

• การออกแบบกราฟิกและ UI: ผู้พัฒนาจะได้รับความรู้ด้านการออกแบบภาพกราฟิกและการเลือกใช้สี การจัดวางองค์ประกอบต่าง ๆ ในเกม เพื่อให้เกมดูน่าสนใจและใช้งานง่าย
• การสร้างประสบการณ์เกมที่เป็นเอกลักษณ์: การออกแบบกลไกและรูปแบบการเล่นที่สร้างสรรค์ เช่น การเพิ่มความยากในแต่ละระดับ หรือการเพิ่มลูกเล่นใหม่ ๆ ในเกม

6. ความรู้ด้านการวัดผลและวิเคราะห์ข้อมูล:

• การวัดผลสำเร็จของผู้เล่น: ผู้พัฒนาและผู้เล่นจะได้เรียนรู้วิธีการติดตามและวิเคราะห์คะแนน ความแม่นยำของการปา และจำนวนการปาที่สำเร็จ เพื่อปรับปรุงประสิทธิภาพในเกม
• การปรับปรุงเกมจากข้อเสนอแนะ: การฟังความคิดเห็นจากผู้เล่นเพื่อนำไปปรับปรุงเกมในอนาคต ทั้งในเรื่องของความท้าทายหรือความสนุกสนาน

7. การสื่อสารและการทำงานเป็นทีม:

• หากการพัฒนาเกมเป็นการทำงานร่วมกันในทีม ผู้พัฒนาจะได้ฝึกทักษะการสื่อสาร และการทำงานร่วมกับผู้อื่น เพื่อแบ่งหน้าที่และแก้ไขปัญหาร่วมกัน

6.ผลการดำเนินการ

1. การพัฒนาเกมสำเร็จตามเป้าหมาย:

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

2. กลไกการเล่นเกมทำงานได้สมบูรณ์:

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

3. การสร้างประสบการณ์ผู้เล่นที่น่าพอใจ:

• ตัวเกมมีการออกแบบให้ผู้เล่นรู้สึกสนุกสนาน มีภาพพื้นหลังและกราฟิกที่ดึงดูด สร้างความรู้สึกท้าทายเมื่อเป้าเคลื่อนที่ ทำให้ผู้เล่นต้องใช้ความแม่นยำและสมาธิในการปาเป้า
• มีการแสดงข้อมูลสำคัญ เช่น คะแนน จำนวนลูกดอกที่เหลือ และคะแนนสูงสุดอย่างชัดเจน

4. การออกแบบ UI และ UX สำเร็จลุล่วง:

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

5. การทำงานของระบบเกมโดยรวมมีเสถียรภาพ:

• เกมทำงานได้อย่างต่อเนื่อง ไม่มีปัญหาหรือบั๊กที่ทำให้การเล่นสะดุด การคำนวณคะแนนและการแสดงผลถูกต้องตามที่คาดหวัง

6. สามารถขยายหรือปรับปรุงเพิ่มเติมในอนาคต:

• ระบบเกมถูกออกแบบในลักษณะที่สามารถปรับปรุงหรือเพิ่มฟีเจอร์ใหม่ได้ในอนาคต เช่น เพิ่มความยาก, เพิ่มจำนวนเป้า หรือสร้างโหมดการเล่นแบบต่าง ๆ

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

1.เปิดหน้าเว็บไซต์ที่มีเกมปาเป้า:

• เมื่อคุณเปิดหน้าเว็บที่มีเกมปาเป้า (จากไฟล์ HTML) บนเบราว์เซอร์ เกมจะพร้อมให้คุณเล่นทันที โดยจะแสดงหน้าเกมที่มีป้ายชื่อเกม “LEO DARTS” อยู่ด้านบน

2.กดปุ่ม “เริ่มเกม” เพื่อเริ่มเล่น:

• เมื่อคุณเข้ามาในเกม คุณจะเห็นปุ่ม “เริ่มเกม” อยู่ใต้พื้นที่เล่นเกม (แคนวาส) ให้คุณกดปุ่มนี้เพื่อเริ่มการเล่น

3. การเล็งเป้าและยิงลูกดอก:

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

4. การคำนวณคะแนน:

• เมื่อคลิกในตำแหน่งที่ใกล้กับเป้า ระบบจะคำนวณคะแนนตามระยะห่างระหว่างจุดที่คลิกและจุดศูนย์กลางของเป้า
• ยิงใกล้ศูนย์กลางมากที่สุด: ได้ 10 คะแนน
• ยิงใกล้ศูนย์กลางระดับกลาง: ได้ 5 คะแนน
• ยิงที่ขอบนอกสุดของเป้า: ได้ 1 คะแนน

5. การเล่นซ้ำ:

• เกมมีลูกดอกทั้งหมด 10 ดอก หลังจากที่ใช้ลูกดอกครบ 10 ครั้ง เกมจะสิ้นสุดและแสดงคะแนนสุดท้าย
• ถ้าต้องการเล่นใหม่ กดปุ่ม “เริ่มใหม่” เพื่อเริ่มเกมรอบใหม่อีกครั้ง โดยคะแนนจะถูกรีเซ็ตเป็น 0

6. การติดตามคะแนนสูงสุด:

• หากคุณทำคะแนนได้มากกว่าเกมก่อนหน้านี้ เกมจะบันทึกและแสดงคะแนนสูงสุดที่ทำได้ในส่วน “คะแนนสูงสุด” ให้คุณสามารถท้าทายตัวเองในการทำคะแนนให้ดียิ่งขึ้นในรอบต่อไป

สรุปขั้นตอนการเล่น:

1. เปิดหน้าเว็บและกดปุ่ม “เริ่มเกม”
2. คลิกในแคนวาสเพื่อปาลูกดอกและทำคะแนน
3. เล่นจนกว่าจะปาลูกดอกครบ 10 ครั้ง
4. หากต้องการเล่นใหม่ กดปุ่ม “เริ่มใหม่”

8. Code game

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>เกมปาเป้า</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            background-image: url('https://thumb.ac-illust.com/9f/9fc1b5dac187448909809ea2159a2e37_w.jpeg');
            background-size: cover;
            background-position: center;
            position: relative;
        }

        canvas {
            border: 2px solid black;
            background-color: white;
        }

        #scoreContainer {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        #score, #remainingArrows, #highScore {
            font-size: 24px;
            margin-right: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            padding: 5px 10px;
            border: 2px solid #0000FF;
            border-radius: 5px;
            background-color: rgba(173, 216, 230, 0.8);
            color: #000;
            transition: transform 0.3s;
        }

        #score:hover, #remainingArrows:hover, #highScore:hover {
            transform: scale(1.1);
        }

        #highScoreContainer {
            margin-top: 10px;
        }

        #startBtn {
            padding: 10px 20px;
            font-size: 20px;
            cursor: pointer;
            background-color: #ffcc00;
            color: #000;
            border: none;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s, transform 0.2s;
        }

        #startBtn:hover {
            background-color: #ff9900;
            transform: scale(1.05);
        }

        #startBtn:active {
            transform: scale(0.95);
        }

        /* ป้ายชื่อเกม */
        #gameTitle {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 300px; 
            height: 80px; 
            font-size: 36px;
            padding: 15px;
            border: 3px solid black; 
            background-color: rgba(255, 0, 0, 0.8);
            background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20201024/pngtree-abstract-digital-technology-blue-gaming-background-with-communication-image_436093.jpg'); /* เปลี่ยนเป็น URL รูปภาพกราฟิก */
            background-size: cover;
            color: white; 
            border-radius: 10px;
            font-weight: bold;
            display: flex; 
            justify-content: center; 
            align-items: center; 
            box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>

<!-- ป้ายชื่อเกม -->
<div id="gameTitle">LEO DARTS</div>

<canvas id="gameCanvas" width="600" height="500"></canvas>
<div id="scoreContainer">
    <div id="score">คะแนน: 0</div>
    <div id="remainingArrows">เหลือ: 10 ลูกดอก</div>
    <button id="startBtn">เริ่มเกม</button>
</div>
<div id="highScoreContainer">
    <div id="highScore">คะแนนสูงสุด: 0</div>
</div>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const scoreDisplay = document.getElementById('score');
    const highScoreDisplay = document.getElementById('highScore');
    const remainingArrowsDisplay = document.getElementById('remainingArrows');
    const startBtn = document.getElementById('startBtn');

    let score = 0;
    let attempts = 0;
    let maxAttempts = 10; // ปาได้ 10 ครั้ง
    let targetX = 300;
    let targetY = 250;
    let targetRadius = 50;
    let targetSpeedX = 2; // ความเร็วการเคลื่อนไหวในแนวนอน
    let targetSpeedY = 2; // ความเร็วการเคลื่อนไหวในแนวตั้ง
    let gameRunning = false;
    let highScore = 0; // ตัวแปรเก็บคะแนนสูงสุด
    let remainingArrows = maxAttempts; // จำนวนลูกดอกที่เหลือ

    const backgroundImage = new Image();
    backgroundImage.src = 'https://thumb.ac-illust.com/9f/9fc1b5dac187448909809ea2159a2e37_w.jpeg'; // เปลี่ยนเป็น URL รูปภาพพื้นหลังที่คุณต้องการ

    // ฟังก์ชันวาดเป้า
    function drawTarget() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // วาดรูปภาพพื้นหลัง
        ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); // วาดรูปภาพพื้นหลัง

        // วาดวงกลมสามชั้นด้วยขอบสีดำ
        for (let i = 3; i > 0; i--) {
            ctx.beginPath();
            ctx.arc(targetX, targetY, targetRadius * i / 3, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 5;
            ctx.stroke();
            ctx.fillStyle = i === 1 ? '#ff0000' : i === 2 ? '#ffff00' : '#00ff00';
            ctx.fill();
        }
    }

    // ฟังก์ชันเคลื่อนไหวเป้า
    function moveTarget() {
        targetX += targetSpeedX;
        targetY += targetSpeedY;

        // ตรวจสอบว่าชนขอบ canvas หรือไม่ ถ้าชนให้เด้งกลับ
        if (targetX + targetRadius > canvas.width || targetX - targetRadius < 0) {
            targetSpeedX *= -1; 
        }
        if (targetY + targetRadius > canvas.height || targetY - targetRadius < 0) {
            targetSpeedY *= -1; 
        }
    }

    // ยิงปาเป้า
    function shootArrow(event) {
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

        const distance = Math.sqrt((x - targetX) ** 2 + (y - targetY) ** 2);
        let points = 0;

        // คำนวณคะแนน
        if (distance < targetRadius / 3) {
            points = 10;
        } else if (distance < targetRadius * 2 / 3) {
            points = 5;
        } else if (distance < targetRadius) {
            points = 1;
        }

        score += points;
        attempts += 1;
        remainingArrows -= 1; // ลดจำนวนลูกดอกที่เหลือ

        // อัปเดตคะแนน
        scoreDisplay.textContent = `คะแนน: ${score}`;
        remainingArrowsDisplay.textContent = `เหลือ: ${remainingArrows} ลูกดอก`; // แสดงจำนวนลูกดอกที่เหลือ

        // ตรวจสอบคะแนนสูงสุด
        if (score > highScore) {
            highScore = score; // อัปเดตคะแนนสูงสุด
        }
        highScoreDisplay.textContent = `คะแนนสูงสุด: ${highScore}`; // แสดงคะแนนสูงสุด

        // ตรวจสอบจำนวนการปา
        if (attempts >= maxAttempts) {
            alert(`จบเกม! คะแนนสุดท้ายของคุณ: ${score}`);
            resetGame(); // รีเซ็ตเกมอัตโนมัติหลังปา 10 ครั้ง
        }
    }

    // รีเซ็ตเกม
    function resetGame() {
        score = 0;
        attempts = 0;
        remainingArrows = maxAttempts; // รีเซ็ตจำนวนลูกดอกที่เหลือ
        scoreDisplay.textContent = `คะแนน: ${score}`;
        remainingArrowsDisplay.textContent = `เหลือ: ${remainingArrows} ลูกดอก`; // แสดงจำนวนลูกดอกที่เหลือ
        targetX = 300;
        targetY = 250;
        drawTarget();
        gameRunning = false; // ตั้งค่าสถานะเกม
        startBtn.textContent = 'เริ่มเกม'; // เปลี่ยนข้อความบนปุ่มเป็น "เริ่มเกม"
    }

    // เริ่มเกม
    function startGame() {
        score = 0;
        attempts = 0;
        remainingArrows = maxAttempts; // รีเซ็ตจำนวนลูกดอกที่เหลือ
        scoreDisplay.textContent = `คะแนน: ${score}`;
        remainingArrowsDisplay.textContent = `เหลือ: ${remainingArrows} ลูกดอก`; // แสดงจำนวนลูกดอกที่เหลือ
        targetX = 300;
        targetY = 250;
        drawTarget();
        gameRunning = true; // ตั้งค่าสถานะเกม
        startBtn.textContent = 'เริ่มใหม่'; // เปลี่ยนข้อความบนปุ่มเป็น "เริ่มใหม่"
        gameLoop(); // เรียกใช้ฟังก์ชันลูปเกม
    }

    // ตั้งค่าปุ่มเริ่มเกม
    startBtn.addEventListener('click', () => {
        if (gameRunning) {
            resetGame(); // ถ้าเกมกำลังเล่นอยู่ให้รีเซ็ตเกม
        } else {
            startGame(); // ถ้าไม่ให้เริ่มเกม
        }
    });

    // ลูปเกม
    function gameLoop() {
        if (gameRunning) {
            moveTarget();
            drawTarget();
            requestAnimationFrame(gameLoop);
        }
    }

    // เริ่มเกม
    canvas.addEventListener('click', (event) => {
        if (gameRunning && attempts < maxAttempts) {
            shootArrow(event);
        }
    });

    // รอจนกว่ารูปภาพจะโหลดก่อนที่จะวาดเป้า
    backgroundImage.onload = function() {
        drawTarget(); // เรียกใช้ฟังก์ชันวาดเป้าเมื่อรูปภาพโหลดเสร็จ
    };

</script>

</body>
</html>

9. การทดลอง สรุปผล ข้อเสนอแนะ

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

1. การเริ่มเกม:

• ผู้เล่นสามารถกดปุ่ม “เริ่มเกม” และเริ่มเล่นได้ทันที โดยไม่ต้องรอการโหลดข้อมูลเพิ่มเติมหรือการตั้งค่าอื่น ๆ

2. การเล็งและยิงลูกดอก:

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

3. การเคลื่อนที่ของเป้า:

• เป้าจะเคลื่อนไหวในแนวราบและแนวดิ่งไปเรื่อย ๆ ทำให้เกิดความท้าทายในการปาลูกดอก ผู้เล่นจะต้องใช้ความรวดเร็วและความแม่นยำในการคลิกเพื่อทำคะแนนสูงสุด

4. การติดตามคะแนน:

• คะแนนถูกอัปเดตทันทีหลังจากที่ลูกดอกถูกปา ระบบคะแนนสูงสุดแสดงผลอย่างถูกต้องตามคะแนนที่ผู้เล่นทำได้

5. การจบเกมและการรีเซ็ต:

• หลังจากที่ผู้เล่นปาลูกดอกครบ 10 ครั้ง เกมจะสิ้นสุดและแสดงคะแนนสุดท้าย พร้อมให้ผู้เล่นเริ่มเล่นใหม่ได้ง่ายด้วยปุ่ม “เริ่มใหม่”

ผลการทดลองแสดงให้เห็นว่า:

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

ข้อเสนอแนะ

1. เพิ่มระดับความยาก:

• สามารถเพิ่มระดับความยากของเกมได้ เช่น เป้าเคลื่อนไหวเร็วขึ้นหรือสุ่มเปลี่ยนทิศทางเพื่อให้ผู้เล่นต้องใช้ทักษะมากขึ้นในการปา

2. เพิ่มรูปแบบเป้า:

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

3. เพิ่มระบบเก็บคะแนนออนไลน์:

• เพิ่มระบบการบันทึกคะแนนสูงสุดของผู้เล่นหลายคน หรือระบบกระดานคะแนนออนไลน์ เพื่อให้ผู้เล่นสามารถเปรียบเทียบคะแนนกับผู้เล่นคนอื่น ๆ ได้

4. เพิ่มเอฟเฟกต์เสียงและกราฟิก:

• เพิ่มเอฟเฟกต์เสียงเมื่อปาลูกดอกและเอฟเฟกต์เมื่อได้คะแนน เพื่อเพิ่มความตื่นเต้นและความมีชีวิตชีวาให้กับเกม

10. การนำไปประยุกต์ใช้กับวิศกรรมไฟฟ้า

การนำเกมปาเป้าไปประยุกต์ใช้กับวิศวกรรมไฟฟ้าสามารถทำได้ในหลายแง่มุม โดยเฉพาะอย่างยิ่งในด้านการศึกษา การฝึกฝนทักษะ และการสร้างความเข้าใจในแนวคิดต่าง ๆ ดังนี้:

1. การศึกษาและการฝึกอบรม

• การฝึกทักษะการวัดและการควบคุม: เกมสามารถใช้เพื่อสอนการวัดระยะทางและการควบคุมการเคลื่อนที่ของอุปกรณ์ เช่น มอเตอร์หรือเซนเซอร์ โดยให้ผู้เรียนได้ทดลองคำนวณระยะทางที่ต้องการเพื่อให้ลูกดอกไปถึงเป้า
• การวิเคราะห์ข้อมูล: สามารถใช้เกมในการเก็บข้อมูลคะแนนและการวัดระยะทาง เพื่อนำมาวิเคราะห์และทำความเข้าใจการควบคุมแบบป้อนกลับ (Feedback Control) และการปรับปรุงประสิทธิภาพในการทำงาน

2. การจำลองระบบควบคุม

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

3. การพัฒนาอุปกรณ์ฮาร์ดแวร์

• การพัฒนาอุปกรณ์ต้นแบบ: ใช้เกมเป็นพื้นฐานในการพัฒนาอุปกรณ์ต้นแบบ เช่น ระบบยิงลูกดอกที่ควบคุมด้วยไมโครคอนโทรลเลอร์ เพื่อให้ผู้เรียนได้เรียนรู้เกี่ยวกับการเขียนโปรแกรมควบคุมฮาร์ดแวร์
• การสร้างระบบตรวจจับการเคลื่อนไหว: ประยุกต์ใช้เทคโนโลยีการตรวจจับการเคลื่อนไหว เช่น กล้องหรือเซนเซอร์เพื่อติดตามการยิงลูกดอก และวิเคราะห์ผลการยิงในเวลาเรียลไทม์

4. การสร้างการจำลอง 3 มิติ

• การออกแบบและพัฒนาแอปพลิเคชัน 3 มิติ: ใช้โปรแกรมสร้างเกมหรือซอฟต์แวร์จำลองการเล่นเกม เพื่อให้นักศึกษาได้เรียนรู้การสร้างกราฟิก 3 มิติ และเข้าใจการจัดการทรัพยากรในโปรแกรมคอมพิวเตอร์

5. การทดสอบและการวิเคราะห์

• การทดสอบพฤติกรรมทางไฟฟ้า: นำเกมมาใช้ในการทดสอบการตอบสนองของวงจรไฟฟ้าหรือระบบควบคุม โดยใช้พฤติกรรมของเกมเป็นตัวอย่างในการวิเคราะห์ผลลัพธ์
• การใช้เพื่อการทดลองทางไฟฟ้า: เช่น การสร้างสภาพแวดล้อมเสมือนสำหรับการทดลองทางไฟฟ้า เช่น การวิเคราะห์แรงดันไฟฟ้าในวงจร

สรุป

การนำเกมปาเป้ามาประยุกต์ใช้กับวิศวกรรมไฟฟ้าสามารถช่วยเสริมสร้างความรู้และทักษะให้กับนักเรียนในด้านต่าง ๆ ทั้งการควบคุม การวัด การออกแบบ และการพัฒนาโปรแกรม โดยสร้างสภาพแวดล้อมที่น่าสนใจและสนุกสนานในการเรียนรู้

11. อ้างอิง

1. https://thumb.ac-illust.com/9f/9fc1b5dac187448909809ea2159a2e37_w.jpeg
2. https://png.pngtree.com/thumb_back/fh260/background/20201024/pngtree-abstract-digital-technology-blue-gaming-background-with-communication-image_436093.jpg

วิดีโออธิบายการเขียนโค้ดสร้างเกมเเละวิธีการเล่นเกม