前言（最近设计pattern有点大，一直面对纯js有点无聊-_-。所以写点有趣的东西调一下）现在canvas是不是新的，但是因为在日常业务中不常用，所以实践不多。今天我将分享如何实现一个简单的画布迷宫。本例来自《html5秘籍》第二版，代码略有调整。因为使用canvas获取图片信息的时候中间有一个步骤，所以必须要用到服务器环境。所以我先写了一个sample丢到服务器上。大家可以先体验一下效果（以成就感为动力，哈哈哈）。点我体验git地址文本。实现这个小游戏并不难。让我们想一想，一个迷宫游戏的基本要素是什么。首先当然是要有地图，然后还要有移动的反派。我们使用cavans来绘制这两个；下一步是物体移动的程序。这个程序主要包括2个方面：1.让物体按照我们指定的指令走2.检测物体是否碰到墙壁或出口。绘制迷宫和移动小人的地图的主要步骤是：获取地图的图片并使用cavans绘制图像。迷宫地图的生成可以借助谷歌的迷宫在线生成器获得。画小人也是一样，直接找一张小人的图就可以了，不过这里需要注意的是要找正方形的图，因为后面我们要做移动碰撞检测，正方形比较好判断。下一步是编写绘制迷宫和反派角色的主要函数.widthcanvas.height=imgMaze.height//画一张笑脸varimgFace=document.getElementById("face")context.drawImage(imgMaze,0,0)x=startingXy=startingYcontext.drawImage(imgFace,x,y)上下文。stroke()}imgMaze.src=mazeFile}mazeFile为迷宫图片地址，startingX和startingY为起点坐标。这里介绍图片有两种方式。原因是我不经常换反派的图，直接写在页面上就行了。迷宫的地图是要变的，所以在js导入的时候，想把所有的图片都用js导入是没有问题的。其他部分比较简单，这里不再赘述。移动功能的主要原理是接受指定的用户输入（在本例中是对方向键的响应）并将其转换为相应的移动指令。然后它会定期检查移动指令并绘制相应的目标位置。举个简单的例子：比如每次按下方向键，记录应该向上移动，然后每隔100毫秒检查一次当前的移动命令，画出应该移动的目标位置，重复这个过程.代码也比较简单：//movefunctionfunctionprocessKey(e){dx=0dy=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}}//画框functiondrawFrame(){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+=dxy+=dy//碰撞检测if(checkForCollision()){x-=dxy-=dydx=0dy=0}//绘制小人应该移动的位置varimgFace=document.getElementById('face')context.drawImage(imgFace,x,y)if(canvas.height-y<17){//isFirst=falsealert('恭喜通关游戏结束')returnfalse}//如果在这里重置，则变为非自动移动，即每按一次只向前移动一步箭头键。因为目前体验不好，现在先不要重置//dx=0//dy=0}setTimeout(drawFrame,20)}上面代码中，移动功能比较简单，碰撞检测功能是更重要的是画框功能，下面会详细说明。碰撞检测检测物体是否与墙壁发生碰撞，通常需要先将地图信息保存在内存中，然后在移动物体时检测是否与当前墙壁发生碰撞，但是由于我们的地图背景是黑色的白色迷宫，所以颜色可以用来检测碰撞。具体方法是：获取当前物体的坐标位置，用canvas检测当前地图上这个位置的颜色是否为黑色，如果是就说是墙，不应该进行移动.以下是代码：functioncheckForCollision(){varimageData=context.getImageData(x-1,y-1,15+2,15+2)varpixels=imageData.datafor(vari=0,len=pixels.length;i
