JS贪吃蛇怎么行走

在JavaScript中实现贪吃蛇游戏的行走主要通过以下几个步骤：定义游戏画布、初始化蛇、处理用户输入、更新蛇的位置、检测碰撞、更新游戏状态。其中，处理用户输入是关键，它决定了蛇的行走方向。下面详细解释这一点。

在处理用户输入时，你需要监听键盘事件，获取用户按下的键，并根据按键的方向来更新蛇的行走方向。例如，通过监听上下左右箭头键来改变蛇的行走方向。每次蛇移动时，更新蛇的位置并重新绘制画布。

一、定义游戏画布

贪吃蛇游戏需要一个画布来显示蛇和食物。我们可以使用HTML5的 <canvas> 元素来创建这个画布，并利用JavaScript中的Canvas API进行绘制。

<!DOCTYPE html>
<html>
<head>
    <title>贪吃蛇游戏</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script src="snake.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个400×400像素的画布，并且在页面加载时引入了 snake.js 文件来控制游戏逻辑。

二、初始化蛇

蛇可以用一个数组来表示，其中每个元素代表蛇身体的一个部分。我们初始化一个由三个部分组成的蛇，起始位置在画布的中心。

let canvas = document.getElementById("gameCanvas");
let ctx = canvas.getContext("2d");
let snake = [
    { x: 200, y: 200 },
    { x: 190, y: 200 },
    { x: 180, y: 200 }
];
let dx = 10;
let dy = 0;

在上面的代码中，snake 数组表示蛇的身体，初始时蛇有三个部分，每个部分的大小为10×10像素。dx 和 dy 分别表示蛇在x轴和y轴上的移动增量。

三、处理用户输入

我们需要监听用户的键盘事件来改变蛇的方向。当用户按下上下左右箭头键时，我们更新 dx 和 dy 的值。

document.addEventListener("keydown", changeDirection);
function changeDirection(event) {
    const LEFT_KEY = 37;
    const RIGHT_KEY = 39;
    const UP_KEY = 38;
    const DOWN_KEY = 40;
    const keyPressed = event.keyCode;
    const goingUp = dy === -10;
    const goingDown = dy === 10;
    const goingRight = dx === 10;
    const goingLeft = dx === -10;
    if (keyPressed === LEFT_KEY && !goingRight) {
        dx = -10;
        dy = 0;
    }
    if (keyPressed === UP_KEY && !goingDown) {
        dx = 0;
        dy = -10;
    }
    if (keyPressed === RIGHT_KEY && !goingLeft) {
        dx = 10;
        dy = 0;
    }
    if (keyPressed === DOWN_KEY && !goingUp) {
        dx = 0;
        dy = 10;
    }
}

在上面的代码中，我们通过 addEventListener 监听 keydown 事件，并在 changeDirection 函数中根据按键来更新 dx 和 dy 的值。

四、更新蛇的位置

我们需要一个循环来不断更新蛇的位置，并重新绘制画布。每次循环时，我们根据 dx 和 dy 的值来更新蛇的头部位置，然后将蛇的头部添加到蛇的数组中，并移除蛇的尾部。

function moveSnake() {
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };
    snake.unshift(head);
    snake.pop();
}
function drawSnake() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    snake.forEach(drawSnakePart);
}
function drawSnakePart(snakePart) {
    ctx.fillStyle = "lightgreen";
    ctx.strokeStyle = "darkgreen";
    ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
    ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
function main() {
    setTimeout(function onTick() {
        moveSnake();
        drawSnake();
        main();
    }, 100);
}
main();

在上面的代码中，moveSnake 函数更新蛇的位置，drawSnake 函数重新绘制画布，main 函数通过 setTimeout 来创建一个循环。

五、检测碰撞

我们需要检测蛇是否碰到了墙壁或自身。如果发生碰撞，游戏结束。

function didGameEnd() {
    for (let i = 4; i < snake.length; i++) {
        if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
    }
    const hitLeftWall = snake[0].x < 0;
    const hitRightWall = snake[0].x > canvas.width - 10;
    const hitTopWall = snake[0].y < 0;
    const hitBottomWall = snake[0].y > canvas.height - 10;
    return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
}
function main() {
    if (didGameEnd()) return;
    setTimeout(function onTick() {
        moveSnake();
        drawSnake();
        main();
    }, 100);
}

在上面的代码中，didGameEnd 函数检测蛇是否碰到了墙壁或自身，如果发生碰撞，游戏结束。

六、更新游戏状态

我们可以通过增加食物和得分来增加游戏的趣味性。当蛇吃到食物时，我们需要增加蛇的长度并更新得分。

let foodX;
let foodY;
function createFood() {
    foodX = Math.round((Math.random() * (canvas.width - 10)) / 10) * 10;
    foodY = Math.round((Math.random() * (canvas.height - 10)) / 10) * 10;
    snake.forEach(function isFoodOnSnake(part) {
        const foodIsOnSnake = part.x === foodX && part.y === foodY;
        if (foodIsOnSnake) createFood();
    });
}
function drawFood() {
    ctx.fillStyle = "red";
    ctx.strokeStyle = "darkred";
    ctx.fillRect(foodX, foodY, 10, 10);
    ctx.strokeRect(foodX, foodY, 10, 10);
}
function moveSnake() {
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };
    snake.unshift(head);
    const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
    if (didEatFood) {
        createFood();
    } else {
        snake.pop();
    }
}
function main() {
    if (didGameEnd()) return;
    setTimeout(function onTick() {
        moveSnake();
        drawSnake();
        drawFood();
        main();
    }, 100);
}
createFood();
main();

在上面的代码中，createFood 函数生成随机位置的食物，drawFood 函数绘制食物，moveSnake 函数检查蛇是否吃到了食物。如果蛇吃到了食物，我们会增加蛇的长度并生成新的食物。

通过以上步骤，你可以实现一个简单的JavaScript贪吃蛇游戏。你可以根据需要进一步扩展功能，例如增加难度、保存最高得分等。为了有效管理和协作开发项目，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，这些系统可以帮助团队更好地规划和执行开发任务，提高工作效率。