现在游戏产业的多种多样,从最早的坦克大战、超级玛丽到现在的英雄联盟、刺激战场等等数不胜数,你还记得最早的迷宫游戏吗?小猿圈web前端讲师今天就为你如何快速实现一个简单的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),如果是黑色,说明检测到碰撞。
其余:
在代码里,我加了一些其他的功能,比如提示答案等。至于更换地图也比较简单:把地图对应的文件地址,起点坐标,答案图片路径等存在一个对象里,然后设置一个地图数组,点击的时候切换地图并重新渲染就可以了。还有一些值得优化的地方,比如:
碰撞检测在拐弯的地方体验不佳;
当前情况运行时有轨迹,在答案模式下应该如何去掉轨迹?
有兴趣的同学可以试着自己实现下。
上面就是如何快速实现一个简单的canvas迷宫游戏,还在等什么快去装环境运行一下去吧,如果遇到问题可以找小猿圈web前端讲师去解答,如果你想学习html5开发,小猿圈还是很不错的web前端自学②群:738735873,有需要的可以直接去看看的。