เกมงูกินอาหาร

จัดทําโดย นายจิรายุ จันทร์สิงขรณ์ วฟ 1/2 รหัสนักศึกษา 167404130052

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

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

ลิ้งเกม

file:///D:/%E0%B8%84%E0%B8%AD%E0%B8%A1/%E0%B9%80%E0%B8%81%E0%B8%A1%E0%B8%87%E0%B8%B9%E0%B8%AA%E0%B8%A1%E0%B8%9A%E0%B8%B9%E0%B8%A3%E0%B8%93%E0%B9%8C.html

ความเป็นมา

สร้างมาเพื่อจําลองการออกเเบบเกมหรือโค้ดในการเขียนHTML ในการศึกษา

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

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

ขอบเขต

ใช้ได้เฉพาะกับภาษา HTML เท่านั้น

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

1.ใช้ในการศึกษาภาษาHTML

2.ศึกษาเพื่อพัฒนาในการใช้HTML

3.ใช้เพื่ออคลายเครียด

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

การใช้ความรู้พื้นฐานที่เกี่ยวกับการเชียนภาษาHTML

สรุปวิธีการใช้โปรแกรมเกมงูกินอาหาร

เตรียมไฟล์ HTML:

  • เปิดโปรแกรมแก้ไขข้อความ (เช่น Notepad, VSCode)
  • คัดลอกโค้ด HTML ที่ให้ไว้

บันทึกไฟล์:

  • วางโค้ดลงในโปรแกรมแก้ไข
  • บันทึกไฟล์ด้วยนามสกุล .html (เช่น snake_game.html)

เปิดเกมในเบราว์เซอร์:

  • ดับเบิลคลิกที่ไฟล์ที่บันทึกไว้ หรือเปิดไฟล์ในเบราว์เซอร์ (เช่น Chrome, Firefox)

เล่นเกม:

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

เริ่มใหม่:

  • หากเกมจบลง (Game Over) ให้กดปุ่ม “เริ่มใหม่” เพื่อเล่นอีกครั้ง

การทดลอง

เตรียมเครื่องมือ:

  • ใช้โปรแกรมแก้ไขข้อความ (เช่น Visual Studio Code, Notepad++) หรือเครื่องมือพัฒนาเว็บ
  • ใช้เว็บเบราว์เซอร์ (เช่น Chrome, Firefox) สำหรับทดสอบเกม

สร้างไฟล์ HTML:

  • เปิดโปรแกรมแก้ไขข้อความและสร้างไฟล์ใหม่
  • คัดลอกโค้ด HTML ที่ให้ไว้ในข้อความก่อนหน้าและวางลงในไฟล์
  • บันทึกไฟล์ด้วยนามสกุล .html (เช่น snake_game.html)

อธิบายโค้ด:

  • HTML Structure โครงสร้าง HTML ประกอบด้วย div สำหรับการแสดงคะแนน, canvas สำหรับการวาดงูและเชอรี่, และปุ่ม “เริ่มใหม่” เพื่อเริ่มเกมใหม่
  • CSS Styles : ใช้สำหรับการตกแต่งและออกแบบลักษณะของหน้าเว็บ เช่น สีพื้นหลัง, ขนาดฟอนต์, และการจัดวาง
  • JavaScript Code : การประกาศตัวแปร
    • ฟังก์ชัน initGame(): กำหนดค่าเริ่มต้นของเกม เช่น ตำแหน่งงู ขนาด และคะแนน
    • ฟังก์ชัน game(): วาดงูและเชอรี่ อัปเดตตำแหน่ง ตรวจสอบการชน และเพิ่มคะแนน
    • ฟังก์ชัน keyPush(evt): ตรวจจับการกดปุ่มลูกศรเพื่อควบคุมการเคลื่อนที่ของงู

ทดสอบเกม:

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

ปรับปรุง:

  • ทดลองปรับเปลี่ยนความเร็วของเกมหรือขนาดของงู
  • ทดลองเพิ่มฟีเจอร์ใหม่ เช่น การเพิ่มระดับความยาก หรือเพิ่มวัตถุใหม่ในเกม

สรุปการทดลอง: เกมงูกินอาหาร

วัตถุประสงค์: สร้างเกมง่ายๆ ที่ใช้สำหรับทดสอบทักษะการควบคุมและความเร็วในการตอบสนองผ่านการควบคุมทิศทางของงูเพื่อกิน “เชอรี่” และเพิ่มคะแนน

วิธีการทำงาน:

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

เทคโนโลยีที่ใช้:

  • HTML, CSS สำหรับการออกแบบ UI
  • JavaScript สำหรับการควบคุมเกมและการเคลื่อนไหว

สรุปผล

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

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

<!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; 
            background: url('https://animesher.com/orig/1/182/1826/18263/animesher.com_nature-gif-clouds-1826386.gif') no-repeat center center fixed;
            background-size: cover;
            color: #333; 
            margin: 0; 
            padding: 20px; 
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .container {
            background-color: rgba(255, 255, 255, 0.9); 
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        #gc {
            border: 4px solid #333;
            border-radius: 10px;
            margin-top: 20px;
        }

        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        p {
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div style="display: flex; justify-content: center; align-items: center;">
            <p>Score:&nbsp;</p>
            <p id="score">0</p>
        </div>
        <canvas id="gc" width="400" height="400"></canvas>
        <button id="restartBtn">เริ่มใหม่</button>
    </div>
    
    <script>
        let canv, ctx;
        let positionX, positionY, cherryX, cherryY, gs, tc, xv, yv, trail, tail, score;
        let gameInterval;

        function initGame() {
            positionX = positionY = 10; // Starting position of the snake
            gs = 20; // Size of the snake
            tc = canv.width / gs; // Number of segments in each direction
            cherryX = Math.floor(Math.random() * tc);
            cherryY = Math.floor(Math.random() * tc);
            xv = yv = 0; // Starting direction
            trail = [];
            tail = 3; // Initial length of the snake
            score = 0; // Initial score
            document.getElementById("score").innerHTML = score;
            clearInterval(gameInterval); // Clear previous interval
            gameInterval = setInterval(game, 150); // Game speed
        }

        function game() {
            positionX += xv;
            positionY += yv;

            // Check for wall collision
            if (positionX < 0 || positionX >= tc || positionY < 0 || positionY >= tc) {
                alert("Game Over! กด 'เริ่มใหม่' เพื่อเล่นอีกครั้ง");
                clearInterval(gameInterval); // Stop the game
                return;
            }

            ctx.fillStyle = "black"; // Background color
            ctx.fillRect(0, 0, canv.width, canv.height); // Clear the screen

            ctx.fillStyle = "lime"; // Snake color
            for (let i = 0; i < trail.length; i++) {
                ctx.fillRect(trail[i].x * gs, trail[i].y * gs, gs - 2, gs - 2);
                if (trail[i].x === positionX && trail[i].y === positionY) {
                    alert("Game Over! กด 'เริ่มใหม่' เพื่อเล่นอีกครั้ง");
                    clearInterval(gameInterval); // Stop the game
                    return;
                }
            }

            trail.push({ x: positionX, y: positionY }); // Add new position of the snake
            while (trail.length > tail) {
                trail.shift(); // Remove the old position of the snake
            }

            if (cherryX === positionX && cherryY === positionY) { // Snake eats cherry
                tail++; // Increase snake length
                score++; // Increase score
                document.getElementById("score").innerHTML = score; // Update score
                // Randomly place new cherry position
                do {
                    cherryX = Math.floor(Math.random() * tc);
                    cherryY = Math.floor(Math.random() * tc);
                } while (trail.some(segment => segment.x === cherryX && segment.y === cherryY));
            }

            ctx.fillStyle = "red"; // Cherry color
            ctx.fillRect(cherryX * gs, cherryY * gs, gs - 2, gs - 2);
        }

        function keyPush(evt) {
            switch (evt.keyCode) {
                case 37: // Left arrow
                    if (xv === 0) { xv = -1; yv = 0; }
                    break;
                case 38: // Up arrow
                    if (yv === 0) { xv = 0; yv = -1; }
                    break;
                case 39: // Right arrow
                    if (xv === 0) { xv = 1; yv = 0; }
                    break;
                case 40: // Down arrow
                    if (yv === 0) { xv = 0; yv = 1; }
                    break;
            }
        }

        window.onload = function () {
            canv = document.getElementById("gc");
            ctx = canv.getContext("2d"); // Create 2D context
            document.addEventListener("keydown", keyPush); // Set key press event
            initGame(); // Start the game
        }

        document.getElementById("restartBtn").addEventListener("click", initGame); // Set restart button
    </script>
</body>
</html>

ฟังก์ชันหลักที่น่าสนใจ

1. initGame

ฟังก์ชันนี้ใช้สำหรับการตั้งค่าพื้นฐานของเกมเมื่อเริ่มต้นหรือเมื่อผู้เล่นกดปุ่ม “เริ่มใหม่”

function initGame() {
    positionX = positionY = 10; // ตำแหน่งเริ่มต้นของงู
    gs = 20; // ขนาดของงู
    tc = canv.width / gs; // จำนวนเซกเมนต์ในแต่ละทิศทาง
    cherryX = Math.floor(Math.random() * tc);
    cherryY = Math.floor(Math.random() * tc);
    xv = yv = 0; // ทิศทางเริ่มต้น
    trail = [];
    tail = 3; // ความยาวเริ่มต้นของงู
    score = 0; // คะแนนเริ่มต้น
    document.getElementById("score").innerHTML = score; // อัปเดตคะแนนใน UI
    clearInterval(gameInterval); // เคลียร์อินเทอร์วัลก่อนหน้า
    gameInterval = setInterval(game, 150); // กำหนดความเร็วของเกม
}

2. game

ฟังก์ชันนี้ทำหน้าที่หลักในการอัปเดตสถานะของเกม โดยถูกเรียกซ้ำๆ ตามระยะเวลาที่กำหนด

function game() {
    positionX += xv; // อัปเดตตำแหน่ง X ของงู
    positionY += yv; // อัปเดตตำแหน่ง Y ของงู

    // ตรวจสอบการชนกับกำแพง
    if (positionX < 0 || positionX >= tc || positionY < 0 || positionY >= tc) {
        alert("Game Over! กด 'เริ่มใหม่' เพื่อเล่นอีกครั้ง");
        clearInterval(gameInterval); // หยุดเกม
        return;
    }

    ctx.fillStyle = "black"; // ตั้งค่าสีพื้นหลัง
    ctx.fillRect(0, 0, canv.width, canv.height); // ล้างหน้าจอ

    ctx.fillStyle = "lime"; // สีของงู
    for (let i = 0; i < trail.length; i++) {
        ctx.fillRect(trail[i].x * gs, trail[i].y * gs, gs - 2, gs - 2); // วาดงู
        if (trail[i].x === positionX && trail[i].y === positionY) {
            alert("Game Over! กด 'เริ่มใหม่' เพื่อเล่นอีกครั้ง");
            clearInterval(gameInterval); // หยุดเกม
            return;
        }
    }

    trail.push({ x: positionX, y: positionY }); // เพิ่มตำแหน่งใหม่ของงู
    while (trail.length > tail) {
        trail.shift(); // ลบตำแหน่งเก่าของงู
    }

    // ตรวจสอบว่ากินเชอรี่หรือไม่
    if (cherryX === positionX && cherryY === positionY) {
        tail++; // เพิ่มความยาวของงู
        score++; // เพิ่มคะแนน
        document.getElementById("score").innerHTML = score; // อัปเดตคะแนนใน UI
        // วางเชอรี่ใหม่ในตำแหน่งสุ่ม
        do {
            cherryX = Math.floor(Math.random() * tc);
            cherryY = Math.floor(Math.random() * tc);
        } while (trail.some(segment => segment.x === cherryX && segment.y === cherryY));
    }

    ctx.fillStyle = "red"; // สีของเชอรี่
    ctx.fillRect(cherryX * gs, cherryY * gs, gs - 2, gs - 2); // วาดเชอรี่
}

3. keyPush

ฟังก์ชันนี้ใช้เพื่อจัดการกับการควบคุมทิศทางของงูตามการกดปุ่มลูกศร

function keyPush(evt) {
    switch (evt.keyCode) {
        case 37: // ปุ่มลูกศรซ้าย
            if (xv === 0) { xv = -1; yv = 0; }
            break;
        case 38: // ปุ่มลูกศรขึ้น
            if (yv === 0) { xv = 0; yv = -1; }
            break;
        case 39: // ปุ่มลูกศรขวา
            if (xv === 0) { xv = 1; yv = 0; }
            break;
        case 40: // ปุ่มลูกศรลง
            if (yv === 0) { xv = 0; yv = 1; }
            break;
    }
}

สรุป

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

Tags:

You may also like...

ใส่ความเห็น

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