使用canvas实现迷宫游戏(2)-木庄网络博客

当前第2页返回上一页

// 移动函数
function processKey(e) {
  dx = 0
  dy = 0
  // 上下左右方向键检测
  if (e.keyCode === 38) {
    dy = -1
  }
  if (e.keyCode === 40) {
    dy = 1
  }
  if (e.keyCode === 37) {
    dx = -1
  }
  if (e.keyCode === 39) {
    dx = 1
  }
}
 
// 绘制帧
function drawFrame() {
  if (dx != 0 || dy != 0) {
    // context.clearRect(x,y,canvas.width,canvas.height)
    // 绘制移动轨迹
    context.beginPath();
    context.fillStyle = "rgb(254,244,207)"
    context.rect(x, y, 15, 15)
    context.fill()
    x += dx
    y += dy
    // 碰撞检测
    if (checkForCollision()) {
      x -= dx
      y -= dy
      dx = 0
      dy = 0
    }
     
    //绘制小人应该移动的地点
    var imgFace = document.getElementById('face')
    context.drawImage(imgFace, x, y)
 
    if (canvas.height - y < 17) {
      // isFirst = false
      alert('恭喜你通关 游戏结束')
      return false
    }
    // 这里如果重置的话变成非自动移动，也就是每按下一次方向键只前进一步，由于目前体验不好所以先不做重置
    // dx = 0
    // dy = 0
  }
  setTimeout(drawFrame, 20)
}

上述代码中，移动函数比较简单，绘制帧的函数里面比较重要的就是碰撞检测函数，在下面详细解释。

碰撞检测

要检测物体与墙体是否碰撞，通常情况是要先把地图信息保存到内存里，然后在移动物体时检测是否与当前的某个墙体碰撞，但是由于我们的地图背景是黑白迷宫，所以可以使用颜色来检测碰撞。具体的做法是：

获取当前物体的坐标位置，利用canvas检测当前地图上这个位置的颜色是否为黑色，如果是，说是是墙体，不应该执行移动，下面就是代码：

function checkForCollision() {
  var imageData = context.getImageData(x - 1, y - 1, 15 + 2, 15 + 2)
  var pixels = imageData.data
 
  for (var i = 0, len = pixels.length; i < len; i++) {
    var red = pixels[i],
        green = pixels[i + 1]
        blue = pixels[i + 2]
        alpha = pixels[i + 3]
 
    // 检测是否碰到黑色的墙
    if (red === 0 && green === 0 && blue === 0) {
      return true
    }
  }
  return false
}