เกมเดาะบอลแชมเปี้ยนชิพ (Championship Bounce)

จัดทำโดย นายภานุพงศ์ ชูโชติ วฟ.สมทบ รหัสนักศึกษา 167204132019
คณะวิศวกรรมศาสตร์ สาขาวิศกรรมไฟฟ้า

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

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

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

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

การเรียนรู้: โค้ดนี้มีวัตถุประสงค์เพื่อสอนหลักการพื้นฐานของ HTML, CSS และ JavaScript ในการสร้างเกมง่ายๆ

การสร้างสรรค์: ผู้ใช้สามารถนำโค้ดนี้ไปดัดแปลงและสร้างเกมในรูปแบบของตนเองได้

ความบันเทิง: เกมเดาะบอลเป็นเกมที่เล่นง่ายและสนุก เหมาะสำหรับการพักผ่อนหย่อนใจ

3. ขอบเขต

เกม 2 มิติ: เกมนี้เป็นเกมสองมิติที่เล่นบนหน้าจอคอมพิวเตอร์หรืออุปกรณ์เคลื่อนที่

ฟังก์ชันการทำงาน: เกมมีฟังก์ชันหลักคือการเคลื่อนที่ของลูกบอล, การตรวจจับการชน, การนับคะแนน, และการเริ่มเกมใหม่

กราฟิก: กราฟิกของเกมเรียบง่าย ใช้รูปทรงเรขาคณิตพื้นฐาน

การควบคุม: ผู้เล่นควบคุมการเคลื่อนที่ของลูกบอลโดยการคลิกที่หน้าจอ

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

ผู้พัฒนา: ได้ฝึกฝนทักษะการเขียนโปรแกรมเว็บเบื้องต้น เข้าใจหลักการทำงานของ HTML, CSS, และ JavaScript

ผู้เล่น: ได้เล่นเกมที่สนุกสนานและผ่อนคลาย ฝึกสมาธิ และพัฒนาทักษะการตอบสนอง

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

HTML: ใช้สำหรับสร้างโครงสร้างของหน้าเว็บ

CSS: ใช้สำหรับกำหนดรูปแบบและลักษณะที่ปรากฏขององค์ประกอบต่างๆ บนหน้าเว็บ

JavaScript: ใช้สำหรับสร้างสรรค์การทำงานที่ซับซ้อน เช่น การเคลื่อนไหว การโต้ตอบ และการคำนวณ

Canvas API: ใช้สำหรับวาดรูปและสร้างภาพเคลื่อนไหวบนหน้าเว็บ

DOM (Document Object Model): ใช้สำหรับเข้าถึงและจัดการองค์ประกอบต่างๆ บนหน้าเว็บ

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

6.1 การตั้งค่าเริ่มต้น:

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

6.2 การสร้างลูปหลัก:

• สร้างลูปที่ทำงานซ้ำๆ เพื่ออัปเดตสถานะของเกมในแต่ละเฟรม
• ภายในลูป:
  • ลบภาพที่วาดไว้ในเฟรมก่อนหน้า
  • อัปเดตตำแหน่งของวัตถุต่างๆ (ลูกบอล, พื้นที่เล่น)
  • ตรวจสอบการชน
  • วาดภาพใหม่บน canvas

6.3 การตรวจสอบการชน:

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

6.4 การคำนวณการเคลื่อนที่:

• คำนวณตำแหน่งใหม่ของลูกบอลในแต่ละเฟรมโดยพิจารณาจากความเร็วและแรงโน้มถ่วง
• ปรับความเร็วของลูกบอลเมื่อเกิดการชน

6.5 การจัดการเหตุการณ์:

• รับฟังเหตุการณ์จากผู้ใช้ เช่น การคลิกเมาส์ การสัมผัสหน้าจอ
• ตอบสนองต่อเหตุการณ์เหล่านั้น เช่น การเริ่มเกมใหม่ การเปลี่ยนแปลงความเร็วของลูกบอล

6.6 การแสดงผล:

• ใช้ Canvas API เพื่อวาดรูปทรงต่างๆ บนหน้าจอ เช่น ลูกบอล พื้นที่เล่น และข้อความ
• อัปเดตภาพบนหน้าจออย่างต่อเนื่องเพื่อสร้างภาพเคลื่อนไหว

6.7 การจัดการคะแนน:

• นับจำนวนครั้งที่ลูกบอลกระเด้งบนพื้นที่เดาะ
• แสดงคะแนนบนหน้าจอ

6.8 การจัดการเกมจบ:

• ตรวจสอบเงื่อนไขการจบเกม เช่น เมื่อลูกบอลตกลงพื้น
• แสดงข้อความแจ้งว่าเกมจบ
• ให้ผู้เล่นเริ่มเกมใหม่

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

7.1 การเริ่มต้นเกม:

• เปิดไฟล์ HTML: ค้นหาไฟล์ HTML ที่เก็บโค้ดของเกมและเปิดด้วยเว็บเบราว์เซอร์ที่รองรับ HTML5 เช่น Google Chrome, Mozilla Firefox, หรือ Microsoft Edge
• หน้าจอเกม: เมื่อเปิดไฟล์ HTML แล้ว หน้าจอเกมจะปรากฏขึ้นพร้อมกับลูกบอลและพื้นที่เล่น

7.2 การเล่นเกม:

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

7.3 การจบเกม:

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

7.4 การปรับแต่งเกม (หากมี):

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

7.5 การแก้ไขปัญหา:

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

8. การทดลอง

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

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

การทดสอบบนอุปกรณ์ต่างๆ: ทดสอบเกมบนอุปกรณ์ที่แตกต่างกัน เช่น คอมพิวเตอร์ โทรศัพท์มือถือ แท็บเล็ต เพื่อตรวจสอบความเข้ากันได้และประสิทธิภาพ

การทดสอบกับผู้ใช้: ให้ผู้ใช้งานทดลองเล่นเกมและให้ข้อเสนอแนะเพื่อปรับปรุงเกม

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

การใช้ RequestAnimationFrame: ใช้ฟังก์ชัน requestAnimationFrame เพื่ออัปเดตภาพบนหน้าจออย่างราบรื่นและประหยัดทรัพยากร

การใช้ Canvas API อย่างมีประสิทธิภาพ: หลีกเลี่ยงการเรียกใช้ฟังก์ชัน beginPath() และ closePath() บ่อยเกินไป และใช้เทคนิคการวาดรูปที่เหมาะสมกับการสร้างรูปทรงต่างๆ

การลดจำนวนวัตถุที่ต้องวาด: หากมีวัตถุจำนวนมากบนหน้าจอ สามารถลดจำนวนวัตถุที่ต้องวาดในแต่ละเฟรมได้ โดยวาดเฉพาะวัตถุที่อยู่ใกล้กับผู้เล่นแแแแแแ

การใช้เทคนิคการเรนเดอร์: เช่น การใช้ Canvas Layer หรือ WebGL เพื่อเพิ่มประสิทธิภาพในการวาดภาพ

การเพิ่มประสิทธิภาพการคำนวณ: ลดจำนวนการคำนวณที่ไม่จำเป็น เช่น การใช้ตัวแปรชั่วคราวแทนการคำนวณซ้ำๆ

10. สรุปผลการทดลอง

สรุปผลการทดลอง: สรุปผลการทดสอบต่างๆ ที่ได้ดำเนินการไป เช่น เกมทำงานได้ตามที่คาดหวังหรือไม่ มีปัญหาใดๆ เกิดขึ้นหรือไม่

ข้อดีของเกม: ระบุจุดเด่นของเกม เช่น กราฟิกสวยงาม การเล่นสนุก

ข้อเสียของเกม: ระบุจุดที่ต้องปรับปรุง เช่น เกมทำงานช้า มีบั๊ก

ข้อเสนอแนะ: เสนอแนวทางในการพัฒนาเกมให้ดียิ่งขึ้น เช่น เพิ่มฟีเจอร์ใหม่ ปรับปรุงกราฟิก เพิ่มเสียงเอฟเฟกต์

11. อ้างอิง

HTML: Elements.” MDN Web Docs. (n.d.). , https://developer.mozilla.org/en-US/docs/Web/HTML/Element. Accessed 03 Oct 2024.

โค้ดสำหรับการทดลองใช้

<!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 {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .game-container {
            position: relative;
            width: 400px;
            height: 600px;
            margin: 0 auto;
            border: 2px solid #000;
            background-color: #fff;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
        }
        #ball {
            width: 100px; /* เปลี่ยนขนาดเป็น 100px */
            height: 100px; /* เปลี่ยนขนาดเป็น 100px */
            background-image: radial-gradient(circle, #ffeb3b, #f57f17); /* ลวดลายบนบอล */
            border-radius: 50%;
            position: absolute;
            top: 100px; /* เริ่มต้นที่ตำแหน่งสูงขึ้น */
            left: 150px; /* ปรับให้อยู่ตรงกลางหลังจากขยายขนาดบอล */
            cursor: pointer;
            transition: background-color 0.2s, transform 0.2s;
        }
        #ball:hover {
            transform: scale(1.1); /* ขยายบอลเมื่อวางเมาส์เหนือ */
        }
        #score {
            font-size: 24px;
            margin: 20px 0;
        }
        #gameOver {
            display: none;
            font-size: 32px;
            color: red;
            margin-top: 20px;
        }
        #resetButton {
            display: none;
            padding: 10px 20px;
            font-size: 18px;
            margin-top: 20px;
            cursor: pointer;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
        }
        #resetButton:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

    <h1>เกมเดาะบอล</h1>
    <p id="score">คะแนน: 0</p>
    <div class="game-container">
        <div id="ball"></div>
        <p id="gameOver">เกมจบแล้ว!</p>
    </div>
    <button id="resetButton">เริ่มใหม่</button>

    <script>
        const ball = document.getElementById('ball');
        const scoreDisplay = document.getElementById('score');
        const gameOverDisplay = document.getElementById('gameOver');
        const resetButton = document.getElementById('resetButton');
        const container = document.querySelector('.game-container');

        let score = 0;
        let ballSpeedY = 0; // ความเร็วในแนว Y
        let ballSpeedX = 1; // ลดความเร็วในแนว X
        const gravity = 0.2; // ลดแรงโน้มถ่วงลง
        let isGameOver = false;

        // ฟังก์ชันอัพเดตตำแหน่งของบอล
        function updateBallPosition() {
            if (isGameOver) return;

            // อัพเดตตำแหน่ง Y
            let currentTop = ball.offsetTop;
            ballSpeedY += gravity; // เพิ่มความเร็วในแนว Y ด้วยแรงโน้มถ่วง
            let newTop = currentTop + ballSpeedY;

            // อัพเดตตำแหน่ง X
            let currentLeft = ball.offsetLeft;
            let newLeft = currentLeft + ballSpeedX;

            // ตรวจจับการชนขอบซ้ายและขวา
            if (newLeft <= 0 || newLeft + ball.offsetWidth >= container.clientWidth) {
                ballSpeedX = -ballSpeedX; // เปลี่ยนทิศทางแนว X
            }

            // ตรวจจับการชนพื้น
            if (newTop + ball.offsetHeight >= container.clientHeight) {
                newTop = container.clientHeight - ball.offsetHeight;
                endGame();
            }

            // อัพเดตตำแหน่งบอล
            ball.style.top = `${newTop}px`;
            ball.style.left = `${newLeft}px`;

            requestAnimationFrame(updateBallPosition);
        }

        // ฟังก์ชันจบเกม
        function endGame() {
            isGameOver = true;
            gameOverDisplay.style.display = 'block';
            resetButton.style.display = 'inline-block';
        }

        // ฟังก์ชันเริ่มเกมใหม่
        function resetGame() {
            score = 0;
            scoreDisplay.textContent = `คะแนน: ${score}`;
            isGameOver = false;
            gameOverDisplay.style.display = 'none';
            resetButton.style.display = 'none';

            // รีเซ็ตตำแหน่งบอล
            ball.style.top = '100px';
            ball.style.left = `${(container.clientWidth - ball.offsetWidth) / 2}px`;

            // รีเซ็ตความเร็ว
            ballSpeedY = 0;
            ballSpeedX = 3;

            updateBallPosition();
        }

        // เมื่อคลิกบอล
        ball.addEventListener('click', () => {
            if (isGameOver) return;

            score++;
            scoreDisplay.textContent = `คะแนน: ${score}`;

            // เปลี่ยนทิศทาง Y ให้บอลกระโดดขึ้น
            ballSpeedY = -8; // ลดความแรงในการกระโดด

            // เพิ่มความเร็วในแนว X แบบสุ่มเพื่อเพิ่มความท้าทาย
            let randomX = (Math.random() * 2) - 1; // ลดความเร็วสุ่มเป็น -1 ถึง +1
            ballSpeedX += randomX;

            // จำกัดความเร็ว X เพื่อไม่ให้บอลเคลื่อนที่เร็วเกินไป
            if (ballSpeedX > 3) ballSpeedX = 3; // จำกัดความเร็ว X สูงสุดเป็น 3
            if (ballSpeedX < -3) ballSpeedX = -3; // จำกัดความเร็ว X ต่ำสุดเป็น -3
        });

        // เมื่อคลิกปุ่มรีเซ็ต
        resetButton.addEventListener('click', resetGame);

        // เริ่มเกมเมื่อโหลดหน้าเว็บ
        window.onload = () => {
            updateBallPosition();
        };
    </script>

</body>
</html>

วิดิโออธิบายการทำงานของโปรแกรม