前言 （最近设计模式看的有点头大，一直面对纯js实在是有些枯燥-_-。所以写一点有趣的东西调剂一下） 现在canvas已经不算新鲜了，不过由于日常业务中并不常用，所以实践并不多，今天分享一下，如何实现简单canvas迷宫。这个例子来源于《html5秘籍》第二版，代码有稍微做了点调整。 由于中间有一步使用canvas获取图片信息的时候，必须使用服务器环境。所以我先写了一个样例扔在服务器上，大家可以先体验一下效果（用成就感作为驱动力哈哈哈） 点我体验 git地址 正文 实现这个小游戏也不难，让我们想想，一个迷宫游戏有哪些基本要素。 首先当然得有个地图，然后得有个移动的小人，这两个我们利用cavans来绘制； 接下来是物体移动的程序，这个程序主要包括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) x = startingX y = startingY context.drawImage(imgFace,x,y) context.stroke() } imgMaze.src = mazeFile }