原生JavaScript实现贪吃蛇游戏

更新日期: 2024-04-23阅读: 4.1k标签: 游戏分享

复制链接

新浪微博

QQ 好友

扫一扫分享

创建JavaScript贪吃蛇游戏需要使用 html 制作结构，使用 css 制作样式，使用 JavaScript 制作游戏逻辑。下面是一个简单的贪吃蛇游戏示例：

HTML (index.html):

<!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>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="game-board"></div>
    <script src="script.js"></script>
</body>
</html>

CSS (style.css):

#game-board {
    display: grid;
    grid-template-columns: repeat(20, 20px);
    grid-template-rows: repeat(20, 20px);
}
.snake, .food {
    width: 20px;
    height: 20px;
}
.snake {
    background-color: green;
}
.food {
    background-color: red;
}

JavaScript (script.js):

document.addEventListener('domContentLoaded', () => {
    const board = document.getElementById('game-board');
    const gridSize = 20;
    let snake = [{ x: 10, y: 10 }];
    let food = getRandomPosition();

    function draw() {
        board.innerHTML = '';
        drawSnake();
        drawFood();
    }

    function drawSnake() {
        snake.forEach(segment => {
            const snakeElement = createGameElement('div', 'snake');
            snakeElement.style.gridRowStart = segment.y;
            snakeElement.style.gridColumnStart = segment.x;
            board.appendChild(snakeElement);
        });
    }

    function drawFood() {
        const foodElement = createGameElement('div', 'food');
        foodElement.style.gridRowStart = food.y;
        foodElement.style.gridColumnStart = food.x;
        board.appendChild(foodElement);
    }

    function createGameElement(tagName, className) {
        const element = document.createElement(tagName);
        element.className = className;
        return element;
    }

    function getRandomPosition() {
        return {
            x: Math.floor(Math.random() * gridSize) + 1,
            y: Math.floor(Math.random() * gridSize) + 1
        };
    }

    function move() {
        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 === food.x && head.y === food.y) {
            snake.push({});
            food = getRandomPosition();
        }

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

    function checkCollision() {
        const head = snake[0];
        return (
            head.x < 1 || head.x > gridSize ||
            head.y < 1 || head.y > gridSize ||
            snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
        );
    }

    let direction = 'RIGHT';

    window.addEventListener('keydown', event => {
        switch (event.key) {
            case 'ArrowUp':
                direction = 'UP';
                break;
            case 'ArrowDown':
                direction = 'DOWN';
                break;
            case 'ArrowLeft':
                direction = 'LEFT';
                break;
            case 'ArrowRight':
                direction = 'RIGHT';
                break;
        }
    });

    function gameLoop() {
        move();
        if (checkCollision()) {
            alert('Game Over!');
            snake = [{ x: 10, y: 10 }];
            direction = 'RIGHT';
        }
        draw();
    }

    setInterval(gameLoop, 200);
});

这只是一个基本的实现方法，您还可以通过添加分数跟踪、增加难度或添加音效等功能来进一步增强它。

链接: https://fly63.com/article/detial/12710

原生JavaScript实现贪吃蛇游戏

如何使用SVG动画来制作游戏

web游戏框架有哪些？_h5游戏开发引擎推荐

three.js中物体旋转实践之房门的打开与关闭

js实现贪吃蛇小游戏

JS实现贪吃蛇

JS实现俄罗斯方块

HTML5+Js实现拼图小游戏

html5游戏引擎有哪些？如何选择