贪吃蛇游戏Canvas更新后背景异常变红问题求助

你的问题出在update函数里的拼写错误：将fillStyle写成了filStyle（少了一个字母l），导致背景颜色没有被正确设置为黑色，后续绘制逻辑延续了错误的样式，最终让整个背景变成红色。

错误代码片段： #

function update() {
    context.filStyle="black"; // 此处拼写错误
    context.fillRect(0, 0, board.width, board.height);
    // ... 其他代码
}

修复后的update函数： #

function update() {
    context.fillStyle="black"; // 修正拼写错误
    context.fillRect(0, 0, board.width, board.height);

    context.fillStyle="lime";
    snakeX += velocityX * blockSize;
    snakeY += velocityY * blockSize;
    context.fillRect(snakeX, snakeY, blockSize, blockSize);

    context.fillStyle="red";
    context.fillRect(foodX, foodY, blockSize, blockSize);
}

额外优化建议： #

• 初始状态下velocityX和velocityY均为0，蛇不会主动移动，你可以默认设置一个初始方向（比如velocityX = 1），让游戏一开始就能运行。
• 在window.onload中手动调用一次update()，页面加载后会立刻显示初始画面，无需等待定时器第一次触发：

window.onload = function() {
    board = document.getElementById("board");
    board.height = rows * blockSize;
    board.width = cols * blockSize;
    context = board.getContext("2d");

    placeFood();
    document.addEventListener("keyup", changeDirection);
    setInterval(update, 1000/10);
    update(); // 新增该行代码
}

内容的提问来源于stack exchange，提问作者Chili