JS做迷宫，人物的方块动不了，求找出错误

Question

这个是CSS：.gz { width: 30px;height: 30px; position: absolute;}
.rw { width: 30px;height: 30px; position: absolute;z-index: 100;}

这个是JS：
window.onload = function () {
var arr = new Array();
arr = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 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, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];

var i, j;
for (i = 0; i < arr.length; i++) {
    for (j = 0; j < arr[i].length; j++) {
        var gz = document.createElement("div");
        gz.className = "gz";
        gz.id = i + "_" + j;
        gz.style.top = i * 34 + "px";
        gz.style.left = j * 34 + "px";

        if (arr[i][j] == 0) { }
        if (arr[i][j] == 1) {
            gz.style.backgroundColor = "gray";
        }
        if (arr[i][j] == 2) {
            gz.style.backgroundColor = "red";
        }
        if (arr[i][j] == 3) {
            gz.style.backgroundColor = "blue";
        }
        document.body.appendChild(gz);
    }
}
craeterole();

}
var x = 1, y = 1;
function craeterole() {
var rw = document.createElement("div");
rw.className = "rw";
rw.style.backgroundColor = "#66ccff";
rw.style.top = x * 34 + "px";
rw.style.left = y * 34 + "px";
rw.id = "rw";
document.body.appendChild(rw);
}
function yd(e) {
var key = e || event;
var aa = document.getElementById("rw");
if (key.keyCode == 37) {
if (arr[x][y - 1] == 0) { aa.style.left = parseInt(aa.style.left) - 34 + "px"; y--; } else { return; }
}
if (key.keyCode == 38) {
if (arr[x - 1][y] == 0) { aa.style.top = parseInt(aa.style.top) - 34 + "px"; x--; } else { return; }
}
if (key.keyCode == 39) {
if (arr[x][y + 1] == 0) { aa.style.left = parseInt(aa.style.left) + 34 + "px"; y++; } else { return; }
}
if (key.keyCode == 40) {
if (arr[x + 1][y] == 0) { aa.style.top = parseInt(aa.style.top) + 34 + "px"; x++; } else { return; }
}
document.onkeydown = yd;
}

Answer 1

自己对比一下下面两个改动就行了，事件初始化放错位置了。

 <script>
var arr = new Array();
window.onload = function () {
arr = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 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, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
var i, j;
for (i = 0; i < arr.length; i++) {
    for (j = 0; j < arr[i].length; j++) {
        var gz = document.createElement("div");
        gz.className = "gz";
        gz.id = i + "_" + j;
        gz.style.top = i * 34 + "px";
        gz.style.left = j * 34 + "px";

        if (arr[i][j] == 0) { }
        if (arr[i][j] == 1) {
            gz.style.backgroundColor = "gray";
        }
        if (arr[i][j] == 2) {
            gz.style.backgroundColor = "red";
        }
        if (arr[i][j] == 3) {
            gz.style.backgroundColor = "blue";
        }
        document.body.appendChild(gz);
    }
}
craeterole();
}
var x = 1, y = 1;
function craeterole() {
var rw = document.createElement("div");
rw.className = "rw";
rw.style.backgroundColor = "#66ccff";
rw.style.top = x * 34 + "px";
rw.style.left = y * 34 + "px";
rw.id = "rw";
document.body.appendChild(rw);
}
function yd(e) {
var key = e || event;
var aa = document.getElementById("rw");
if (key.keyCode == 37) {
    if (arr[x][y - 1] == 0) { aa.style.left = parseInt(aa.style.left) - 34 + "px"; y--; } else { return; }
}
if (key.keyCode == 38) {
    if (arr[x - 1][y] == 0) { aa.style.top = parseInt(aa.style.top) - 34 + "px"; x--; } else { return; }
}
if (key.keyCode == 39) {
    if (arr[x][y + 1] == 0) { aa.style.left = parseInt(aa.style.left) + 34 + "px"; y++; } else { return; }
}
if (key.keyCode == 40) {
    if (arr[x + 1][y] == 0) { aa.style.top = parseInt(aa.style.top) + 34 + "px"; x++; } else { return; }
}

}
document.onkeydown = yd;
</script>