python迷宫⼩游戏代码_快速实现⼀个简单的canvas迷宫游戏前⾔
（最近设计模式看的有点头⼤，⼀直⾯对纯js实在是有些枯燥-_-。所以写⼀点有趣的东西调剂⼀下）
现在canvas已经不算新鲜了，不过由于⽇常业务中并不常⽤，所以实践并不多，今天分享⼀下，如何实现简单canvas迷宫。这个例⼦来源于《html5秘籍》第⼆版，代码有稍微做了点调整。
由于中间有⼀步使⽤canvas获取图⽚信息的时候，必须使⽤服务器环境。所以我先写了⼀个样例扔在服务器上，⼤家可以先体验⼀下效果（⽤成就感作为驱动⼒哈哈哈）
正⽂
实现这个⼩游戏也不难，让我们想想，⼀个迷宫游戏有哪些基本要素。
⾸先当然得有个地图，然后得有个移动的⼩⼈，这两个我们利⽤cavans来绘制；
接下来是物体移动的程序，这个程序主要包括2个⽅⾯：
1.让物体跟我们指定的指令来移动；
2.检测物体是否碰到墙体或者出⼝。
绘制迷宫的地图和移动的⼩⼈
绘制地图的主要步骤是：
获取⼀张地图的图⽚
利⽤cavans绘制图像。
迷宫地图的⽣成，可以借助⾕歌的⼀个迷宫在线⽣成器来获得。
绘制⼩⼈也是⼀样直接⼀个⼩⼈的图⽚即可，不过这⾥要注意的是，要正⽅形的图⽚，因为⼀会我们需要做移动的碰撞检测，⽅形⽐较好判断。
接下来就要写绘制迷宫和⼩⼈的主要函数
function drawMaze(mazeFile, startingX, startingY) {
var imgMaze = new Image()
// 画布⼤⼩调整
canvas.width = imgMaze.width
canvas.height = imgMaze.height
// 绘制笑脸
var imgFace = ElementById("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
}html5颜代码
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)"
<(x, y, 15, 15)
context.fill()
x += dx
y += dy
// 碰撞检测
if (checkForCollision()) {
x -= dx
y -= dy
dx = 0
dy = 0
}
/
/绘制⼩⼈应该移动的地点
var imgFace = ElementById('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 = ImageData(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），如果是⿊⾊，说明检测到碰撞。
其余
在代码⾥，我加了⼀些其他的功能，⽐如提⽰答案等。⾄于更换地图也⽐较简单：把地图对应的⽂件地址，起点坐标，答案图⽚路径等存在⼀个对象⾥，然后设置⼀个地图数组，点击的时候切换地图并重新渲染就可以了。还有⼀些值得优化的地⽅，⽐如：
碰撞检测在拐弯的地⽅体验不佳；
当前情况运⾏时有轨迹，在答案模式下应该如何去掉轨迹？
有兴趣的同学可以试着⾃⼰实现下。
⼩结
这个例⼦相对⽐较简单，对js的要求不⾼，拿来玩⼀下还是挺不错的。
然后依然是每次都⼀样的结尾，如果内容有错误的地⽅欢迎指出；如果对你有帮助，欢迎点赞和收藏，转载请征得同意后著明出处，如果有问题也欢迎私信交流，主页有邮箱地址~溜了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。