贪吃蛇的编程代码

贪吃蛇是一款经典的电子游戏，其基本规则是玩家控制一条蛇不断吃掉出现在屏幕上的食物，每吃掉一个食物，蛇的长度就会增加，同时蛇的速度会加快。如果蛇撞到自己的身体或屏幕边缘，游戏结束。以下是使用JavaScript和HTML5 Canvas API实现一个简单贪吃蛇游戏的示例代码。

HTML结构

首先，我们需要一个HTML页面作为游戏的容器，并在其中包含一个canvas元素，用于绘制贪吃蛇游戏。

JavaScript逻辑

接下来是游戏的JavaScript逻辑，我们将创建一个名为snake.js的文件，并在其中编写贪吃蛇的代码。

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

let speed = 7;
let tileCount = 20;
let tileSize = canvas.width / tileCount;
let snake = [
    { x: 10, y: 10 },
    { x: 9, y: 10 },
    { x: 8, y: 10 }
];
let food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
let direction = { x: 0, y: 1 };

function drawGame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    drawSnake();
    drawFood();
    checkFood();
    updateSnake();
    checkCollision();
    setTimeout(drawGame, 1000 / speed);
}

function drawSnake() {
    for (let i = 0; i < snake.length; i  ) {
        let tileX = snake[i].x * tileSize;
        let tileY = snake[i].y * tileSize;
        ctx.fillStyle = (i === 0) ? 'green' : 'white';
        ctx.fillRect(tileX, tileY, tileSize, tileSize);
    }
}

function drawFood() {
    let tileX = food.x * tileSize;
    let tileY = food.y * tileSize;
    ctx.fillStyle = 'red';
    ctx.fillRect(tileX, tileY, tileSize, tileSize);
}

function updateSnake() {
    let head = { x: snake[0].x   direction.x, y: snake[0].y   direction.y };
    
    // 确保蛇头不会移出边界
    if (head.x < 0) head.x = tileCount;
    if (head.x >= tileCount) head.x = 0;
    if (head.y < 0) head.y = tileCount;
    if (head.y >= tileCount) head.y = 0;

    snake.unshift(head); // 添加蛇头
    snake.pop(); // 删除蛇尾
}

function checkFood() {
    if (snake[0].x === food.x