前言
(最近设计模式看的有点头大,一直面对纯js实在是有些枯燥-_-。所以写一点有趣的东西调剂一下)
现在canvas已经不算新鲜了,不过由于日常业务中并不常用,所以实践并不多,今天
分享一下,如何实现简单canvas迷宫。这个例子来源于《html5秘籍》第二版,
代码有稍微做了点调整。
由于中间有一步使用canvas
获取图片信息的时候,必须使用服务器环境。所以我先写了
一个样例扔在服务器上,大家可以先体验一下
效果(用成就感作为驱动力哈哈哈)
点我体验
git地址
正文
实现这个小游戏也不难,让我们想想,
一个迷宫游戏有哪些基本要素。
首先当然得有个地图,然后得有个移动的小人,这两个我们利用cavans来绘制;
接下来是物体移动的程序,这个程序主要
包括2个方面:
1.让物体跟我们指定的指令来移动;
2.检测物体是否碰到墙体或者出口。
绘制迷宫的地图和移动的小人
绘制地图的主要步骤是:
获取一张地图的
图片
利用cavans绘制图像。
迷宫地图的
生成,可以借助谷歌的
一个迷宫在线
生成器来获得。
绘制小人也是一样直接找
一个小人的
图片即可,不过这里要注意的是,要找正方形的
图片,因为一会我们需
要做移动的碰撞检测,方形比较好判断。
接下来就要写绘制迷宫和小人的主要
函数
function drawMaze(ma
zefile,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)
x = startingX
y = startingY
context.drawImage(imgFace,x,y)
context.
stroke()
}
imgMaze.src = ma
zefile
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。