迷宫游戏

github地址
博客地址

布置迷宫

思路是选择一幅迷宫图片，把整幅图绘制到画布上。

当页面加载时，它会取得一张图片，然后把它绘制到画布上。

///定义全局变量，保存画布及绘图上下文
var canvas;
var context;
window.onload = function () {
    canvas = document.getElementById('canvas');
    context = canvas.getContext("2d");

    //绘制迷宫背景    
    drawMaze("maze.png", 268, 5);

    //当用户按下键盘上的键时，运行processKey()函数    
    window.onkeydown = processKey;       
};

以上代码并没有自己绘制迷宫背景，而是把这个任务交给了另一个名为drawMaze()的函数。

由于绘制迷宫的是一个独立的函数，因此就可以不局限于只绘制一个迷宫。
只要在调用drawMaze()时传入迷宫图片的文件名以及笑脸的起始位置，就可以加载任何迷
宫图片。

function drawMaze(mazeFile, startingX, startingY) {
        imgMaze = new Image();
        imgMaze.onload = function () {
//          调整画布大小
            canvas.width = imgMaze.width;
            canvas.height = imgMaze.height;

//          绘制迷宫
            context.drawImage(imgMaze, 0, 0);
//          绘制笑脸
            x = startingX;
            y = startingY;
            var imgFace = document.getElementById('face');
            context.drawImage(imgFace, x, y);
            context.stroke();

//          10毫秒后绘制下一帧
            setTimeout(drawFrame, 15);
        };
        imgMaze.src = mazeFile;
    }

首先，定义一个处理图片onload事件并在图片加载完毕后绘制迷宫的函数。
其次，它设置了图片对象的src属性，这样就会加载图片并在加载完毕后触发事件处理函数。
与从隐藏的元素中取图片相比，这个两步方法稍微复杂那么一点，但为了让函数足够
灵活，可以加载任意图片，就必须采取这种方法。

加载完迷宫图片后，代码会根据图片大小调整画布的大小，把笑脸图标放到正确的位置上，
然后绘制笑脸图标。最后，调用setTimeout()开始绘制动画帧。

让笑脸动起来

在用户按下键盘的方向键时，笑脸开始移动。比如，按向下键时，笑脸就会一直向下移动，
不是碰到障碍或用户又按下其他方向键，就不会停下来。

为此，我们需要两个全局变量记录笑脸的速度。换句话说，就是就是记录笑脸在x轴和y轴方向
上每一帧要移动多少像素。这两变量就是dx和dy。

var dx = 0;
var dy = 0;

当用户按下键盘上的键时，画布调用processKey()函数。然后，该函数检查用户按下的是不
是方向键，然后据以调整笑脸的速度。为了检测方向键，要用已知的值与用户按下键的键码
进行比较。

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;
        }
 }

未完待续…