HTML5 Canvas中Snake与Food方块碰撞检测失效问题排查

问题根源 #

你的碰撞检测逻辑本身是正确的（轴对齐矩形碰撞检测的标准实现），但存在两个关键问题：

• 碰撞检测仅执行一次：页面加载完成后调用了一次collision()，之后不管蛇移动、食物刷新，都不会再触发检测，自然无法捕捉到后续的碰撞事件。
• 画布变量未定义：canvasWidth和canvasHeight没有在代码中声明，会导致食物位置计算出错，甚至可能超出画布范围。

修复方案 #

1. 补全画布基础配置 #

首先要确保canvas元素、上下文ctx以及画布尺寸变量正确定义：

// 获取画布元素和上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 定义画布尺寸
const canvasWidth = canvas.width = 800;
const canvasHeight = canvas.height = 800;

2. 实现动画循环，重复执行碰撞检测 #

游戏类应用需要通过requestAnimationFrame创建动画循环，在每帧里执行绘制、更新和碰撞检测：

class Snake {
    constructor() {
        this.x = 400;
        this.y = 400;
        this.width = 25;
        this.height = 25;
        // 添加移动速度与方向参数
        this.speed = 5;
        this.dx = 0;
        this.dy = 0;
    }
    
    update() {
        // 更新蛇的位置
        this.x += this.dx;
        this.y += this.dy;
        // 边界限制，防止蛇出界
        this.x = Math.max(0, Math.min(canvasWidth - this.width, this.x));
        this.y = Math.max(0, Math.min(canvasHeight - this.height, this.y));
    }
    
    draw() {
        ctx.fillStyle = '#00ff00';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

class Food {
    constructor() {
        this.width = 50;
        this.height = 50;
        // 初始化时生成随机位置
        this.resetPosition();
    }
    
    resetPosition() {
        // 确保食物不会超出画布，减去自身尺寸
        this.x = Math.floor(Math.random() * (canvasWidth - this.width));
        this.y = Math.floor(Math.random() * (canvasHeight - this.height));
    }
    
    draw() {
        ctx.fillStyle = '#ff0000';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

const snake = new Snake();
const food = new Food();

// 键盘控制蛇移动
document.addEventListener('keydown', (e) => {
    switch(e.key) {
        case 'ArrowUp':
            snake.dy = -snake.speed;
            snake.dx = 0;
            break;
        case 'ArrowDown':
            snake.dy = snake.speed;
            snake.dx = 0;
            break;
        case 'ArrowLeft':
            snake.dx = -snake.speed;
            snake.dy = 0;
            break;
        case 'ArrowRight':
            snake.dx = snake.speed;
            snake.dy = 0;
            break;
    }
});

function collision() {
    // 标准轴对齐矩形碰撞检测逻辑
    if (snake.x < food.x + food.width &&
        snake.x + snake.width > food.x &&
        snake.y < food.y + food.height &&
        snake.y + snake.height > food.y) {
            alert("hit");
            // 碰撞后刷新食物位置
            food.resetPosition();
        }
}

// 动画循环
function gameLoop() {
    // 清空画布
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    
    // 更新蛇的状态
    snake.update();
    // 执行碰撞检测
    collision();
    // 绘制元素
    snake.draw();
    food.draw();
    
    // 请求下一帧，持续循环
    requestAnimationFrame(gameLoop);
}

// 启动游戏循环
gameLoop();

关键修复点说明 #

• 动画循环：通过requestAnimationFrame持续调用gameLoop，每帧都执行更新、碰撞检测和绘制操作，确保碰撞能被实时捕捉。
• 蛇的移动逻辑：添加方向控制和位置更新，让蛇可以移动，创造碰撞的可能性。
• 食物位置重置：碰撞后调用resetPosition生成新的食物位置，避免重复触发碰撞提示。
• 画布边界处理：限制蛇和食物的位置范围，避免因超出画布导致的位置计算错误。

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