如何通过 canvas 绘制一条属于自己的贪吃蛇

通过Canvas绘制一条属于自己的贪吃蛇主要包括以下几个步骤：设置画布、初始化蛇身、编写控制蛇移动的逻辑、实现食物的随机生成和蛇的吃食行为、检测游戏结束条件。其中，编写控制蛇移动的逻辑是核心部分，需要详细描述。这涉及到蛇身体的数据结构表示，以及如何通过键盘事件改变蛇头的方向，并确保蛇身跟随蛇头移动。

一、设置画布

首先，我们需要在HTML中创建一个<canvas>标签，并通过JavaScript获取这个标签的引用。canvas元素为我们提供了一个丰富的绘图API，我们将利用这个API绘制贪吃蛇的蛇身和食物。

<canvas id="snakeGame" width="400" height="400"></canvas>

在JavaScript中，我们先获取canvas元素，然后获得其上下文(context)，之后所有的绘制操作都将基于这个上下文进行。

const canvas = document.getElementById('snakeGame');
const ctx = canvas.getContext('2d');

二、初始化蛇身

贪吃蛇的蛇身可以表示为一个方块的数组，每个方块代表蛇身的一个部分。初始化时，蛇身可以只有一个或几个方块长。同时，我们需要设定蛇身的大小、颜色和初始移动方向。

let snake = [{ x: 200, y: 200 }];
const snakeSize = 20; // 蛇身每个方块的大小
const snakeColor = 'green'; // 蛇身的颜色
let direction = 'right'; // 初始移动方向

绘制蛇身的函数遍历蛇身数组snake，并在canvas上绘制出每个部分。

function drawSnake() {
    ctx.fillStyle = snakeColor;
    snake.forEach(part => {
        ctx.fillRect(part.x, part.y, snakeSize, snakeSize);
    });
}

三、控制蛇移动的逻辑

控制贪吃蛇移动是本项目的核心部分。我们需要监听键盘事件，根据上下左右箭头键改变蛇的移动方向。随着时间的推移，蛇头需要根据当前的方向移动，同时蛇身的每个部分也要跟随蛇头前进。重要的是，蛇身的移动实际上是蛇头的新位置加入到蛇身数组的头部，而数组尾部的元素被移除，从而实现了蛇身的“移动”。

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 moveSnake() {
    let head = { x: snake[0].x, y: snake[0].y };
    switch(direction) {
        case 'right':
            head.x += snakeSize;
            break;
        case 'left':
            head.x -= snakeSize;
            break;
        case 'up':
            head.y -= snakeSize;
            break;
        case 'down':
            head.y += snakeSize;
            break;
    }
    snake.unshift(head);
    snake.pop(); // 移除数组的最后一个元素，模拟蛇的移动
}

四、实现食物的随机生成和蛇的吃食行为

贪吃蛇游戏中的食物需要随机出现在画布上，而当蛇头碰到食物的位置时，蛇需要吃掉食物并且身体变长。我们可以通过在画布上随机生成一个点作为食物的位置，当蛇头的坐标与食物坐标重叠时，将食物移动到新的位置，并让蛇身增长一个单位。

let food = { x: randomPosition(), y: randomPosition() };
const foodColor = 'red';
function drawFood() {
    ctx.fillStyle = foodColor;
    ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
}
function randomPosition() {
    return Math.floor(Math.random() * canvas.width / snakeSize) * snakeSize;
}
function eatFood() {
    if (snake[0].x === food.x && snake[0].y === food.y) {
        food = { x: randomPosition(), y: randomPosition() };
        snake.push({ x: snake[snake.length-1].x, y: snake[snake.length-1].y });
    }
}

五、检测游戏结束条件

游戏的结束条件主要有两个：一是蛇撞到墙壁，即蛇头的坐标超出了canvas的边界；二是蛇撞到了自己的身体，即蛇头的坐标与蛇身数组中任一部分的坐标重叠。检测这些条件，并在条件满足时结束游戏。

function checkGameOver() {
    // 检测撞墙
    if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {
        return true;
    }
    // 检测撞到自己
    for (let i = 4; i < snake.length; i++) {
        if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
            return true;
        }
    }
    return false;
}

六、游戏循环

整个贪吃蛇游戏的逻辑可以放在一个游戏循环中。这个循环负责清除画布、绘制蛇身和食物、移动蛇身、吃食物以及检测游戏结束。使用requestAnimationFrame来实现这个循环。

function gameLoop() {
    if (checkGameOver()) {
        alert("Game Over!");
        window.location.reload(); // 重载页面来重启游戏
    } else {
        setTimeout(() => {
            clearCanvas();
            drawFood();
            moveSnake();
            eatFood();
            drawSnake();
            requestAnimationFrame(gameLoop);
        }, 100);
    }
}
function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}
gameLoop(); // 启动游戏循环