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

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

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

    这是HTML：

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="push.css">
</head>
<body>
    <div>

        <p></p>
        <p></p>
    </div>
</body>
<script src="push.js"></script>

    　　

    这是CSS：（写的不好看）

    *{
    margin: 0;
    padding: 0;
}
div{
     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;
     40px;
    height: 40px;
    position: absolute;
    background: red;
    border: white 2px solid;
}
.target{
    box-sizing: border-box;
    border-radius: 50%;
     40px;
    height: 40px;
    position: absolute;
    background: brown;
    border:#222 2px solid;
}
.box{
    box-sizing: border-box;
    border-radius: 4px;
     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;
     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<obox.length;i++){
            for(var j=0;j<obox.length;j++){
                if(i!=j&&obox[i].offsetLeft == obox[j].offsetLeft&&obox[i].offsetTop==obox[j].offsetTop){
                    obox[i].style.left = obox[i].offsetLeft+40+"px";
                    if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
                        boy.style.left = boy.offsetLeft+40+"px";
                    }
                }
            }
        }
        for (var i = 0; i < obox.length; i++) {
            for (var j = 0; j < owall.length; j++) {
                // 箱子与墙体相撞
                if (obox[i].offsetLeft == owall[j].offsetLeft && obox[i].offsetTop == owall[j].offsetTop) {
                    obox[i].style.left = obox[i].offsetLeft+40+"px";
                    // 小孩与箱子相撞
                    if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
                        boy.style.left = boy.offsetLeft + 40 +"px";
                    }

                }
                
            }
        }
        if (boy.offsetLeft < 0) {
            boy.style.left = 0 + "px";
        }
    } else if (eve.keyCode == 38) {
        // 向上移动
        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";
                1
            }
        }

        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<obox.length;i++){
                    for(var j=0;j<obox.length;j++){
                        if(i!=j&&obox[i].offsetLeft == obox[j].offsetLeft&&obox[i].offsetTop==obox[j].offsetTop){
                            obox[i].style.top = obox[i].offsetTop+40+"px";
                            if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
                                boy.style.top = boy.offsetTop+40+"px";
                            }
                        }
                    }
                }
        // 箱子与墙体相撞
        for (var i = 0; i < obox.length; i++) {
            for (var j = 0; j < owall.length; j++) {
                if (obox[i].offsetLeft == owall[j].offsetLeft && obox[i].offsetTop == owall[j].offsetTop) {
                    obox[i].style.top = obox[i].offsetTop+40+"px";
                                        // 小孩与箱子相撞
                                        if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
                                            boy.style.top = boy.offsetTop + 40 +"px";
                                        }
                }
            }
        }
        
        if (boy.offsetTop < 0) {
            boy.style.top = 0 + "px";
        }
    } else if (eve.keyCode == 39) {
        // 向右移动
        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<obox.length;i++){
            for(var j=0;j<obox.length;j++){
                if(i!=j&&obox[i].offsetLeft == obox[j].offsetLeft&&obox[i].offsetTop==obox[j].offsetTop){
                    obox[i].style.left = obox[i].offsetLeft-40+"px";
                    if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
                        boy.style.left = boy.offsetLeft-40+"px";
                    }
                }
            }
        }
        for (var i = 0; i < obox.length; i++) {
            for (var j = 0; j < owall.length; j++) {
                // 箱子与墙体相撞
                if (obox[i].offsetLeft == owall[j].offsetLeft && obox[i].offsetTop == owall[j].offsetTop) {
                    obox[i].style.left = obox[i].offsetLeft-40+"px";
                     // 小孩与箱子相撞
                     if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
                        boy.style.left = boy.offsetLeft - 40 +"px";
                    }
                }
            }
        }
        if (boy.offsetLeft > 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<obox.length;i++){
            for(var j=0;j<obox.length;j++){
                if(i!=j&&obox[i].offsetLeft == obox[j].offsetLeft&&obox[i].offsetTop==obox[j].offsetTop){
                    obox[i].style.top = obox[i].offsetTop-40+"px";
                    if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
                        boy.style.top = boy.offsetTop-40+"px";
                    }
                }
            }
        }
        for (var i = 0; i < obox.length; i++) {
            for (var j = 0; j < owall.length; j++) {
                // 箱子与墙体相撞
                if (obox[i].offsetLeft == owall[j].offsetLeft && obox[i].offsetTop == owall[j].offsetTop) {
                    obox[i].style.top = obox[i].offsetTop-40+"px";
                      // 小孩与箱子相撞
                      if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
                        boy.style.top = boy.offsetTop - 40 +"px";
                    }
                }
            }
        }
        if (boy.offsetTop > 240) {
            boy.style.top = 240 + "px";
        }
    }
}


function missionSucess(obj1,obj2){
    var n=0;
    for(var i = 0;i<obj1.length;i++){
        for(var j=0;j<obj2.length;j++){
            if(obj1[i].offsetLeft==obj2[j].offsetLeft&&obj1[i].offsetTop==obj2[j].offsetTop){
                n++;
                console.log(n);
                if(n==obj1.length){
                    alert("YOU WIN!");
                }
            }
        }
    }
}

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

    我最想做的就是能睡个好觉，不要半夜睡不着或是半夜醒过来，我才二十出头。不想刚挣点钱就开始留遗产。
  • 相关阅读:
    element、vue 使用
    .net bigint,long传到前端发现精度不对
    服务器工具安装
    银行分控模型的建立
    Firebase —— a readymade backend system
    PouchDB —— build applications that work as well offline
    ASP.NET 之 UserRoleIdentity
    insert conflict do update
    【PostgreSQL数据库】PostgreSQL数据库gdb调试子进程
    mac禁用chrome左右双指滑动手势返回上一页
  • 原文地址：https://www.cnblogs.com/bigharbour/p/11930359.html
Copyright © 2020-2023  润新知