GARDENER Game

ผู้เขียนบทความ : นายพัชรพล เพชรรักษ์

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

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

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

ในยุคปัจจุบัน เกมออนไลน์และเกมบนเว็บได้รับความนิยมอย่างกว้างขวางในหมู่ผู้เล่นที่มองหาความบันเทิงและการท้าทาย เกม GARDENER นี้ได้รับการออกแบบให้เป็นเกม 2D ที่สนุกสนาน โดยผู้เล่นจะสวมบทบาทเป็นชาวสวน (Gardener) ที่ต้องเก็บแครอทให้ได้มากที่สุด ใช้เทคโนโลยี HTML, CSS และ JavaScript ในการพัฒนาเพื่อให้สามารถเล่นบนเบราว์เซอร์ได้

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

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

3. ขอบเขต

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

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

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

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

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

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

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

โค้ดเกม

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GARDENER</title>
    <style>
        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-image: url('3dda3acc-f999-433f-98c5-80e532a9decf.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            font-family: 'Itim', sans-serif;
        }

        canvas {
            width: 400px;
            height: 550px;
            border: 2px solid black;
            border-radius: 15px;
            background-color: rgba(255, 255, 255, 0.8);
        }

        h1 {
            color: white;
            position: absolute;
            top: 15px;
            left: 50px;
            font-size: 70px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
        }

        #highScoreDisplay {
            color: white;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
            font-size: 50px;
            position: absolute;
            top: 75px;
            right: 165px;
        }

        .message-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.8);
            border: 2px solid black;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            width: 300px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        button {
            margin-top: 20px;
            padding: 10px;
            font-size: 28px;
            cursor: pointer;
            background-color: #218838;
            color: white;
            border: none;
            border-radius: 20px;
            width: 150px;
            height: 50px;
        }

        button:hover {
            background-color: #6BA08A;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <canvas id="gameCanvas"></canvas>
    </div>

    <h1>GARDENER</h1>

    <div id="startMessage" class="message-box">
        <h2>พร้อมเล่นเกมหรือยัง?</h2>
        <p>ใช้ลูกศรซ้าย-ขวาเพื่อควบคุมตะกร้าและเก็บผลไม้</p>
    </div>

    <button id="startButton">เริ่มเกม</button>
    <button id="resetButton" style="display:none;">รีเซ็ตเกม</button>

    <div id="highScoreDisplay">คะแนนสูงสุด: 0</div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const startButton = document.getElementById('startButton');
        const resetButton = document.getElementById('resetButton');
        const highScoreDisplay = document.getElementById('highScoreDisplay');
        const startMessage = document.getElementById('startMessage');

        let gameRunning = false;
        canvas.width = 400;
        canvas.height = 550;

        const playerImage = new Image();
        playerImage.src = '254677-depositphotos-bgremover.png';

        const fruitImage = new Image();
        fruitImage.src = 'S__12247043-depositphotos-bgremover.png';

        let player = {
            x: canvas.width / 2 - 50,
            y: canvas.height - 105,
            width: 100,
            height: 200,
            moveSpeed: 50
        };

        let fruit = {
            x: Math.random() * canvas.width,
            y: 0,
            radius: 35,
            fallSpeed: 1.5
        };

        let score = 0;
        let life = 3;
        let highScore = 0;

        function playCatchSound() {
            const sound = new Audio('mixkit-retro-game-notification-212.mp3');
            sound.play().catch(error => console.error('Error playing catch sound:', error));
        }

        function playMissSound() {
            const sound = new Audio('mixkit-arrow-whoosh-1491.mp3');
            sound.play().catch(error => console.error('Error playing miss sound:', error));
        }

        function drawPlayer() {
            ctx.drawImage(playerImage, player.x, player.y, player.width, player.height);
        }

        function drawFruit() {
            ctx.drawImage(fruitImage, fruit.x - fruit.radius, fruit.y - fruit.radius, fruit.radius * 2, fruit.radius * 2);
        }

        function updateFruit() {
            fruit.y += fruit.fallSpeed;

            if (fruit.y - fruit.radius > canvas.height) {
                fruit.x = Math.random() * canvas.width;
                fruit.y = 0;
                life -= 1;
                playMissSound();

                if (life === 0) {
                    gameRunning = false;
                    resetButton.style.display = 'block';
                }
            }

            if (
                fruit.x > player.x &&
                fruit.x < player.x + player.width &&
                fruit.y + fruit.radius > player.y
            ) {
                fruit.x = Math.random() * canvas.width;
                fruit.y = 0;
                score += 1;
                playCatchSound();

                if (score % 5 === 0) {
                    fruit.fallSpeed += 0.5;
                }

                if (score > highScore) {
                    highScore = score;
                    highScoreDisplay.textContent = `คะแนนสูงสุด: ${highScore}`;
                }
            }
        }

        function movePlayer(event) {
            if (gameRunning) {
                if (event.key === 'ArrowLeft' && player.x > 0) {
                    player.x -= player.moveSpeed;
                } else if (event.key === 'ArrowRight' && player.x + player.width < canvas.width) {
                    player.x += player.moveSpeed;
                }
            }
        }

        function gameLoop() {
            if (gameRunning) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawPlayer();
                drawFruit();
                updateFruit();

                ctx.fillStyle = 'black';
                ctx.font = '18px Itim';
                ctx.fillText('คะแนน: ' + score, 10, 20);
                ctx.fillText('Life: ' + life, 10, 50);

                requestAnimationFrame(gameLoop);
            }
        }

        startButton.addEventListener('click', () => {
            gameRunning = true;
            score = 0;
            life = 3;
            fruit.fallSpeed = 1.5;
            startButton.style.display = 'none';
            resetButton.style.display = 'none';
            startMessage.style.display = 'none';
            gameLoop();
        });

        resetButton.addEventListener('click', () => {
            gameRunning = false;
            score = 0;
            life = 3;
            resetButton.style.display = 'none';
            startButton.style.display = 'block';
            startMessage.style.display = 'block';
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });

        window.addEventListener('keydown', movePlayer);
    </script>
</body>
</html>

7. วิธีการเล่น

  1. เริ่มเกม:
    • คลิกที่ปุ่ม “เริ่มเกม” บนหน้าจอ หลังจากที่คลิก เกมจะเริ่มต้นและแครอทจะเริ่มตกลงมา
  2. การควบคุมตัวละคร:
    • ใช้ปุ่มลูกศร ซ้าย และ ขวา บนแป้นพิมพ์เพื่อควบคุมตะกร้า
  3. เป้าหมายของเกม:
    • พยายามเก็บแครอทที่ตกลงมาในตะกร้า หากสามารถเก็บได้ จะได้รับ คะแนน เพิ่มขึ้น
    • ทุก ๆ 5 คะแนนที่สะสมได้ แครอทจะตกเร็วขึ้น เพื่อเพิ่มความท้าทาย
    • คะแนนสูงสุด จะถูกบันทึกและแสดงอยู่บนหน้าจอ
  4. ชีวิต (Life):
    • ผู้เล่นจะเริ่มเกมด้วย 3 ชีวิต
    • หากพลาดเก็บแครอท ชีวิตจะลดลง 1 หน่วย
    • เมื่อ ชีวิตเหลือ 0 เกมจะจบลง และปุ่ม “รีเซ็ตเกม” จะปรากฏขึ้น
  5. รีเซ็ตเกม:
    • เมื่อชีวิตเหลือ 0 หรือผู้เล่นต้องการเริ่มเกมใหม่ สามารถคลิกที่ปุ่ม “รีเซ็ตเกม” เพื่อรีเซ็ตคะแนนและเริ่มเกมใหม่อีกครั้ง

8.ผลการทดลอง

8.1 เปิดไฟล์บนเบราว์เซอร์จะขึ้นหน้าเกม

8.2 กดเริ่มเกมจะมีตะกร้าพร้อมแครอทตกลงมา เมื่อเก็บได้ทุกๆ 5 คะแนน แครอทจะตกลงมาเร็วขึ้น

8.3 เมื่อชีวิตหมดจะจบเกมทันทีพร้อมมีปุ่มรีเซ็ตขึ้นเพื่อให้กดเริ่มใหม่

9.สรุป

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

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

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

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

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

You may also like...

ใส่ความเห็น

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