快速实现一个简单的canvas迷宫游戏

前言

（最近设计模式看的有点头大，一直面对纯js实在是有些枯燥-_-。因此写一点有趣的东西调剂一下）
如今canvas已经不算新鲜了，不过因为平常业务中并不经常使用，因此实践并很少，今天分享一下，如何实现简单canvas迷宫。这个例子来源于《html5秘籍》第二版，代码有稍微作了点调整。

因为中间有一步使用canvas获取图片信息的时候，必须使用服务器环境。因此我先写了一个样例扔在服务器上，你们能够先体验一下效果（用成就感做为驱动力哈哈哈）

点我体验

git地址

正文

实现这个小游戏也不难，让咱们想一想，一个迷宫游戏有哪些基本要素。

首先固然得有个地图，而后得有个移动的小人，这两个咱们利用cavans来绘制；

接下来是物体移动的程序，这个程序主要包括2个方面：

1.让物体跟咱们指定的指令来移动；
2.检测物体是否碰到墙体或者出口。

绘制迷宫的地图和移动的小人

绘制地图的主要步骤是：

1. 获取一张地图的图片
2. 利用cavans绘制图像。

迷宫地图的生成，能够借助谷歌的一个迷宫在线生成器来得到。

绘制小人也是同样直接找一个小人的图片便可，不过这里要注意的是，要找正方形的图片，由于一会咱们须要作移动的碰撞检测，方形比较好判断。

接下来就要写绘制迷宫和小人的主要函数

function drawMaze(mazeFile, startingX, startingY) {
  var imgMaze = new Image()
  imgMaze.onload = function () {
    // 画布大小调整
    canvas.width = imgMaze.width
    canvas.height = imgMaze.height

    // 绘制笑脸
    var imgFace = document.getElementById("face")
    context.drawImage(imgMaze, 0, 0)

    x = startingX
    y = startingY
    context.drawImage(imgFace, x, y)
    context.stroke()
  }
  imgMaze.src = mazeFile
}

mazeFile是迷宫的图片地址，startingX和startingY，是起始点的坐标。在这里图片引入的方式用了2种，缘由是小人的图片我不常常更换，就直接写在页面里，迷宫的地图打算作成可变的，因此在js里引入，你想把图片都直接用js引入也没有问题。其余部分比较简单，再也不赘述。

移动函数

移动的主要原理是：
接受指定的用户输入（在这里是响应方向键），转换成对应的移动指令。而后周期性的检查移动指令，绘制对应的目标位置。举个简单的例子：

好比每按下一次方向键上，就记录下应该往上移动，而后每隔100毫秒检查当前的移动指令，绘制应该移动的目标地点，重复这个过程。代码也比较简单：

// 移动函数
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
}

在这里，15是小人的宽度，咱们检测小人两侧各1px范围（对应代码中的getImageData(x - 1, y - 1, 15 + 2, 15 + 2)能够稍微思考下这里为何是+2），若是是黑色，说明检测到碰撞。

其他

在代码里，我加了一些其余的功能，好比提示答案等。至于更换地图也比较简单：把地图对应的文件地址，起点坐标，答案图片路径等存在一个对象里，而后设置一个地图数组，点击的时候切换地图并从新渲染就能够了。还有一些值得优化的地方，好比：

1. 碰撞检测在拐弯的地方体验不佳；
2. 当前状况运行时有轨迹，在答案模式下应该如何去掉轨迹？

有兴趣的同窗能够试着本身实现下。

小结

这个例子相对比较简单，对js的要求不高，拿来玩一下仍是挺不错的。

而后依然是每次都同样的结尾，若是内容有错误的地方欢迎指出；若是对你有帮助，欢迎点赞和收藏，转载请征得赞成后著明出处，若是有问题也欢迎私信交流，主页有邮箱地址~溜了