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

本文摘自PHP中文网，作者不言，侵删。

这篇文章主要介绍了关于使用canvas实现迷宫游戏，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

前言

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

由于中间有一步使用canvas获取图片信息的时候，必须使用服务器环境。所以我先写了一个样例扔在服务器上，大家可以先体验一下效果（用成就感作为驱动力哈哈哈）

正文

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

首先当然得有个地图，然后得有个移动的小人，这两个我们利用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, 0)
 
    x = startingX
    y = startingY
    context.drawImage(imgFace, x, y)
    context.stroke()
  }
  imgMaze.src = mazeFile
}