JavaScript Canvas 碰撞检测：上下左右碰撞检测实现

在 JavaScript 中，可以使用 canvas 的 getContext('2d') 方法获取到画布的 2D 上下文，然后使用上下文的方法来进行碰撞检测。

上下左右碰撞检测的思路是，判断两个物体的边界是否相交。如果两个物体的边界相交，则表示发生了碰撞。

以下是一个简单的示例代码，用于检测两个矩形物体的上下左右碰撞：

// 获取 canvas 元素和上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 定义两个矩形物体的位置和尺寸
var rect1 = {x: 50, y: 50, width: 100, height: 100};
var rect2 = {x: 200, y: 200, width: 100, height: 100};

// 碰撞检测函数
function isColliding(rect1, rect2) {
  // 检测上下碰撞
  if (rect1.y + rect1.height >= rect2.y && rect1.y <= rect2.y + rect2.height) {
    // 检测左右碰撞
    if (rect1.x + rect1.width >= rect2.x && rect1.x <= rect2.x + rect2.width) {
      return true; // 发生了碰撞
    }
  }
  return false; // 没有发生碰撞
}

// 绘制矩形物体
function drawRect(rect) {
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
}

// 绘制画布
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制矩形物体
  drawRect(rect1);
  drawRect(rect2);
  
  // 进行碰撞检测
  if (isColliding(rect1, rect2)) {
    console.log('发生了碰撞');
  } else {
    console.log('没有发生碰撞');
  }
}

// 设置定时器，每隔一段时间绘制画布
setInterval(draw, 10);

在以上示例代码中，我们定义了两个矩形物体的位置和尺寸，并在画布上绘制这两个物体。然后使用碰撞检测函数 isColliding 来检测是否发生了碰撞。最后使用定时器每隔一段时间绘制画布并进行碰撞检测。