困了累了敲代码，提神醒脑--写一些推箱子小游戏

好久没敲代码了，前几天也睡不好，怎么办，折腾自己一下就好了，反正头发多。而且我这个初学者哪能在乎头发哪，距离强者的路还远得很。

我也不是很想写，主要是闲的无聊，再加上技术差，就更不想写了，可是这整宿整宿的睡不着觉，难受啊，白天还贼精神，估计哪天我就猝死了。好了，我把我的代码发一下，很乱，一开始写的全是bug，改了好长时间才改好，这都由于我还是个初学者。

这是HTML：

这是CSS：（写的不好看）

*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 280px;
    border: solid 40px #222;
    position: absolute;
    top: 100px;
    left: 300px;
    border-radius: 50px;
    background-color: rosybrown;
}
.wall{
    box-sizing: border-box;
    border-radius: 2px;
    width: 40px;
    height: 40px;
    position: absolute;
    background: red;
    border: white 2px solid;
}
.target{
    box-sizing: border-box;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: absolute;
    background: brown;
    border:#222 2px solid;
}
.box{
    box-sizing: border-box;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    position: absolute;
    background: #333;
    border:#222 2px solid;
    font-size: 32px;
    color: white;
    line-height: 28px;
    text-indent: 4px;
    letter-spacing: 10px;
    z-index: 2;
}
img{
    display: block;
    box-sizing: border-box;
    border-radius: 2px;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 120px;
    left: 120px;
    position: absolute;
    z-index: 3;
}

这是JS：（写的更差，把自己绕晕了好久）

var wall = [
    [0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
    [0, 1, 0, 2, 1, 0, 0, 0, 0, 0],
    [0, 1, 0, 4, 1, 1, 1, 0, 0, 0],
    [0, 1, 0, 3, 0, 0, 1, 0, 0, 0],
    [0, 1, 0, 4, 0, 0, 1, 0, 0, 0],
    [0, 1, 0, 2, 1, 1, 1, 0, 0, 0],
    [0, 1, 1, 1, 1, 0, 0, 0, 0, 0]
];
map(wall);

function map(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr[i].length; j++) {
            if (arr[i][j] == 1) {
                var odiv = document.querySelector("div");
                var p = document.createElement("p")
                var op = odiv.appendChild(p);
                op.className = "wall";
                op.style.top = i * 40 + "px";
                op.style.left = j * 40 + "px";
            } else if (arr[i][j] == 2) {
                var odiv = document.querySelector("div");
                var p = document.createElement("p")
                var op = odiv.appendChild(p);
                op.className = "target";
                op.style.top = i * 40 + "px";
                op.style.left = j * 40 + "px";
            } else if (arr[i][j] == 3) {
                var odiv = document.querySelector("div");
                var img = document.createElement("img");
                var oimg = odiv.appendChild(img);
                oimg.src = "boy.png"
                oimg.id = "boy"
            } else if (arr[i][j] == 4) {
                var odiv = document.querySelector("div");
                var p = document.createElement("p");
                var op = odiv.appendChild(p);
                op.innerHTML = "||";
                op.className = "box";
                op.style.top = i * 40 + "px";
                op.style.left = j * 40 + "px";
            }
        }
    }
}

var boy = document.getElementById("boy");
var otarget = document.getElementsByClassName("target");
var obox = document.getElementsByClassName("box");

document.onkeydown = function (eve) {
    var eve = eve || window.event;
    var boyx = boy.offsetLeft,
        boyy = boy.offsetTop;
    var owall = document.getElementsByClassName("wall");

    if (eve.keyCode == 37) {
        // 向左移动
        boy.style.left = boy.offsetLeft - 40 + "px";
        // 小孩与墙体相撞
        for (var i = 0; i < owall.length; i++) {
            if (owall[i].offsetLeft == boy.offsetLeft && owall[i].offsetTop == boy.offsetTop) {
                boy.style.left = boyx + "px";
                boy.style.top = boyy + "px";
            }
        }

        for (var i = 0; i < obox.length; i++) {
            for (var j = 0; j < owall.length; j++) {
                if (obox[i].offsetLeft == boy.offsetLeft && obox[i].offsetTop == boy.offsetTop) {
                    // 箱子移动
                    obox[i].style.left = obox[i].offsetLeft - 40 + "px";
                }
            }
        }
        // 小孩推箱子与箱子相撞
        for(var i =0;i 360) {
            boy.style.left = 360 + "px";
        }
    } else if (eve.keyCode == 40) {
        // 向下移动
        boy.style.top = boy.offsetTop + 40 + "px";
        // 小孩与墙体相撞
        for (var i = 0; i < owall.length; i++) {
            if (owall[i].offsetLeft == boy.offsetLeft && owall[i].offsetTop == boy.offsetTop) {
                boy.style.left = boyx + "px";
                boy.style.top = boyy + "px";
            }
        }
        for (var i = 0; i < obox.length; i++) {
            for (var j = 0; j < owall.length; j++) {
                if (obox[i].offsetLeft == boy.offsetLeft && obox[i].offsetTop == boy.offsetTop) {
                    // 箱子移动
                    obox[i].style.top = obox[i].offsetTop + 40 + "px";
                                      
                }
            }
        }
        // 小孩推箱子与箱子相撞
        for(var i =0;i 240) {
            boy.style.top = 240 + "px";
        }
    }
}


function missionSucess(obj1,obj2){
    var n=0;
    for(var i = 0;i

　　可以执行一下missionSuccess（），让游戏更完整一些。不过我只是个初学者，都是想到哪就桥到哪。出现bug了再去改，而且格式不符合规范，还在改进。

我最想做的就是能睡个好觉，不要半夜睡不着或是半夜醒过来，我才二十出头。不想刚挣点钱就开始留遗产。