推箱子

<!DOCTYPE html>
<html lang="en" xmlns:47px xmlns:47px xmlns:47px>
<head>
    <meta charset="UTF-8">
    <title>第二关</title>
</head>

<body>

<style type="text/css">
    body {
        background-color: #3b8ab8;
    }

    #box {
        margin-left: 200px;
        margin-top: 50px;

    }

    #box5 {
        position: absolute;
        margin-left: 950px;
        margin-top: -503px;
        width: 100px;
        height: 500px;
    }

    .p1 {
        background-color: #00a65a;
        border-radius: 15px;
        text-align: center;
        height: 40px;
        margin-top: -0.01px;
    }


</style>

<!--网格线-->
<canvas id="box" width="750" height="500" style="background-color: mediumvioletred;"></canvas>
<div id="person" style="background-color: #ff1010;left: 409px;top: 357px;width: 47px;height: 47px;position: absolute">

    <img src="11.png" : width="47" height="47">
</div>
<div id="box1" style="background-color: #ffde00;left: 360px;top: 210px;width: 47px;height: 47px;position: absolute">
    <img src="12.png" : width="47" height="47">
</div>
<div id="box3" style="background-color: #ffde00;left: 360px;top: 260px;width: 47px;height: 47px;position: absolute">
    <img src="12.png" : width="47" height="47">
</div>
<div id="box4" style="background-color: #ffde00;left: 409px;top: 310px;width: 47px;height: 47px;position: absolute">
    <img src="12.png" : width="47" height="47">
</div>
<div id="box2" style="background-color:red;left: 458px;top: 210px;width: 47px;height: 47px;position: absolute">
    <img src="12.png" : width="47" height="47">
</div>
<div id="box5" style="background-color:#9c3328;">
    <p class="p1">第二局</p>
    <button class="p1" style="width: 95px;float:left;">上一步</button>
    <button class="p1" style="width: 95px;float:left;">下一步</button>


</div>


<script type="text/javascript">

    var map = [
        [0, 1, 1, 1, 1, 1, 1, 0],
        [0, 1, 2, 2, 2, 2, 1, 1],
        [0, 1, 0, 0, 0, 0, 0, 1],
        [1, 1, 0, 3.1, 0, 3.2, 0, 1],
        [1, 1, 0, 3.3, 0, 1, 1, 1],
        [1, 1, 1, 0, 3.4, 1, 0, 0],
        [0, 0, 1, 0, 4, 1, 0, 0],
        [0, 0, 1, 1, 1, 1, 0, 0]
    ];
    //1为墙,0为路,2为目的地,3为箱子,4为人
    var c = document.getElementById("box");
    var cxt = c.getContext("2d");
    cxt.lineWidth = 3;

    var number = 4;
    var num = 0;
    //    var img= new Image();
    //    img.src="a.jpg";
    //画方格线
    for (var i = 0; i < 12; i++) {
        cxt.moveTo(0, 50 * i);
        cxt.lineTo(1260, 50 * i);
    }
    for (var i = 0; i < 19; i++) {
        cxt.moveTo(50 * i, 0);
        cxt.lineTo(50 * i, 900);
    }


    //控制墙
    for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
            if (map[i][j] == 1) {
                cxt.fillStyle = ("#F8EAFF");//墙
                cxt.fillRect(j * 50, i * 50, 50, 50);
            }
            if (map[i][j] == 2) {
                cxt.fillStyle = ("yellow");//目的地
                cxt.fillRect(j * 50, i * 50, 50, 50);
            }
        }
    }
    cxt.stroke();
    var x = 6;
    var y = 4;
    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        var person = document.getElementById("person");
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");
        var box4 = document.getElementById("box4");
        var top = person.offsetTop;
        var left = person.offsetLeft;
        var move = 50;//每个框的大小

        if (e) {
            switch (e.keyCode) {
                case 37://←控制左按键,37键盘左键的assii码
                    if (map[x][y - 1] == 3.1) {
                        if (map[x][y - 2] == 1) {
                            break;
                        }
                        if (map[x][y - 2] == 3.2) {
                            break;
                        }
                        if (map[x][y - 2] == 3.3) {
                            break;
                        }
                        if (map[x][y - 2] == 3.4) {
                            break;
                        } else {
                            if (map[x][y - 2] == 2) {
                                box1.style.left = box1.offsetLeft - move + "px";
                                map[x][y - 2] = map[x][y - 1];
                                map[x][y - 1] = map[x][y];
                                map[x][y] = 0;
                                person.style.left = left - move + "px";
                                y--;
                                num++;
                            } else {
                                box1.style.left = box1.offsetLeft - move + "px";
                                var a = map[x][y - 2];
                                map[x][y - 2] = map[x][y - 1];
                                map[x][y - 1] = map[x][y];
                                map[x][y] = a;
                                person.style.left = left - move + "px";
                                y--;
                            }

                        }
                    } else if (map[x][y - 1] == 3.2) {
                        if (map[x][y - 2] == 1) {
                            break;
                        }
                        if (map[x][y - 2] == 3.1) {
                            break;
                        }
                        if (map[x][y - 2] == 3.3) {
                            break;
                        }
                        if (map[x][y - 2] == 3.4) {
                            break;
                        } else {
                            if (map[x][y - 2] == 2) {
                                box2.style.left = box2.offsetLeft - move + "px";
                                map[x][y - 2] = map[x][y - 1];
                                map[x][y - 1] = map[x][y];
                                map[x][y] = 0;
                                person.style.left = left - move + "px";
                                y--;
                                num++;
                            } else {
                                box2.style.left = box2.offsetLeft - move + "px";
                                var a = map[x][y - 2];
                                map[x][y - 2] = map[x][y - 1];
                                map[x][y - 1] = map[x][y];
                                map[x][y] = a;
                                person.style.left = left - move + "px";
                                y--;
                            }

                        }

                    } else if (map[x][y - 1] == 3.3) {
                        if (map[x][y - 2] == 1) {
                            break;
                        }
                        if (map[x][y - 2] == 3.2) {
                            break;
                        }
                        if (map[x][y - 2] == 3.1) {
                            break;
                        }
                        if (map[x][y - 2] == 3.4) {
                            break;
                        } else {
                            if (map[x][y - 2] == 2) {
                                box3.style.left = box3.offsetLeft - move + "px";
                                map[x][y - 2] = map[x][y - 1];
                                map[x][y - 1] = map[x][y];
                                map[x][y] = 0;
                                person.style.left = left - move + "px";
                                y--;
                                num++;
                            } else {
                                box3.style.left = box3.offsetLeft - move + "px";
                                var a = map[x][y - 2];
                                map[x][y - 2] = map[x][y - 1];
                                map[x][y - 1] = map[x][y];
                                map[x][y] = a;
                                person.style.left = left - move + "px";
                                y--;
                            }

                        }
                    } else if (map[x][y - 1] == 3.4) {
                        if (map[x][y - 2] == 1) {
                            break;
                        }
                        if (map[x][y - 2] == 3.2) {
                            break;
                        }
                        if (map[x][y - 2] == 3.3) {
                            break;
                        }
                        if (map[x][y - 2] == 3.1) {
                            break;
                        } else {
                            if (map[x][y - 2] == 2) {
                                box4.style.left = box4.offsetLeft - move + "px";
                                map[x][y - 2] = map[x][y - 1];
                                map[x][y - 1] = map[x][y];
                                map[x][y] = 0;
                                person.style.left = left - move + "px";
                                y--;
                                num++;
                            } else {
                                box4.style.left = box4.offsetLeft - move + "px";
                                var a = map[x][y - 2];
                                map[x][y - 2] = map[x][y - 1];
                                map[x][y - 1] = map[x][y];
                                map[x][y] = a;
                                person.style.left = left - move + "px";
                                y--;
                            }

                        }
                    } else if (map[x][y - 1] == 1) {
                        break;
                    } else if (map[x][y - 1] == 0) {
                        var a = map[x][y - 1];
                        map[x][y - 1] = map[x][y];
                        map[x][y] = a;
                        person.style.left = left - move + "px";
                        y--;
                    }
                    break;


                case 38://↑控制向上按键
//3.1
                    if (map[x - 1][y] == 3.1) {
                        if (map[x - 2][y] == 1) {
                            break;
                        }
                        if (map[x - 2][y] == 3.2) {
                            break;
                        }
                        if (map[x - 2][y] == 3.3) {
                            break;
                        }
                        if (map[x - 2][y] == 3.4) {
                            break;
                        } else {
                            if (map[x - 2][y] == 2) {
                                box1.style.top = box1.offsetTop - move + "px";
                                map[x - 2][y] = map[x - 1][y];
                                map[x - 1][y] = map[x][y];
                                map[x][y] = 0;
                                person.style.top = top - move + "px";
                                x--;
                                num++;
                            } else {
                                box1.style.top = box1.offsetTop - move + "px";
                                var a = map[x - 2][y];
                                map[x - 2][y] = map[x - 1][y];
                                map[x - 1][y] = map[x][y];
                                map[x][y] = a;
                                person.style.top = top - move + "px";
                                x--;
                            }

                        }

                    } else if (map[x - 1][y] == 3.2) {
                        if (map[x - 2][y] == 1) {
                            break;
                        }
                        if (map[x - 2][y] == 3.1) {
                            break;
                        }
                        if (map[x - 2][y] == 3.3) {
                            break;
                        }
                        if (map[x - 2][y] == 3.4) {
                            break;
                        } else {
                            if (map[x - 2][y] == 2) {
                                box2.style.top = box2.offsetTop - move + "px";
                                map[x - 2][y] = map[x - 1][y];
                                map[x - 1][y] = map[x][y];
                                map[x][y] = 0;
                                person.style.top = top - move + "px";
                                x--;
                                num++;
                            } else {
                                box2.style.top = box2.offsetTop - move + "px";
                                var a = map[x - 2][y];
                                map[x - 2][y] = map[x - 1][y];
                                map[x - 1][y] = map[x][y];
                                map[x][y] = a;
                                person.style.top = top - move + "px";
                                x--;
                            }

                        }
                    } else if (map[x - 1][y] == 3.3) {
                        if (map[x - 2][y] == 1) {
                            break;
                        }
                        if (map[x - 2][y] == 3.1) {
                            break;
                        }
                        if (map[x - 2][y] == 3.2) {
                            break;
                        }
                        if (map[x - 2][y] == 3.4) {
                            break;
                        } else {
                            if (map[x - 2][y] == 2) {
                                box3.style.top = box3.offsetTop - move + "px";
                                map[x - 2][y] = map[x - 1][y];
                                map[x - 1][y] = map[x][y];
                                map[x][y] = 0;
                                person.style.top = top - move + "px";
                                x--;
                                num++;
                            } else {
                                box3.style.top = box3.offsetTop - move + "px";
                                var a = map[x - 2][y];
                                map[x - 2][y] = map[x - 1][y];
                                map[x - 1][y] = map[x][y];
                                map[x][y] = a;
                                person.style.top = top - move + "px";
                                x--;
                            }

                        }
                    } else if (map[x - 1][y] == 3.4) {
                        if (map[x - 2][y] == 1) {
                            break;
                        }
                        if (map[x - 2][y] == 3.1) {
                            break;
                        }
                        if (map[x - 2][y] == 3.2) {
                            break;
                        }
                        if (map[x - 2][y] == 3.3) {
                            break;
                        } else {
                            if (map[x - 2][y] == 2) {
                                box4.style.top = box4.offsetTop - move + "px";
                                map[x - 2][y] = map[x - 1][y];
                                map[x - 1][y] = map[x][y];
                                map[x][y] = 0;
                                person.style.top = top - move + "px";
                                x--;
                                num++;
                            } else {
                                box4.style.top = box4.offsetTop - move + "px";
                                var a = map[x - 2][y];
                                map[x - 2][y] = map[x - 1][y];
                                map[x - 1][y] = map[x][y];
                                map[x][y] = a;
                                person.style.top = top - move + "px";
                                x--;
                            }

                        }
                    } else if (map[x - 1][y] == 1) {
                        break;
                    } else if (map[x - 1][y] == 0) {
                        var a = map[x - 1][y];
                        map[x - 1][y] = map[x][y];
                        map[x][y] = a;
                        person.style.top = top - move + "px";
                        x--;
                    }

                    break;




                    //3.1
                case 39://→控制向右按键
                    if (map[x][y + 1] == 3.1) {
                        if (map[x][y + 2] == 1) {
                            break;
                        }
                        if (map[x][y + 2] == 3.2) {
                            break;
                        }
                        if (map[x][y + 2] == 3.3) {
                            break;
                        }
                        if (map[x][y + 2] == 3.4) {
                            break;
                        } else {
                            if (map[x][y + 2] == 2) {
                                box1.style.left = box1.offsetLeft + move + "px";
                                map[x][y + 2] = map[x][y + 1];
                                map[x][y + 1] = map[x][y];
                                map[x][y] = 0;
                                person.style.left = left + move + "px";
                                y++;
                                num++;
                            } else {
                                box1.style.left = box1.offsetLeft + move + "px";
                                var a = map[x][y + 2];
                                map[x][y + 2] = map[x][y + 1];
                                map[x][y + 1] = map[x][y];
                                map[x][y] = a;
                                person.style.left = left + move + "px";
                                y++;
                            }

                        }
                    } else if (map[x][y + 1] == 3.2) {
                        if (map[x][y + 2] == 1) {
                            break;
                        }
                        if (map[x][y + 2] == 3.1) {
                            break;
                        }
                        if (map[x][y + 2] == 3.3) {
                            break;
                        }
                        if (map[x][y + 2] == 3.4) {
                            break;
                        } else {
                            if (map[x][y + 2] == 2) {
                                box2.style.left = box2.offsetLeft + move + "px";
                                map[x][y + 2] = map[x][y + 1];
                                map[x][y + 1] = map[x][y];
                                map[x][y] = 0;
                                person.style.left = left + move + "px";
                                y++;
                                num++;
                            } else {
                                box2.style.left = box2.offsetLeft + move + "px";
                                var a = map[x][y + 2];
                                map[x][y + 2] = map[x][y + 1];
                                map[x][y + 1] = map[x][y];
                                map[x][y] = a;
                                person.style.left = left + move + "px";
                                y++;
                            }

                        }

                    } else if (map[x][y + 1] == 3.3) {
                        if (map[x][y + 2] == 1) {
                            break;
                        }
                        if (map[x][y + 2] == 3.2) {
                            break;
                        }
                        if (map[x][y + 2] == 3.1) {
                            break;
                        }
                        if (map[x][y + 2] == 3.4) {
                            break;
                        } else {
                            if (map[x][y + 2] == 2) {
                                box3.style.left = box3.offsetLeft + move + "px";
                                map[x][y + 2] = map[x][y + 1];
                                map[x][y + 1] = map[x][y];
                                map[x][y] = 0;
                                person.style.left = left + move + "px";
                                y++;
                                num++;
                            } else {
                                box3.style.left = box3.offsetLeft + move + "px";
                                var a = map[x][y + 2];
                                map[x][y + 2] = map[x][y + 1];
                                map[x][y + 1] = map[x][y];
                                map[x][y] = a;
                                person.style.left = left + move + "px";
                                y++;
                            }

                        }

                    } else if (map[x][y + 1] == 3.4) {
                        if (map[x][y + 2] == 1) {
                            break;
                        }
                        if (map[x][y + 2] == 3.2) {
                            break;
                        }
                        if (map[x][y + 2] == 3.3) {
                            break;
                        }
                        if (map[x][y + 2] == 3.1) {
                            break;
                        } else {
                            if (map[x][y + 2] == 2) {
                                box4.style.left = box4.offsetLeft + move + "px";
                                map[x][y + 2] = map[x][y + 1];
                                map[x][y + 1] = map[x][y];
                                map[x][y] = 0;
                                person.style.left = left + move + "px";
                                y++;
                                num++;
                            } else {
                                box4.style.left = box4.offsetLeft + move + "px";
                                var a = map[x][y + 2];
                                map[x][y + 2] = map[x][y + 1];
                                map[x][y + 1] = map[x][y];
                                map[x][y] = a;
                                person.style.left = left + move + "px";
                                y++;
                            }

                        }

                    } else if (map[x][y + 1] == 1) {
                        break
                    } else if (map[x][y + 1] == 0) {
                        var a = map[x][y + 1];
                        map[x][y + 1] = map[x][y];
                        map[x][y] = a;
                        person.style.left = left + move + "px";
                        y++;
                    }

                    break;

//3.1
                case 40://↓控制向下按键
                    if (map[x + 1][y] == 3.1) {
                        if (map[x + 2][y] == 1) {
                            break;
                        }
                        if (map[x + 2][y] == 3.2) {
                            break;
                        }
                        if (map[x + 2][y] == 3.3) {
                            break;
                        }
                        if (map[x + 2][y] == 3.4) {
                            break;
                        } else {
                            if (map[x + 2][y] == 2) {
                                box1.style.top = box1.offsetTop + move + "px";
                                map[x + 2][y] = map[x + 1][y];
                                map[x + 1][y] = map[x][y];
                                map[x][y] = 0;
                                person.style.top = top + move + "px";
                                x++;
                                num++;
                            } else {
                                box1.style.top = box1.offsetTop + move + "px";
                                var a = map[x + 2][y];
                                map[x + 2][y] = map[x + 1][y];
                                map[x + 1][y] = map[x][y];
                                map[x][y] = a;
                                person.style.top = top + move + "px";
                                x++;
                            }

                        }

                    } else if (map[x + 1][y] == 3.2) {
                        if (map[x + 2][y] == 1) {
                            break;
                        }
                        if (map[x + 2][y] == 3.1) {
                            break;
                        }
                        if (map[x + 2][y] == 3.3) {
                            break;
                        }
                        if (map[x + 2][y] == 3.4) {
                            break;
                        } else {
                            if (map[x + 2][y] == 2) {
                                box2.style.top = box2.offsetTop + move + "px";
                                map[x + 2][y] = map[x + 1][y];
                                map[x + 1][y] = map[x][y];
                                map[x][y] = 0;
                                person.style.top = top + move + "px";
                                x++;
                                num++;
                            } else {
                                box2.style.top = box2.offsetTop + move + "px";
                                var a = map[x + 2][y];
                                map[x + 2][y] = map[x + 1][y];
                                map[x + 1][y] = map[x][y];
                                map[x][y] = a;
                                person.style.top = top + move + "px";
                                x++;
                            }

                        }
                    } else if (map[x + 1][y] == 3.3) {
                        if (map[x + 2][y] == 1) {
                            break;
                        }
                        if (map[x + 2][y] == 3.2) {
                            break;
                        }
                        if (map[x + 2][y] == 3.1) {
                            break;
                        }
                        if (map[x + 2][y] == 3.4) {
                            break;
                        }
                        else {
                            if (map[x + 2][y] == 2) {
                                box3.style.top = box3.offsetTop + move + "px";
                                map[x + 2][y] = map[x + 1][y];
                                map[x + 1][y] = map[x][y];
                                map[x][y] = 0;
                                person.style.top = top + move + "px";
                                x++;
                                num++;
                            } else {
                                box3.style.top = box3.offsetTop + move + "px";
                                var a = map[x + 2][y];
                                map[x + 2][y] = map[x + 1][y];
                                map[x + 1][y] = map[x][y];
                                map[x][y] = a;
                                person.style.top = top + move + "px";
                                x++;
                            }

                        }
                    } else if (map[x + 1][y] == 3.4) {
                        if (map[x + 2][y] == 1) {
                            break;
                        }
                        if (map[x + 2][y] == 3.2) {
                            break;
                        }
                        if (map[x + 2][y] == 3.3) {
                            break;
                        }
                        if (map[x + 2][y] == 3.1) {
                            break;
                        } else {
                            if (map[x + 2][y] == 2) {
                                box4.style.top = box4.offsetTop + move + "px";
                                map[x + 2][y] = map[x + 1][y];
                                map[x + 1][y] = map[x][y];
                                map[x][y] = 0;
                                person.style.top = top + move + "px";
                                x++;
                                num++;
                            } else {
                                box4.style.top = box4.offsetTop + move + "px";
                                var a = map[x + 2][y];
                                map[x + 2][y] = map[x + 1][y];
                                map[x + 1][y] = map[x][y];
                                map[x][y] = a;
                                person.style.top = top + move + "px";
                                x++;
                            }

                        }
                    } else if (map[x + 1][y] == 1) {
                        break;
                    } else if (map[x + 1][y] == 0) {
                        var a = map[x + 1][y];
                        map[x + 1][y] = map[x][y];
                        map[x][y] = a;
                        person.style.top = top + move + "px";
                        x++;
                    }
                    break;

            }
        }

        setTimeout(function () {
            if (num == number) {
                alert("下一关")
                location.href = "box2.html";
            }
        })
    };

</script>

</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

开心工作室(kaic_kaic)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值