贪吃蛇网页小游戏代码（手机也可玩）及运行效果

程序员小小蛙

于 2025-02-12 15:10:15 发布

阅读量526

点赞数 6

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2301_78547942/article/details/145592480

版权

网页版贪吃蛇小游戏（手机也可玩），具备以下功能：

1. 界面布局：有得分显示、难度选择下拉框、游戏棋盘、控制按钮和重新开始按钮。

2. 游戏玩法：蛇初始在棋盘中央，默认向右移动。玩家可通过键盘方向键或控制按钮改变蛇的移动方向，蛇吃到食物会增长并得分，撞到边界或自己则游戏结束。

3. 难度选择：玩家能从下拉框中选择简单、中等、困难三种难度，对应不同的蛇移动间隔时间。

4. 重新开始：点击“重新开始”按钮，可重置蛇的位置、得分等参数，开启新游戏。

下面是代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>贪吃蛇小游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        #game-board {
            display: grid;
            grid-template-columns: repeat(20, minmax(15px, 20px));
            grid-template-rows: repeat(20, minmax(15px, 20px));
            gap: 1px;
            background-color: #333;
            margin-bottom: 20px;
        }

        .snake {
            background-color: #0f0;
        }

        .food {
            background-color: #f00;
        }

        #control-buttons {
            display: grid;
            grid-template-columns: repeat(3, 50px);
            grid-template-rows: repeat(3, 50px);
            gap: 5px;
            margin-bottom: 20px;
        }

        #control-buttons button {
            font-size: 20px;
        }

        #score-board {
            font-size: 24px;
            margin-bottom: 10px;
        }

        #difficulty-select {
            font-size: 18px;
            margin-bottom: 20px;
        }

        #restart-button {
            font-size: 18px;
            padding: 10px 20px;
        }
    </style>
</head>

<body>
    <div id="score-board">得分: 0</div>
    <select id="difficulty-select">
        <option value="200">简单</option>
        <option value="150">中等</option>
        <option value="100">困难</option>
    </select>
    <div id="game-board"></div>
    <div id="control-buttons">
        <button id="empty-top-left"></button>
        <button id="up-button">↑</button>
        <button id="empty-top-right"></button>
        <button id="left-button">←</button>
        <button id="empty-center"></button>
        <button id="right-button">→</button>
        <button id="empty-bottom-left"></button>
        <button id="down-button">↓</button>
        <button id="empty-bottom-right"></button>
    </div>
    <button id="restart-button">重新开始</button>
    <script>
        const gameBoard = document.getElementById('game-board');
        const scoreBoard = document.getElementById('score-board');
        const difficultySelect = document.getElementById('difficulty-select');
        const restartButton = document.getElementById('restart-button');
        const boardSize = 20;
        let snake = [{ x: 10, y: 10 }];
        let food = getRandomFoodPosition();
        let direction = 'right';
        let gameInterval;
        let score = 0;

        function createCell(x, y, className) {
            const cell = document.createElement('div');
            cell.style.gridColumn = x + 1;
            cell.style.gridRow = y + 1;
            cell.classList.add(className);
            gameBoard.appendChild(cell);
        }

        function drawSnake() {
            gameBoard.innerHTML = '';
            snake.forEach(segment => {
                createCell(segment.x, segment.y, 'snake');
            });
            createCell(food.x, food.y, 'food');
        }

        function getRandomFoodPosition() {
            return {
                x: Math.floor(Math.random() * boardSize),
                y: Math.floor(Math.random() * boardSize)
            };
        }

        function moveSnake() {
            const head = { ...snake[0] };
            switch (direction) {
                case 'up':
                    head.y--;
                    break;
                case 'down':
                    head.y++;
                    break;
                case 'left':
                    head.x--;
                    break;
                case 'right':
                    head.x++;
                    break;
            }

            if (head.x < 0 || head.x >= boardSize || head.y < 0 || head.y >= boardSize) {
                clearInterval(gameInterval);
                alert(`游戏结束！最终得分: ${score}`);
                return;
            }

            if (head.x === food.x && head.y === food.y) {
                food = getRandomFoodPosition();
                score++;
                scoreBoard.textContent = `得分: ${score}`;
            } else {
                snake.pop();
            }

            if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
                clearInterval(gameInterval);
                alert(`游戏结束！最终得分: ${score}`);
                return;
            }

            snake.unshift(head);
            drawSnake();
        }

        document.addEventListener('keydown', function (event) {
            switch (event.key) {
                case 'ArrowUp':
                    if (direction!== 'down') direction = 'up';
                    break;
                case 'ArrowDown':
                    if (direction!== 'up') direction = 'down';
                    break;
                case 'ArrowLeft':
                    if (direction!== 'right') direction = 'left';
                    break;
                case 'ArrowRight':
                    if (direction!== 'left') direction = 'right';
                    break;
            }
        });

        const upButton = document.getElementById('up-button');
        const leftButton = document.getElementById('left-button');
        const downButton = document.getElementById('down-button');
        const rightButton = document.getElementById('right-button');

        upButton.addEventListener('click', function () {
            if (direction!== 'down') direction = 'up';
        });

        leftButton.addEventListener('click', function () {
            if (direction!== 'right') direction = 'left';
        });

        downButton.addEventListener('click', function () {
            if (direction!== 'up') direction = 'down';
        });

        rightButton.addEventListener('click', function () {
            if (direction!== 'left') direction = 'right';
        });

        difficultySelect.addEventListener('change', function () {
            clearInterval(gameInterval);
            startGame();
        });

        restartButton.addEventListener('click', function () {
            clearInterval(gameInterval);
            snake = [{ x: 10, y: 10 }];
            food = getRandomFoodPosition();
            direction = 'right';
            score = 0;
            scoreBoard.textContent = `得分: 0`;
            startGame();
        });

        function startGame() {
            const difficulty = parseInt(difficultySelect.value);
            drawSnake();
            gameInterval = setInterval(moveSnake, difficulty);
        }

        startGame();
    </script>
</body>

</html>

运行结果：