怎么用原生js做一个贪吃蛇游戏

要用原生JS做一个贪吃蛇游戏，可以通过以下几个步骤：创建游戏画布、定义蛇的属性、实现蛇的移动、处理吃食物的逻辑、添加游戏结束条件。 在本文中，我将详细介绍如何完成这些步骤，并分享一些个人经验和见解。

一、创建游戏画布

为了创建一个贪吃蛇游戏，首先需要一个游戏画布。使用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 {
            display: block;
            margin: auto;
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script src="snake.js"></script>
</body>
</html>

在这段代码中，我们创建了一个400×400像素的画布，并设置了背景颜色。接下来，我们将在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 direction = 'RIGHT'; // 初始方向
let food = {
    x: Math.floor(Math.random() * 19 + 1) * box,
    y: Math.floor(Math.random() * 19 + 1) * box
};

三、实现蛇的移动

接下来，我们需要编写函数来绘制蛇，并处理蛇的移动逻辑：

document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
    if (event.keyCode === 37 && direction !== 'RIGHT') direction = 'LEFT';
    else if (event.keyCode === 38 && direction !== 'DOWN') direction = 'UP';
    else if (event.keyCode === 39 && direction !== 'LEFT') direction = 'RIGHT';
    else if (event.keyCode === 40 && direction !== 'UP') direction = 'DOWN';
}
function draw() {
    ctx.clearRect(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);
    }
    let snakeX = snake[0].x;
    let snakeY = snake[0].y;
    if (direction === 'LEFT') snakeX -= box;
    if (direction === 'UP') snakeY -= box;
    if (direction === 'RIGHT') snakeX += box;
    if (direction === '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 };
    snake.unshift(newHead);
}
let game = setInterval(draw, 100);

四、处理吃食物的逻辑

当蛇的头部碰到食物时，我们需要增加蛇的长度，并随机生成新的食物位置：

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();
}

五、添加游戏结束条件

为了检测游戏是否结束，我们需要检查蛇是否碰到自己或墙壁：

function collision(newHead, array) {
    for (let i = 0; i < array.length; i++) {
        if (newHead.x === array[i].x && newHead.y === array[i].y) {
            return true;
        }
    }
    return false;
}
function draw() {
    // 其他代码...
    if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
        clearInterval(game);
    }
    snake.unshift(newHead);
}

通过上述步骤，我们已经完成了一个基本的贪吃蛇游戏。以下是一些优化和改进的建议：

六、优化和改进建议

1、添加分数显示

我们可以添加一个分数显示功能，每次吃到食物时增加分数，并在画布上显示：

let score = 0;
function draw() {
    // 其他代码...
    if (snakeX === food.x && snakeY === food.y) {
        score++;
        food = {
            x: Math.floor(Math.random() * 19 + 1) * box,
            y: Math.floor(Math.random() * 19 + 1) * box
        };
    } else {
        snake.pop();
    }
    ctx.fillStyle = 'white';
    ctx.font = '45px Changa one';
    ctx.fillText(score, 2 * box, 1.6 * box);
    // 其他代码...
}

2、优化移动逻辑

在移动逻辑中，我们可以通过增加方向队列，避免连续快速按键导致方向错误的问题：

let directionQueue = [];
document.addEventListener('keydown', function(event) {
    let newDirection = null;
    if (event.keyCode === 37 && direction !== 'RIGHT') newDirection = 'LEFT';
    else if (event.keyCode === 38 && direction !== 'DOWN') newDirection = 'UP';
    else if (event.keyCode === 39 && direction !== 'LEFT') newDirection = 'RIGHT';
    else if (event.keyCode === 40 && direction !== 'UP') newDirection = 'DOWN';
    if (newDirection) {
        directionQueue.push(newDirection);
    }
});
function draw() {
    // 其他代码...
    if (directionQueue.length) {
        direction = directionQueue.shift();
    }
    // 其他代码...
}

3、实现不同难度级别

通过调整蛇的移动速度，我们可以实现不同的难度级别：

let speed = 100;
function setDifficulty(level) {
    if (level === 'easy') speed = 150;
    if (level === 'medium') speed = 100;
    if (level === 'hard') speed = 50;
}
let game = setInterval(draw, speed);

4、使用项目团队管理系统

在开发和管理这样的游戏项目时，使用项目团队管理系统可以提高效率。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来进行任务分配、进度跟踪和团队协作。

通过上述步骤和优化建议，你可以用原生JS创建一个功能完善的贪吃蛇游戏。希望这些内容能帮助你更好地理解和实现这个经典游戏。