贪吃蛇用js怎么写

贪吃蛇游戏的实现涉及多个关键步骤：初始化游戏、绘制游戏元素、处理用户输入、更新游戏状态以及检测碰撞。 在这篇文章中，我们将详细介绍如何用JavaScript从零开始编写一个贪吃蛇游戏。以下是具体的实现步骤：

一、初始化游戏

在开始编写贪吃蛇游戏之前，我们需要创建一个基本的HTML结构，并初始化一些必要的游戏变量。我们需要一个画布（canvas）来绘制游戏界面，一个数组来存储蛇的每个部分的位置，以及一个变量来存储食物的位置。

<!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>
    <style>
        canvas {
            background: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script src="snake.js"></script>
</body>
</html>

在上面的HTML文件中，我们创建了一个画布元素，并引用了一个名为snake.js的JavaScript文件。在这个JavaScript文件中，我们将实现游戏逻辑。

二、绘制游戏元素

在snake.js文件中，我们首先要获取画布的上下文，并初始化蛇和食物的位置。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const box = 20;
let snake = [];
snake[0] = { x: 9 * box, y: 10 * box };
let food = {
    x: Math.floor(Math.random() * 19 + 1) * box,
    y: Math.floor(Math.random() * 19 + 1) * box
};

三、处理用户输入

为了让玩家控制蛇的移动方向，我们需要监听键盘事件，并根据按下的键来改变蛇的方向。

let d;
document.addEventListener('keydown', direction);
function direction(event) {
    if (event.keyCode == 37 && d != 'RIGHT') {
        d = 'LEFT';
    } else if (event.keyCode == 38 && d != 'DOWN') {
        d = 'UP';
    } else if (event.keyCode == 39 && d != 'LEFT') {
        d = 'RIGHT';
    } else if (event.keyCode == 40 && d != 'UP') {
        d = 'DOWN';
    }
}

四、更新游戏状态

接下来，我们需要编写一个函数来更新蛇的位置，并检测蛇是否吃到了食物或者撞到了自己或墙壁。

function draw() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = (i == 0) ? 'green' : 'white';
        ctx.fillRect(snake[i].x, snake[i].y, box, box);
        ctx.strokeStyle = 'red';
        ctx.strokeRect(snake[i].x, snake[i].y, box, box);
    }
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x, food.y, box, box);
    let snakeX = snake[0].x;
    let snakeY = snake[0].y;
    if (d == 'LEFT') snakeX -= box;
    if (d == 'UP') snakeY -= box;
    if (d == 'RIGHT') snakeX += box;
    if (d == 'DOWN') snakeY += box;
    if (snakeX == food.x && snakeY == food.y) {
        food = {
            x: Math.floor(Math.random() * 19 + 1) * box,
            y: Math.floor(Math.random() * 19 + 1) * box
        };
    } else {
        snake.pop();
    }
    let newHead = {
        x: snakeX,
        y: snakeY
    };
    if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
        clearInterval(game);
    }
    snake.unshift(newHead);
}
function collision(head, array) {
    for (let i = 0; i < array.length; i++) {
        if (head.x == array[i].x && head.y == array[i].y) {
            return true;
        }
    }
    return false;
}
let game = setInterval(draw, 100);

五、检测碰撞

我们需要一个函数来检测蛇是否撞到了自己或墙壁。如果蛇撞到了墙壁，游戏将结束；如果蛇撞到了自己，游戏也将结束。

function collision(head, array) {
    for (let i = 0; i < array.length; i++) {
        if (head.x == array[i].x && head.y == array[i].y) {
            return true;
        }
    }
    return false;
}

六、总结

通过上述步骤，我们已经实现了一个简单的贪吃蛇游戏。我们使用HTML5的Canvas来绘制游戏界面，使用JavaScript来处理游戏逻辑，包括初始化游戏、绘制游戏元素、处理用户输入、更新游戏状态以及检测碰撞。虽然这个游戏很简单，但它涵盖了许多基本的游戏开发概念。

在实际开发中，我们可以进一步优化和扩展这个游戏，比如添加更多的游戏元素、更复杂的碰撞检测机制，以及更加丰富的用户交互体验。希望这篇文章能帮助你理解如何用JavaScript编写一个简单的贪吃蛇游戏，并为你今后的游戏开发工作提供一些参考和启发。

推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来管理你的项目团队和任务。这些工具可以帮助你更好地组织和协调项目工作，提高团队的效率和生产力。