เกมงู(Snake Game)

คณะวิศวกรรมศาสตร์ / สาขาวิศวกรรมไฟฟ้า / โครงงานวิชาเรียน
ตุลาคม 15, 2024
0

ผู้เขียนบทความ นางสาว สุนิสา เพ็ชสุวรรณ วฟ.167404130045

คณะวิศวกรรมศาสตร์ สาขาวิศวกรรมไฟฟ้า
วิชา :04-000-104 การโปรเเกรมคอมพิวเตอร์ 
1.ความเป็นมา:
เกมงู(Snake Game)เกมงูเป็นเกมคลาสสิกที่ได้รับความนิยมมาอย่างยาวนาน เกิดขึ้นครั้งแรกในยุค 1970 และได้รับความนิยมอย่างมากในโทรศัพท์มือถือรุ่นแรกๆ
2.วัตถุประสงค์:
ความบันเทิง: ให้ผู้เล่นได้ผ่อนคลายและสนุกสนาน
การเรียนรู้: เป็นตัวอย่างง่ายๆ ของการเขียนโปรแกรมและการสร้างเกม
การฝึกทักษะ: ฝึกทักษะการแก้ปัญหา การวางแผน และการตอบสนองต่อสถานการณ์ที่เปลี่ยนแปลง
3.ขอบเขต:
เกมง่ายๆ: เกมงูเป็นเกมที่เรียบง่ายและเข้าใจง่าย เหมาะสำหรับผู้เริ่มต้นศึกษาการเขียนโปรแกรม
พัฒนาต่อยอดได้: สามารถนำโค้ดพื้นฐานนี้ไปพัฒนาต่อยอดได้มากมาย
4.ประโยชน์ที่ได้รับ:
ผู้พัฒนา: ได้เรียนรู้พื้นฐานการเขียนโปรแกรมด้วย JavaScript, HTML5 และ CSS
ผู้เล่น: ได้สนุกสนานและผ่อนคลาย
5.ความรู้ที่เกี่ยวข้อง
HTML5: ภาษาสำหรับสร้างโครงสร้างของเว็บเพจ
CSS: ภาษาสำหรับกำหนดรูปแบบของเว็บเพจ
JavaScript: ภาษาสำหรับสร้างสรรค์การทำงานแบบไดนามิกบนเว็บเพจ
Canvas API: API สำหรับวาดภาพและสร้างกราฟิกบนเว็บเพจ
อัลกอริทึม: อัลกอริทึมในการเคลื่อนที่ของงู การตรวจจับการชน และการสร้างแอปเปิ้ลแบบสุ่ม
โครงสร้างข้อมูล: การใช้อาร์เรย์เพื่อเก็บข้อมูลพิกัดของหางงู
6.ผลการดำเนินงาน:
หลังจากแก้ไขโค้ดแล้ว Score จะเพิ่มขึ้น ทุกครั้งที่งูกินแอปเปิ้ล ทำให้เกมมีความน่าสนใจมากขึ้น
7.วิธีการใช้งาน:
  1.เปิดไฟล์ HTML ในเว็บเบราว์เซอร์
  2.ใช้ปุ่มลูกศรเพื่อควบคุมทิศทางของงู
  3.กินแอปเปิ้ลเพื่อเพิ่มคะแนนและความยาวของหาง
8.ผลการทดลอง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
</head>
<body>

    <div >Score : <span id="score">0</span></div>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
        let canvas, ctx; 
        let score = 0;

        
        window.onload = function() {
            canvas = document.getElementById('canvas');
            ctx = canvas.getContext("2d");

            document.addEventListener("keydown", keyDownEvent); 

            // render X times per second
            let x = 4;
            setInterval(draw, 1000 / x);
        };

        // game world 
        let gridSize = tileSize = 20; // 20 x 20 = 400
        let nextX = nextY = 0;

        // score

        // snake 
        let defaultTailSize = 1;
        let tailSize = defaultTailSize;
        let snakeTrail = [];
        let snakeX = snakeY = 10;

        // apple 
        let appleX = appleY = 15;

        // draw 
        function draw() {
            // move snake in next pos
            snakeX += nextX;
            snakeY += nextY; 

            // snake over game world?
            if (snakeX < 0) {
            snakeX = gridSize - 1;
            }
            if (snakeX > gridSize - 1) {
            snakeX = 0;
            }

            if (snakeY < 0) {
            snakeY = gridSize - 1;
            }
            
            if (snakeY > gridSize - 1) {
            snakeY = 0;
        }

        // snake bite apple 
        if (snakeX == appleX && snakeY == appleY) {
            tailSize++;
            score += 1;
            document.getElementById('score').innerHTML = score;

            appleX = Math.floor(Math.random() * gridSize);
            appleY = Math.floor(Math.random() * gridSize);
        }

        // paint background 
        ctx.fillStyle = "green";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // paint snake
        ctx.fillStyle = "yellow";
        for (let i = 0; i < snakeTrail.length; i++) {
            ctx.fillRect(
                snakeTrail[i].x * tileSize,
                snakeTrail[i].y * tileSize,
                tileSize,
                tileSize
            );
            // snake bites it's tail
            if (snakeTrail[i].x == snakeX && snakeTrail[i].y == snakeY) {
                tailSize = defaultTailSize;
                score = 0;
                document.getElementById('score').innerHTML = score;
            } 
        }   

        // paint apple
        ctx.fillStyle = "red";
        ctx.fillRect(appleX * tileSize, appleY * tileSize, tileSize, tileSize);

        //set snake trail
        snakeTrail.push({ x: snakeX, y: snakeY });
            while (snakeTrail.length > tailSize) {
                snakeTrail.shift();
                console.log(snakeTrail)
            }
        }
        // input
        function keyDownEvent(e) {
            switch (e.keyCode) {
                case 37:
                    nextX = -1;
                    nextY = 0;
                    break;
                case 38:
                    nextX = 0;
                    nextY = -1;
                    break;
                case 39:
                    nextX = 1;
                    nextY = 0;
                    break;
                case 40:
                    nextX = 0;
                    nextY = 1;
                    break;
            }
        }
       
    </script>
</body>
</html>
9.สรุปผลการทดลอง:
เกมนี้ทำงานได้ดีและมีฟีเจอร์พื้นฐานของเกมงูครบถ้วน การเพิ่มฟังก์ชัน Score จะเพิ่มขึ้น ทุกครั้งที่งูกินแอปเปิ้ลทำให้เกมงูมีความน่าสนใจมากขึ้นและเพิ่มความท้าทายให้กับผู้เล่น สามารถนำไปพัฒนาเกมเพิ่มเติมได้ในอนาคต
10.ข้อมูลอ้างอิง:
เว็บที่ใช้สร้าง:https://www.onlinegdb.com/edit/H6ZjYv3SM
เว็บที่หาข้อมูล:https://gemini.google.com/app/4182c24956d004da?hl=th
เว็บที่หาข้อมูล:https://chatgpt.com/