介绍
这篇文章主要介绍了使用帆布怎么弄迷宫游戏,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
前言
(最近设计模式看的有点头大,一直面对纯js实在是有些枯燥_ -。所以写一点有趣的东西调剂一下)
现在画布<代码> 已经不算新鲜了,不过由于日常业务中并不常用,所以实践并不多,今天分享一下,如何实现简单画布<代码> 迷宫。这个例子来源于《html5秘籍》第二版,代码有稍微做了点调整。
由于中间有一步使用帆布获取图片信息的时候,<强>必须使用服务器环境强,所以我先写了一个样例扔在服务器上,大家可以先体验一下效果(用成就感作为驱动力哈哈哈)
正文
实现这个小游戏也不难,让我们想想,一个迷宫游戏有哪些基本要素。
首先当然得有个<>强劲地图强,然后得有个<强>移动的小人强,这两个我们利用卡文来绘制;
接下来是<强>物体移动强劲的程序,这个程序主要包括2个方面:
1。让物体跟我们指定的指令来移动;
2。检测物体是否碰到墙体或者出口。
绘制迷宫的地图和移动的小人
绘制地图的主要步骤是:
<李> 获取一张地图的图片
<李> 利用卡文绘制图像。
迷宫地图的生成,可以借助谷歌的一个迷宫在线生成器来获得。
绘制小人也是一样直接找一个小人的图片即可,不过这里要注意的是,要找<强>正方形的图片强劲,因为一会我们需要做移动的碰撞检测,方形比较好判断。
接下来就要写绘制迷宫和小人的主要函数
函数drawMaze (mazeFile, startingX startingY) {
var imgMaze=新形象()
imgMaze。onload=function () {//画布大小调整
画布。宽度=imgMaze.width
画布。身高=imgMaze.height//绘制笑的脸
var imgFace=. getelementbyid (“face")
上下文。drawImage (imgMaze, 0, 0)
x=startingX
y=startingY
上下文。drawImage (imgFace, x, y)
context.stroke ()
}
imgMaze。src=https://www.yisu.com/zixun/mazeFile
} <代码> mazeFile> startingX 和<代码> startingY>
移动函数
移动的主要原理是:
接受指定的用户输入(在这里是响应方向键),转换成对应的移动指令,然后<强>周期性的检查强移动指令,绘制对应的目标位置。举个简单的例子:
比如每按下一次方向键上,就记录下应该往上移动,然后每隔100毫秒检查当前的移动指令,绘制应该移动的目标地点,重复这个过程。代码也比较简单:
//移动函数
函数processKey (e) {
dx=0
dy=0//上下左右方向键检测
如果(e。键码===38){
dy=1
}
如果(e。键码===40){
dy=1
}
如果(e。键码===37){
dx=1
}
如果(e。键码===39){
dx=1
}
}//绘制帧
函数拉伸机(){
如果(dx !=0 | | dy !=0) {//context.clearRect (x, y, canvas.width canvas.height)//绘制移动轨迹
context.beginPath ();
上下文。“fillStyle=皉gb (254244207);
上下文。矩形(x, y, 15日,15)
context.fill ()
x +=dx
y +=dy//碰撞检测
如果(checkForCollision ()) {
x -=dx
y -=dy
dx=0
dy=0
}//绘制小人应该移动的地点
var imgFace=. getelementbyid(& # 39;面对# 39;)
上下文。drawImage (imgFace, x, y)
如果(画布。高度- y & lt;17){//isFirst=false
警报(& # 39;恭喜你通关游戏结束& # 39;)
返回假
}//这里如果重置的话变成非自动移动,也就是每按下一次方向键只前进一步,由于目前体验不好所以先不做重置//dx=0//dy=0
}
setTimeout(拉伸机,20)
} 上述代码中,移动函数比较简单,绘制帧的函数里面比较重要的就是碰撞检测函数,在下面详细解释。
碰撞检测
要检测物体与墙体是否碰撞,<强>通常情况是要先把地图信息保存到内存里,然后在移动物体时检测是否与当前的某个墙体碰撞,但是<强>由于我们的地图背景是黑白迷宫,所以可以使用颜色来检测碰撞
