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

源码坊

前言
（最近设计模式看的有点头大，一直面对纯js实在是有些枯燥-_-。所以写一点有趣的东西调剂一下）
现在canvas已经不算新鲜了，不过由于日常业务中并不常用，所以实践并不多，今天分享一下，如何实现简单canvas迷宫。这个例子来源于《html5秘籍》第二版，代码有稍微做了点调整。
由于中间有一步使用canvas获取图片信息的时候，必须使用服务器环境。所以我先写了一个样例扔在服务器上，大家可以先体验一下效果（用成就感作为驱动力哈哈哈）
点我体验
git地址
正文
实现这个小游戏也不难，让我们想想，一个迷宫游戏有哪些基本要素。
首先当然得有个地图，然后得有个移动的小人，这两个我们利用cavans来绘制；
接下来是物体移动的程序，这个程序主要包括2个方面：
1.让物体跟我们指定的指令来移动；
2.检测物体是否碰到墙体或者出口。
绘制迷宫的地图和移动的小人
绘制地图的主要步骤是：

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

迷宫地图的生成，可以借助谷歌的一个迷宫在线生成器来获得。
绘制小人也是一样直接找一个小人的图片即可，不过这里要注意的是，要找正方形的图片，因为一会我们需要做移动的碰撞检测，方形比较好判断。
接下来就要写绘制迷宫和小人的主要函数

1. 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毫秒检查当前的移动指令，绘制应该移动的目标地点，重复这个过程。代码也比较简单：

1. // 移动函数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检测当前地图上这个位置的颜色是否为黑色，如果是，说是是墙体，不应该执行移动，下面就是代码：

1. 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），如果是黑色，说明检测到碰撞。
其余
在代码里，我加了一些其他的功能，比如提示答案等。至于更换地图也比较简单：把地图对应的文件地址，起点坐标，答案图片路径等存在一个对象里，然后设置一个地图数组，点击的时候切换地图并重新渲染就可以了。还有一些值得优化的地方，比如：

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

有兴趣的同学可以试着自己实现下。
小结
这个例子相对比较简单，对js的要求不高，拿来玩一下还是挺不错的。
然后依然是每次都一样的结尾，如果内容有错误的地方欢迎指出；如果对你有帮助，欢迎点赞和收藏，转载请征得同意后著明出处，如果有问题也欢迎私信交流，主页有邮箱地址~溜了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持模板人源码论坛。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！模板人源码·版权声明


本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。本站部分作品是由网友自主投稿和发布、编辑整理上传，对此类作品本站仅提供交流平台，不为其版权负责。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。
      本网站所提供的信息，只供参考之用学习交流，切勿用作非法用途。本网站不保证信息的准确性、有效性、及时性和完整性。本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误，对用户或任何其他人士负任何直接或间接责任。在法律允许的范围内，本网站在此声明，不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。        唯一网址: https://www.mubanren.com/thread-553-1-1.html