介绍
小编给大家分享一下如何实现一个画布迷宫游戏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>正文
实现这个小游戏也不难,让我们想想,一个迷宫游戏有哪些基本要素。
首先当然得有个地图,然后得有个移动的小的人,这两个我们利用卡文来绘制;
接下来是物体移动的程序,这个程序主要包括2个方面:
1。让物体跟我们指定的指令来移动;
2。检测物体是否碰到墙体或者出口。
绘制迷宫的地图和移动的小人
绘制地图的主要步骤是:
<李> 获取一张地图的图片
<李> 利用卡文绘制图像。
迷宫地图的生成,可以借助谷歌的一个迷宫在线生成器来获得。
绘制小人也是一样直接找一个小人的图片即可,不过这里要注意的是,要找正方形的图片,因为一会我们需要做移动的碰撞检测,方形比较好判断。
接下来就要写绘制迷宫和小人的主要函数
function drawMaze (mazeFile, startingX,, startingY), {
var 才能;imgMaze =, new 图像()
时间=imgMaze.onload 才能;function (), {
,,,//,画布大小调整
,,,canvas.width =imgMaze.width
,,,canvas.height =imgMaze.height
,,,//,绘制笑的脸
,,,var imgFace =, . 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 拉伸机(),{
if 才能;(dx !=, 0, | |, dy !=, 0), {
,,,//,context.clearRect (x, y, canvas.width canvas.height)
,,,//,绘制移动轨迹
,,,context.beginPath ();
,,,context.fillStyle =,“rgb (254244207)“
,,,context.rect (x, y,, 15日,15)
,,,context.fill ()
,,,x +=, dx
,,,y +=, dy
,,,//,碰撞检测
,,,if (checkForCollision ()), {
,,,,,x -=, dx
,,,,,y -=, dy
,,,,,dx =0
,,,,,dy =0
,,,}
,,,,
,,,//绘制小人应该移动的地点
,,,var imgFace =, . getelementbyid(& # 39;面对# 39;)
,,,context.drawImage (imgFace, x,, y)
,,,if (canvas.height 作用;y & lt;, 17), {
,,,,,//,isFirst =false
,,,,,警报(& # 39;恭喜你通关,游戏结束& # 39;)
,,,,,return 错误的
,,,}
,,,//,这里如果重置的话变成非自动移动,也就是每按下一次方向键只前进一步,由于目前体验不好所以先不做重置
,,,//,dx =0
,,,//,dy =0
,,}
,,setTimeout(拉伸机,20)
} 上述代码中,移动函数比较简单,绘制帧的函数里面比较重要的就是碰撞检测函数,在下面详细解释。
<强>碰撞检测
要检测物体与墙体是否碰撞,通常情况是要先把地图信息保存到内存里,然后在移动物体时检测是否与当前的某个墙体碰撞,但是由于我们的地图背景是黑白迷宫,所以可以使用颜色来检测碰撞。具体的做法是:
获取当前物体的坐标位置,利用帆布检测当前地图上这个位置的颜色是否为黑色,如果是,说是是墙体,不应该执行移动,下面就是代码:
