这篇文章主要介绍了使用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 }
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怎么弄迷宫游戏内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
分享名称:使用canvas怎么弄迷宫游戏
网站链接:https://www.cdcxhl.com/article0/jgicio.html
成都网站建设公司_创新互联,为您提供云服务器、网站收录、外贸网站建设、响应式网站、网站策划、
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联