小球走迷宫游戏的实现比接元宝要简单的多，迷宫地图可以说是由一个二维数组组成的，0代表没有障碍物，1代表有障碍物，小球从（0,0）位置开始出发，走到指定位置则游戏胜利，遇到障碍物则不能通过，可以看做一个点在数组的（0,0）位置开始向上或向右或向下或向左来‘走’数组，因为是人为控制小球，所以只需要判断小球每走一步是否在地图范围内并且没有障碍物，然后还要判断小球是否走到了指定位置，这里的指定位置先默认为数组的最后一个元素的位置，所以整个地图就是这个二维数组，按照比例将数组中为1的障碍物画到画布上即可。
function drawMap () { for (var y = 0; y < mapArray.length; y++) { for (var x = 0; x < mapArray[y].length; x++) { mapArray[y][x] === 1 && ctx.drawImage(brickImg, 656, 16, 16, 16, x * size, y * size, size, size); } } }要注意的是画布上的x、y坐标对应到数组的是列、行，所以第一个循环的参数应该是画布中的y坐标。第二个循环才是画布中的x坐标。与接元宝不同的是，因为除了小球，其他的障碍物都是不动的，所以这次不用定时刷新游戏画布，只需要每次移动小球后将原本小球清除，然后在新的位置画上小球，画障碍物地图的函数也只用一次就行了。
画小球代码：
function drawBall (preX, preY) { // 将原先的小球清掉画新的小球 ctx.fillStyle = '#000'; ctx.fillRect(preX * size, preY * size, size, size); ctx.drawImage(ballImg, 30, 30, 196, 196, ball.x * size, ball.y * size, size, size); isEnd() && winGame(); }效果：
源码和素材地址：https://github.com/luqiren/Canvas.git
里面的maze.html就是全部源码了。
因为有人需要，在这里就顺便把全部代码给贴上来了：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>迷宫</title> <style> * { padding: 0; margin: 0; } #ball { position: absolute; left: -10000px; } img { position: absolute; left: -10000px; } </style> <script> var ctx; var ballImg; var brickImg; var mapArray = [ [0, 1, 0, 1, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 1, 0, 0, 0, 0, 0, 0], [0, 1, 0, 0, 0, 0, 0, 0, 1, 0], [0, 0, 0, 0, 1, 0, 0, 0, 0, 0], [0, 1, 0, 1, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 1, 0, 0], [0, 1, 0, 1, 1, 0, 0, 0, 0, 0], [0, 1, 0, 1, 0, 0, 0, 0, 0, 0], [0, 0, 0, 1, 0, 0, 1, 0, 0, 0] ]; var size = 40; var ball = new Ball(0, 0); function Ball (x, y) { this.x = x; this.y = y; this.moveUp = function () { if (this.y === 0 || mapArray[this.y-1][this.x] === 1) { return; } this.y -= 1; } this.moveRight = function () { if (this.x === mapArray[0].length - 1 || mapArray[this.y][this.x+1] === 1) { return; } this.x += 1; } this.moveDown = function () { if (this.y === mapArray.length - 1 || mapArray[this.y+1][this.x] === 1) { return; } this.y += 1; } this.moveLeft = function () { if (this.x === 0 || mapArray[this.y][this.x-1] === 1) { return; } this.x -= 1; } } function drawBall (preX, preY) { // 将原先的小球清掉画新的小球 ctx.fillStyle = '#000'; ctx.fillRect(preX * size, preY * size, size, size); ctx.drawImage(ballImg, 30, 30, 196, 196, ball.x * size, ball.y * size, size, size); isEnd() && winGame(); } function drawMap () { for (var y = 0; y < mapArray.length; y++) { for (var x = 0; x < mapArray[y].length; x++) { mapArray[y][x] === 1 && ctx.drawImage(brickImg, 656, 16, 16, 16, x * size, y * size, size, size); } } } function winGame () { document.keydown = function (event) {} ctx.fillStyle = '#000'; ctx.fillRect(0, 0, 400, 400); ctx.font = '50px Verdana'; var gradient = ctx.createLinearGradient(0, 0, 200, 0); gradient.addColorStop('0', 'magenta'); gradient.addColorStop('0.5', 'purple'); gradient.addColorStop('1', 'blue'); ctx.fillStyle = gradient; ctx.fillText('WIN!', 100, 200); } function isEnd () { return ball.x === mapArray[0].length - 1 && ball.y === mapArray.length - 1; } /** 键盘事件 */ document.onkeydown = function (event) { if (isEnd()) { return; } var e = event || window.event || arguments.callee.caller.arguments[0]; var flag = true; var preX = ball.x; var preY = ball.y; switch (e.keyCode) { case 38: ball.moveUp(); break; case 39: ball.moveRight(); break; case 40: ball.moveDown(); break; case 37: ball.moveLeft(); break; default: flag = false; break; } flag && drawBall(preX, preY); } onload = function () { var canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); ctx.fillStyle = '#000'; ctx.fillRect(0, 0, 400, 400); ballImg = document.getElementById('ball'); brickImg = document.getElementById('brick'); drawBall(); drawMap(); } </script> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <img id="ball" src="img/ball2.png" alt=""> <img id="brick" src="img/brick.png"> </body> </html>
