<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <script>
        var a = new Array();
        a = [
            [1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1],        ];
        window.onload = function () {
            var i, j;
            for (i = 0; i < a.length; i++) {
                for (j = 0; j < a[i].length; j++) {
                    var aa = document.createElement('div');
                    aa.style.position = "absolute";
                    aa.style.width = "60px";
                    aa.style.height = "60px";
                    aa.style.left = j * 60 + "px";
                    aa.style.top = i * 60 + "px";
                    aa.id = i + "_" + j;
                    if (a[i][j] == 1) { aa.style.backgroundColor="blue"; }
                    if (a[i][j] == 0) { aa.style.backgroundColor = "white"; }
                    if (a[i][j] == 2) { aa.style.backgroundColor = "yellow"; x = i; y = j }
                    if (a[i][j] == 3) { aa.style.backgroundColor = "red"; }
                    if (a[i][j] == 4) { aa.style.backgroundColor = "green"; }
                    document.body.appendChild(aa);
                }
            }        }
var f=0;
        function yd(e) {
            var key = e || event;
            var nx = 0, ny = 0;
//var f = 0;
            switch (event.keyCode) {                case 37:
                    ny = y - 1;
                    if (a[x][ny] == 0 | a[x][ny] == 3)
                    { l(); }
                    if (a[x][ny] == 3) {
                        alert("你获得了钥匙!");
                        f = 1;
                        a[x][ny] = 0;
                    };
                    if (a[x][ny] == 4&&f==0) {
                        
                        alert("你还没有钥匙!");
                        break;
                        
                    }
                    if (a[x][ny] == 4 && f == 1) {                        l();
                        break;                    }                    
                    
                    break;
                case 38:                    nx = x - 1;
                    if (a[nx][y] == 0 | a[nx][y] == 3) { t(); }
                    if (a[nx][y] == 3) {
                        alert("你获得了钥匙!");
                        f = 1;
                        a[nx][y] = 0;
                    };
                    if (a[nx][y] == 4&&f==0) {
                       
                        alert("你还没有钥匙!");
                        break;
                        
                    }
                    if (a[nx][y] == 4 && f == 1) {                        t();
                        break;                    }
                    
                    break;
                case 39:                    ny = y + 1;
                    if (a[x][ny] == 0 | a[x][ny] == 3) { r(); }
                    if (a[x][ny] == 3) {
                        alert("你获得了钥匙!");
                        f = 1;
                        a[x][ny] = 0;
                    }
                    if (a[x][ny] == 4&&f==0) {
                       
                        alert("你还没有钥匙!");
                        break;
                        
                    }
                    if (a[x][ny] == 4 && f == 1) {                        r();
                        break;                    }                    
                    break;
                case 40:
                    nx = x + 1;
                    if (a[nx][y] == 0 | a[nx][y] == 3)
                    { d(); }
                    if (a[nx][y] == 3) {
                        alert("你获得了钥匙!");
                        f = 1;
                        a[nx][y] = 0;
                    };
                    if (a[nx][y] == 4&&f==0) {
                       
                        alert("你还没有钥匙!");
                        break;
                        
                    }
                    if (a[nx][y] == 4 && f == 1) {                        d();
                        break;                    }                    
                    break;
            }
        }
        function l() {
            document.getElementById(x + "_" + y).style.backgroundColor = "white";
            y--;
            document.getElementById(x + "_" + y).style.backgroundColor = "yellow";
        }
        function t() {
            document.getElementById(x + "_" + y).style.backgroundColor = "white";
            x--;
            document.getElementById(x + "_" + y).style.backgroundColor = "yellow";
        }
        function r() {
            document.getElementById(x + "_" + y).style.backgroundColor = "white";
            y++;
            document.getElementById(x + "_" + y).style.backgroundColor = "yellow";
        }
        function d() {
            document.getElementById(x + "_" + y).style.backgroundColor = "white";
            x++;
            document.getElementById(x + "_" + y).style.backgroundColor = "yellow";
        }        document.onkeydown = yd;
    </script>
</body>
</html>