เกมหลบวัตถุ(Object dodge game)

ผู้เขียน : นางสาวปุณณิสา ลิ่มเฮงฮะ รหัสนักศึกษา 167404130086

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

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

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

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

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

1.เพื่อเรียนรู้การใช้ภาษา HTML,CSS และJavaScript

2.เพื่อพัฒนาเกมหลบวัตถุให้ดีขึ้น

3.เพื่อพัฒนาเกมหลบวัตถุ

3.ขอบเขต

1.พัฒนาเกมหลบวัตถุ

2.ใช้ภาษา HTML,CSS และJavaScript ในการพัฒนาเกมและหน้าเบราว์เซอร์

3.ตัวเกมสามารถทำงานได้อย่างมีประสิทธิภาพไม่เกิดปัญหา

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

1.ผู้พัฒนาจะสามารถเข้าใจพื้นฐานการใช้ HTML,CSS และJavaScript

2.มีความรู้ความเข้าใจในการสร้างเกมและพัฒนาเบราว์เซอร์

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

1. CSS (Cascading Style Sheets): ใช้สำหรับตกแต่งและจัดรูปแบบของหน้าเว็บ

2. HTML (HyperText Markup Language): ใช้ในการสร้างโครงสร้างพื้นฐานของหน้าเว็บ

3. JavaScript : ใช้ในการพัฒนาเกมและควบคุมการทำงานของเกม การโต้ตอบกับผู้เล่น

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

1.พัฒนาเกมหลบวัตถุสำเร็จ

2.สามารถแก้ไขปัญหาที่เกิดในระหว่างการสร้างเกมได้

3.หน้าเว็บมีความเสถียรและสามารถตอบสนองได้ดี

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

1.เกมมีความเสถียร สามารถตอบสนองกับผู้เล่นได้ดี

2.เกมสามารถเล่นได้อย่างลื่นไหลไม่สะดุดบน Google Chrome และ Microsoft Edge

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

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

9.เอกสารอ้างอิง

1.HTML (Hyper Text Markup Language) จาก : https://searchstudio.co.th/th/seo/what-is-html/

2.JavaScript จาก : https://developer.mozilla.org/en-US/docs/Web/JavaScript

3.CSS (Cascading Style Sheets) จาก : https://www.w3schools.com/html/html_css.asp

10.วีดีโอแนะนำเกมและโปรแกรม

โปรแกรม

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>เกมหลบวัตถุ</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        #gameArea {
            width: 300px;
            height: 500px;
            border: 2px solid #333;
            position: relative;
            background-color: #ddd;
            overflow: hidden;
        }
        #player {
            width: 30px;
            height: 30px;
            background-color: #f973fb;
            position: absolute;
            bottom: 0;
            left: 135px;
        }
        .obstacle {
            width: 30px;
            height: 30px;
            background-color: #333;
            position: absolute;
            top: 0;
        }
        #score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 18px;
            font-weight: bold;
        }
        #playAgain {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10px 20px;
            font-size: 18px;
            background-color: #ff6347;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="gameArea">
        <div id="score">Score: 0</div>
        <div id="player"></div>
        <button id="playAgain" onclick="restartGame()">Play Again</button>
    </div>

    <script>
        const gameArea = document.getElementById('gameArea');
        const player = document.getElementById('player');
        const scoreDisplay = document.getElementById('score');
        const playAgainButton = document.getElementById('playAgain');
        let playerPos = 135;
        let score = 0;
        const gameWidth = gameArea.clientWidth;
        const playerWidth = player.clientWidth;
        let gameInterval;

        document.addEventListener('keydown', (event) => {
            if (event.key === 'ArrowLeft' && playerPos > 0) {
                playerPos -= 15;
                player.style.left = playerPos + 'px';
            } else if (event.key === 'ArrowRight' && playerPos < gameWidth - playerWidth) {
                playerPos += 15;
                player.style.left = playerPos + 'px';
            }
        });

        function createObstacle() {
            const obstacle = document.createElement('div');
            obstacle.classList.add('obstacle');
            obstacle.style.left = Math.floor(Math.random() * (gameWidth - 30)) + 'px';
            gameArea.appendChild(obstacle);
            let obstaclePos = 0;

            const fallInterval = setInterval(() => {
                if (obstaclePos >= gameArea.clientHeight - 30) {
                    clearInterval(fallInterval);
                    gameArea.removeChild(obstacle);
                    updateScore();
                } else if (obstaclePos >= gameArea.clientHeight - 60 &&
                           playerPos <= parseInt(obstacle.style.left) + 30 &&
                           playerPos + 30 >= parseInt(obstacle.style.left)) {
                    endGame();
                    clearInterval(fallInterval);
                } else {
                    obstaclePos += 5;
                    obstacle.style.top = obstaclePos + 'px';
                }
            }, 20);
        }

        function updateScore() {
            score += 1;
            scoreDisplay.textContent = `Score: ${score}`;
        }

        function endGame() {
            clearInterval(gameInterval);
            playAgainButton.style.display = 'block';
        }

        function restartGame() {
            score = 0;
            scoreDisplay.textContent = `Score: ${score}`;
            playAgainButton.style.display = 'none';
            playerPos = 135;
            player.style.left = playerPos + 'px';

            const obstacles = document.querySelectorAll('.obstacle');
            obstacles.forEach(obstacle => obstacle.remove());

            gameInterval = setInterval(createObstacle, 1000);
        }

        gameInterval = setInterval(createObstacle, 1000);
    </script>
</body>
</html>

Tags:

You may also like...

ใส่ความเห็น

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