js 小游戏 - 小球走迷宫（基于 h5、画布）

小球走迷宫游戏的实现比接元宝要简单的多，迷宫地图可以说是由一个二维数组组成的，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();
        }

效果：