เกมหมูเด้ง (Piggy Bounce)

ผู้เขียนบทความ : นายรัชตะ สุขใส

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

วิชา : 04-000-104 การโปรแกรมคอมพิวเตอร์ การศึกษาภาคที่1/2567

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

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

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

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

3.ขอบเขต

ขอบเขตของโครงงานนี้ประกอบด้วย:

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

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

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

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

  • HTML: ใช้สำหรับสร้างโครงสร้างของเว็บเพจ
  • CSS: ใช้สำหรับกำหนดรูปแบบและลักษณะของเว็บเพจ
  • JavaScript:ใช้สำหรับสร้างสรรค์อินเตอร์แอคชันและควบคุมการทำงานของเว็บเพจ
  • Canvas API: ใช้สำหรับวาดกราฟิกบนหน้าจอ
  • DOM Manipulation: ใช้สำหรับจัดการองค์ประกอบต่างๆ บนหน้าจอ

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

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

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

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

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

1.เตรียมไฟล์:

  • คัดลอกโค้ดทั้งหมดในตัวอย่างที่ให้มาและวางลงในโปรแกรมแก้ไขข้อความ (text editor) เช่น Notepad, Visual Studio Code, หรือ Sublime Text.
  • บันทึกไฟล์ด้วยนามสกุล .html เช่น piggy_bounce.html.

2.เพิ่มไฟล์เพลง:

  • เปลี่ยนค่าใน <source src="your-audio-file.mp3" type="audio/mpeg"> เป็นเส้นทางของไฟล์เพลงที่คุณต้องการใช้ในเกม โดยให้แน่ใจว่าไฟล์เพลงอยู่ในตำแหน่งเดียวกับไฟล์ HTML หรือระบุเส้นทางที่ถูกต้องไปยังไฟล์เพลง.

3.เปิดไฟล์ในเบราว์เซอร์:

  • เปิดเบราว์เซอร์ที่คุณใช้งาน (เช่น Google Chrome, Firefox, Edge) และลากไฟล์ piggy_bounce.html ลงในเบราว์เซอร์ หรือใช้เมนูเปิดไฟล์ (File > Open) ในเบราว์เซอร์เพื่อเลือกไฟล์นี้.

4.เริ่มเกม:

  • คุณจะเห็นปุ่ม “เริ่มเกม” (Start Game) ปรากฏขึ้นบนหน้าจอ.
  • คลิกที่ปุ่มนี้เพื่อเริ่มเกม.

5.ควบคุมเกม:

  • ในระหว่างเล่นเกม คุณสามารถใช้ปุ่ม Space บนแป้นพิมพ์เพื่อกระโดดตัวหมู (pig) และหลบหลีกสิ่งกีดขวางที่ปรากฏขึ้น.
  • หากตัวหมูชนกับสิ่งกีดขวาง เกมจะจบลง และคุณจะเห็นปุ่ม “รีสตาร์ทเกม” (Restart Game) เพื่อเริ่มเกมใหม่.

โค้ดเกมด้านล่าง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Piggy Bounce - Avoid Obstacles</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            background-image: url('https://th.bing.com/th/id/OIP.iOkECJjULT_jPQLdlNoKjAAAAA?rs=1&pid=ImgDetMain');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        #gameCanvas {
            display: block;
            background-color: transparent;
        }

        #pig {
            width: 60px;
            height: 60px;
            position: absolute;
            background-color: pink;
            border-radius: 50%;
            border: 3px solid #ff69b4;
        }

        .pig-ear {
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: pink;
            border-radius: 50%;
            border: 2px solid #ff69b4;
        }

        .pig-ear.left {
            left: -10px;
            top: -10px;
        }

        .pig-ear.right {
            right: -10px;
            top: -10px;
        }

        .pig-eye {
            width: 10px;
            height: 10px;
            position: absolute;
            background-color: black;
            border-radius: 50%;
        }

        .pig-eye.left-eye {
            left: 15px;
            top: 20px;
        }

        .pig-eye.right-eye {
            right: 15px;
            top: 20px;
        }

        .pig-nose {
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: pink;
            border-radius: 50%;
            border: 2px solid #ff69b4;
            left: 50%;
            top: 30%;
            transform: translateX(-50%);
        }

        #platform {
            width: 100%;
            height: 20px;
            position: absolute;
            bottom: 0;
            background-color: #32cd32;
        }

        .obstacle {
            width: 30px; 
            height: 30px; 
            position: absolute;
            bottom: 20px;
        }

        #startButton, #restartButton {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10px 20px;
            font-size: 24px;
            background-color: #4caf50;
            color: white;
            border: none;
            cursor: pointer;
            display: none;
        }

        #startButton {
            display: block;
        }

        #score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 24px;
            color: white;
        }
    </style>
</head>
<body>

    <div id="pig">
        <div class="pig-ear left"></div>
        <div class="pig-ear right"></div>
        <div class="pig-eye left-eye"></div>
        <div class="pig-eye right-eye"></div>
        <div class="pig-nose"></div>
    </div>
    <div id="platform"></div>
    <button id="startButton">Start Game</button>
    <button id="restartButton">Restart Game</button>
    <div id="score">Score: 0</div>

    <audio id="backgroundMusic" loop>
        <source src="your-audio-file.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <script>
        const pig = document.getElementById('pig');
        let pigX = window.innerWidth / 2 - 30;
        let pigY = window.innerHeight - 70;
        let velocityY = 0;
        const gravity = 0.4;
        const bounce = -14;
        let jumping = false;
        let velocityX = 0;
        const speed = 5;
        let gameActive = false;

        const startButton = document.getElementById('startButton');
        const restartButton = document.getElementById('restartButton');
        const backgroundMusic = document.getElementById('backgroundMusic');

        let obstacles = [];
        let obstacleInterval;
        let obstacleSpeed = 3; 

        let score = 0;
        const scoreDisplay = document.getElementById('score');

        const colors = ["#ff6347", "#ffd700", "#00ff00", "#1e90ff", "#ff69b4"];

        function getRandomColor() {
            return colors[Math.floor(Math.random() * colors.length)];
        }

        function startGame() {
            gameActive = true;
            startButton.style.display = 'none';
            restartButton.style.display = 'none';
            score = 0;
            scoreDisplay.innerHTML = "Score: " + score;
            pigX = window.innerWidth / 2 - 30;
            pigY = window.innerHeight - 70;
            velocityY = 0;
            jumping = false;
            createObstacles();
            updateGame();
            backgroundMusic.play();
        }

        function updateGame() {
            if (!gameActive) return;

            velocityY += gravity;
            pigY += velocityY;

            if (pigY + 60 > window.innerHeight - 20) {
                pigY = window.innerHeight - 80;
                velocityY = bounce;
                jumping = false;
            }

            obstacles.forEach(obstacle => {
                obstacle.x -= obstacleSpeed;
                if (obstacle.x + 30 < 0) {
                    obstacle.x = window.innerWidth;
                    obstacle.y = window.innerHeight - 50 - Math.random() * 150;
                    obstacle.element.style.backgroundColor = getRandomColor();
                    score++;
                    scoreDisplay.innerHTML = "Score: " + score;
                }
                obstacle.element.style.left = obstacle.x + 'px';
                obstacle.element.style.top = obstacle.y + 'px';

                if (pigX < obstacle.x + 30 &&
                    pigX + 60 > obstacle.x &&
                    pigY < obstacle.y + 30 &&
                    pigY + 60 > obstacle.y) {
                    gameOver();
                }
            });

            pig.style.left = pigX + 'px';
            pig.style.top = pigY + 'px';

            requestAnimationFrame(updateGame);
        }

        function createObstacles() {
            obstacles.forEach(obstacle => obstacle.element.remove());
            obstacles = [];
            for (let i = 0; i < 3; i++) {
                const obstacle = document.createElement('div');
                obstacle.classList.add('obstacle');
                obstacle.style.backgroundColor = getRandomColor();
                document.body.appendChild(obstacle);
                obstacles.push({ x: window.innerWidth + i * 300, y: window.innerHeight - 50 - Math.random() * 150, element: obstacle });
            }
        }

        function jump() {
            if (!jumping) {
                velocityY = bounce;
                jumping = true;
            }
        }

        function gameOver() {
            gameActive = false;
            restartButton.style.display = 'block';
            backgroundMusic.pause();
            backgroundMusic.currentTime = 0;
        }

        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' && gameActive) {
                jump();
            }
        });

        startButton.addEventListener('click', startGame);
        restartButton.addEventListener('click', startGame);

    </script>
</body>
</html>

9.อ้างอิง

  • MDN Web Docs: developer.mozilla.org
  • W3Schools: www.w3schools.com

10.วีดีโอตัวอย่างเกมและอธิบายโค้ด

Tags:

You may also like...

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *