扣丁学堂HTML5培训简述如何快速实现一个简单的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
}

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），如果是黑色，说明检测到碰撞。

其余：

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

碰撞检测在拐弯的地方体验不佳;

当前情况运行时有轨迹，在答案模式下应该如何去掉轨迹?

有兴趣的同学可以试着自己实现下。

想要了解更多关于HTML5方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5视频，扣丁学堂老师精心推出的HTML5在线教程定能让你快速掌握HTML5从入门到精通开发实战技能。

H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

注：点击(了解更多)进入课程直播间