简易推箱子游戏

* 大概思路(上下左右的代码是差不多的)

 · 设置四个变量
        · 墙
        · 箱子
        · 目的地(箱子与目的地个数相同)
        · 人
  · 判断
        · 若人的前面是箱子,箱子前面没有障碍物,则人与箱子一起移动
        · 若人的前面是箱子,箱子的前面还是箱子或者是墙,则不动。
        · 若人的前面是墙,则不动。
        · 人推动箱子,若把全部数量的箱子移动到相同数量目的地则为胜利。


html与css部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*小方块50×50,横排11个,竖排11个*/
        #div_id{
            margin: 0 auto;/*页面居中*/
            width: 592px;
            height: 592px;
            background-color: #8C96A2;
            border:1px solid gray;
        }
            #map_id{
                width: 572px;
                height: 572px;
                background-color: #00FF33;
                float: left;
                margin: 10px;
            }
    </style>
</head>
<body>
<div id="div_id">
    <div id="map_id">
        <div id="box1">
            <div id="box1_1"></div>
            <div id="box1_2"></div>
            <div id="box1_3"></div>
            <div id="box1_4"></div>
            <div id="box1_5"></div>
            <div id="box1_6"></div>
            <div id="box1_7"></div>
            <div id="box1_8"></div>
            <div id="box1_9"></div>
            <div id="box1_10"></div>
            <div id="box1_11"></div>
        </div>
        <div id="box2">
            <div id="box2_1"></div>
            <div id="box2_2"></div>
            <div id="box2_3"></div>
            <div id="box2_4"></div>
            <div id="box2_5"></div>
            <div id="box2_6"></div>
            <div id="box2_7"></div>
            <div id="box2_8"></div>
            <div id="box2_9"></div>
            <div id="box2_10"></div>
            <div id="box2_11"></div>
        </div>
        <div id="box3">
            <div id="box3_1"></div>
            <div id="box3_2"></div>
            <div id="box3_3"></div>
            <div id="box3_4"></div>
            <div id="box3_5"></div>
            <div id="box3_6"></div>
            <div id="box3_7"></div>
            <div id="box3_8"></div>
            <div id="box3_9"></div>
            <div id="box3_10"></div>
            <div id="box3_11"></div>
        </div>
        <div id="box4">
            <div id="box4_1"></div>
            <div id="box4_2"></div>
            <div id="box4_3"></div>
            <div id="box4_4"></div>
            <div id="box4_5"></div>
            <div id="box4_6"></div>
            <div id="box4_7"></div>
            <div id="box4_8"></div>
            <div id="box4_9"></div>
            <div id="box4_10"></div>
            <div id="box4_11"></div>
        </div>
        <div id="box5">
            <div id="box5_1"></div>
            <div id="box5_2"></div>
            <div id="box5_3"></div>
            <div id="box5_4"></div>
            <div id="box5_5"></div>
            <div id="box5_6"></div>
            <div id="box5_7"></div>
            <div id="box5_8"></div>
            <div id="box5_9"></div>
            <div id="box5_10"></div>
            <div id="box5_11"></div>
        </div>
        <div id="box6">
            <div id="box6_1"></div>
            <div id="box6_2"></div>
            <div id="box6_3"></div>
            <div id="box6_4"></div>
            <div id="box6_5"></div>
            <div id="box6_6"></div>
            <div id="box6_7"></div>
            <div id="box6_8"></div>
            <div id="box6_9"></div>
            <div id="box6_10"></div>
            <div id="box6_11"></div>
        </div>
        <div id="box7">
            <div id="box7_1"></div>
            <div id="box7_2"></div>
            <div id="box7_3"></div>
            <div id="box7_4"></div>
            <div id="box7_5"></div>
            <div id="box7_6"></div>
            <div id="box7_7"></div>
            <div id="box7_8"></div>
            <div id="box7_9"></div>
            <div id="box7_10"></div>
            <div id="box7_11"></div>
        </div>
        <div id="box8">
            <div id="box8_1"></div>
            <div id="box8_2"></div>
            <div id="box8_3"></div>
            <div id="box8_4"></div>
            <div id="box8_5"></div>
            <div id="box8_6"></div>
            <div id="box8_7"></div>
            <div id="box8_8"></div>
            <div id="box8_9"></div>
            <div id="box8_10"></div>
            <div id="box8_11"></div>
        </div>
        <div id="box9">
            <div id="box9_1"></div>
            <div id="box9_2"></div>
            <div id="box9_3"></div>
            <div id="box9_4"></div>
            <div id="box9_5"></div>
            <div id="box9_6"></div>
            <div id="box9_7"></div>
            <div id="box9_8"></div>
            <div id="box9_9"></div>
            <div id="box9_10"></div>
            <div id="box9_11"></div>
        </div>
        <div id="box10">
            <div id="box10_1"></div>
            <div id="box10_2"></div>
            <div id="box10_3"></div>
            <div id="box10_4"></div>
            <div id="box10_5"></div>
            <div id="box10_6"></div>
            <div id="box10_7"></div>
            <div id="box10_8"></div>
            <div id="box10_9"></div>
            <div id="box10_10"></div>
            <div id="box10_11"></div>
        </div>
        <div id="box11">
            <div id="box11_1"></div>
            <div id="box11_2"></div>
            <div id="box11_3"></div>
            <div id="box11_4"></div>
            <div id="box11_5"></div>
            <div id="box11_6"></div>
            <div id="box11_7"></div>
            <div id="box11_8"></div>
            <div id="box11_9"></div>
            <div id="box11_10"></div>
            <div id="box11_11"></div>
        </div>
    </div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 引入jquery包 -->
<script type="text/javascript" src="box.js"></script>


</body>
</html>

       
js部分
var wall = ['box2_4','box2_5','box2_6','box3_4','box3_6','box4_4','box4_6','box4_7','box4_8',
            'box4_9','box5_2','box5_3','box5_4','box5_9','box6_2','box6_7','box6_8','box6_9',
            'box7_2','box7_3','box7_4','box7_5','box7_7','box8_5','box8_7','box9_5','box9_6',
            'box9_7'];//墙
var box = ['box5_5','box5_7','box6_5','box7_6'];//箱子
var place = ['box3_5','box5_8','box6_3','box8_6'];//目的地
var person = ['box6_6'];//人

//草地
$(function(){
    for(var i=1;i<=11;i++){
        for(var j=1;j<=11;j++){
            $("#box"+i+"_"+j).css({
                "width":"50px",
                "height":"50px",
                "backgroundColor":"#39ffff",
                "border":"1px solid black",
                "float": "left"});
        }
    }
});
$(function () {
    //墙
    for(var i=0;i<wall.length;i++){
        $("#"+wall[i]).css("backgroundColor","white");
    }
    //箱子
    for(var i=0;i<box.length;i++){
        $("#"+box[i]).css("backgroundColor","yellow");
    }
    //目的地
    for(var i=0;i<place.length;i++){
        $("#"+place[i]).css("backgroundColor","black");
    }
});

//插入小人图片
$("#box6_6").css("background-image","url('tuixiangzi/box.jpg')");

//键盘监听
$(document).keydown(function(e){
    //截取字符串subString
    var event = e || event;
    var objarr_01 = person.toString().substring(3,4) + "," + person.toString().substring(5,6);
    var objarr_02 = objarr_01.split(",");

    switch(e.keyCode){


        case 37://向左
            x = objarr_02[0];
            y = objarr_02[1] - 1;
                    //判断若小人前面是墙,则小人不动
                    if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 255)"){
                    }
                    //判断小人前面是否是可移动区域
                    else if($("#box"+x+"_"+y).css('background-color') == "rgb(57, 255, 255)"){
                        $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");//新地址图片显示
                        $("#box"+x+"_"+(y+1)).css("background","");//原地址图片消失
                        $("#box"+x+"_"+(y+1)).css("background-color","rgb(57, 255, 255)");//原地址颜色设置为草地颜色
                        //更新小人的位置
                        person = "box" + objarr_02[0] + "_" + (objarr_02[1]-1);
                    }
                    //判断小人前面是否是箱子
                    //再判断,箱子前面是什么
                    else if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 0)"){
                        //若是墙则不动
                        if ($("#box"+x+"_"+(y-1)).css('background-color') == "rgb(255, 255, 255)"){
                        }
                        //若是箱子则不动
                        else if ($("#box"+x+"_"+(y-1)).css('background-color') == "rgb(255, 255, 0)"){
                        }
                        //若箱子前面是可移动区域
                        else if($("#box"+x+"_"+(y-1)).css('background-color') == "rgb(57, 255, 255)"){
                                 $("#box"+x+"_"+(y-1)).css("background-color","rgb(255, 255, 0)");
                                 // $("#box"+x+"_"+y).css("background-color", "transparent");//使漂浮颜色透明
                                 $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
                                 $("#box"+x+"_"+(y+1)).css("background","");//图片消失
                                 $("#box"+x+"_"+(y+1)).css("background-color","rgb(57, 255, 255)");//原地址颜色设置为草地颜色
                            //更新小人的位置
                            person = "box" + objarr_02[0] + "_" + (objarr_02[1]-1);
                        }
                        //判断若箱子前面是目的地
                        else if($("#box"+x+"_"+(y-1)).css('background-color') == "rgb(0, 0, 0)"){
                                $("#box"+x+"_"+(y-1)).css("background-color","rgb(255, 0, 0)");//目的地变成红色
                                $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
                                // $("#box"+x+"_"+y).css("background-color", "transparent");
                                $("#box"+x+"_"+(y+1)).css("background","");//图片消失
                                $("#box"+x+"_"+(y+1)).css("background-color","rgb(57, 255, 255)");//原地址颜色设置为草地颜色
                            //更新小人的位置
                            person = "box" + objarr_02[0] + "_" + (objarr_02[1]-1);
                            next();
                        }
                    }
                    //判断若小人前面是目的地
                    else if($("#box"+x+"_"+y).css('background-color') == "rgb(0, 0, 0)"){
                        $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
                        $("#box"+x+"_"+(y+1)).css("background","");//图片消失
                        $("#box"+x+"_"+(y+1)).css("background-color","rgb(57, 255, 255)");//原地址颜色设置为草地颜色
                    }
            break;

        case 38://向上
            x = objarr_02[0] - 1;
            y = objarr_02[1];
            //判断若小人前面是墙,则小人不动
            if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 255)"){
            }
            //判断小人前面是否是可移动区域
            else if($("#box"+x+"_"+y).css('background-color') == "rgb(57, 255, 255)"){
                $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");//新地址图片显示
                $("#box"+(x+1)+"_"+y).css("background","");//原地址图片消失
                $("#box"+(x+1)+"_"+y).css("background-color","rgb(57, 255, 255)");
                //更新小人的位置
                person = "box" + (objarr_02[0]-1) + "_" + objarr_02[1];
            }
            //判断小人前面是否是箱子
            //再判断,箱子前面是什么
            else if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 0)"){
                //若是墙则不动
                if ($("#box"+(x-1)+"_"+y).css('background-color') == "rgb(255, 255, 255)"){
                }
                //若是箱子则不动
                else if ($("#box"+(x-1)+"_"+y).css('background-color') == "rgb(255, 255, 0)"){
               }
                //若箱子前面是可移动区域
                else if($("#box"+(x-1)+"_"+y).css('background-color') == "rgb(57, 255, 255)"){
                    $("#box"+(x-1)+"_"+y).css("background-color","rgb(255, 255, 0)");
                    $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
                    // $("#box"+x+"_"+y).css("background-color", "transparent");
                    $("#box"+(x+1)+"_"+y).css("background","");//图片消失
                    $("#box"+(x+1)+"_"+y).css("background-color","rgb(57, 255, 255)");
                    //更新小人的位置
                    person = "box" + (objarr_02[0]-1) + "_" + objarr_02[1];
                }
                //判断若箱子前面是目的地
                else if($("#box"+(x-1)+"_"+y).css('background-color') == "rgb(0, 0, 0)"){
                    $("#box"+(x-1)+"_"+y).css("background-color","rgb(255, 0, 0)");//目的地变成红色
                    $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
                    // $("#box"+x+"_"+y).css("background-color", "transparent");
                    $("#box"+(x+1)+"_"+y).css("background","");//图片消失
                    $("#box"+(x+1)+"_"+y).css("background-color","rgb(57, 255, 255)");
                    //更新小人的位置
                    person = "box" + (objarr_02[0]-1) + "_" + objarr_02[1];
                    next();
                }
            }
            //判断若小人前面是目的地
            else if($("#box"+x+"_"+y).css('background-color') == "rgb(0, 0, 0)"){
                $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
                $("#box"+(x+1)+"_"+y).css("background","");//图片消失
                $("#box"+(x+1)+"_"+y).css("background-color","rgb(57, 255, 255)");
            }
            break;

        case 39://向右
            x = objarr_02[0];
            y = (parseInt(objarr_02[1])) + 1;
            //判断若小人前面是墙,则小人不动
            if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 255)"){
            }
            //判断小人前面是否是可移动区域
            else if($("#box"+x+"_"+y).css('background-color') == "rgb(57, 255, 255)"){
                $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");//新地址图片显示
                $("#box"+x+"_"+(y-1)).css("background","");//原地址图片消失
                $("#box"+x+"_"+(y-1)).css("background-color","rgb(57, 255, 255)");
                //更新小人的位置
                person = "box" + objarr_02[0] + "_" + ((parseInt(objarr_02[1])) + 1);
            }
            //判断小人前面若是箱子
            //再判断,箱子前面是什么
            else if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 0)"){
                //若是墙则不动
                if ($("#box"+x+"_"+(y+1)).css('background-color') == "rgb(255, 255, 255)"){
                }
                //若是箱子则不动
                else if ($("#box"+x+"_"+(y+1)).css('background-color') == "rgb(255, 255, 0)"){
                }
                //若箱子前面是可移动区域
                else if($("#box"+x+"_"+(y+1)).css('background-color') == "rgb(57, 255, 255)"){
                    $("#box"+x+"_"+(y+1)).css("background-color","rgb(255, 255, 0)");
                    $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
                    // $("#box"+x+"_"+y).css("background-color", "transparent");
                    $("#box"+x+"_"+(y-1)).css("background","");//图片消失
                    $("#box"+x+"_"+(y-1)).css("background-color","rgb(57, 255, 255)");
                    //更新小人的位置
                    person = "box" + objarr_02[0] + "_" + ((parseInt(objarr_02[1])) + 1);//box05_051
                }
                //判断若箱子前面是目的地
                else if($("#box"+x+"_"+(y+1)).css('background-color') == "rgb(0, 0, 0)"){
                    $("#box"+x+"_"+(y+1)).css("background-color","rgb(255, 0, 0)");//目的地变成红色
                    $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
                    // $("#box"+x+"_"+y).css("background-color", "transparent");
                    $("#box"+x+"_"+(y-1)).css("background","");//图片消失
                    $("#box"+x+"_"+(y-1)).css("background-color","rgb(57, 255, 255)");
                    //更新小人的位置
                    person = "box" + objarr_02[0] + "_" + ((parseInt(objarr_02[1])) + 1);//box05_051
                    next();
                }
            }
            //判断若小人前面是目的地
            else if($("#box"+x+"_"+y).css('background-color') == "rgb(0, 0, 0)"){
                $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
                $("#box"+x+"_"+(y-1)).css("background","");//图片消失
                $("#box"+x+"_"+(y-1)).css("background-color","rgb(57, 255, 255)");
            }
            break;

        case 40://向下
            x = (parseInt(objarr_02[0])) + 1;
            y = objarr_02[1];
            //判断若小人前面是墙,则小人不动
            if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 255)"){
            }
            //判断小人前面是否是可移动区域
            else if($("#box"+x+"_"+y).css('background-color') == "rgb(57, 255, 255)"){
                $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");//新地址图片显示
                $("#box"+(x-1)+"_"+y).css("background","");//原地址图片消失
                $("#box"+(x-1)+"_"+y).css("background-color","rgb(57, 255, 255)");
                //更新小人的位置
                person = "box" + ((parseInt(objarr_02[0])) + 1) + "_" + objarr_02[1];
            }
            //判断小人前面是否是箱子
            //再判断,箱子前面是什么
            else if($("#box"+x+"_"+y).css('background-color') == "rgb(255, 255, 0)"){
                //若是墙则不动
                if ($("#box"+(x+1)+"_"+y).css('background-color') == "rgb(255, 255, 255)"){
                }
                //若是箱子则不动
                else if ($("#box"+(x+1)+"_"+y).css('background-color') == "rgb(255, 255, 0)"){
                }
                //若箱子前面是可移动区域
                else if($("#box"+(x+1)+"_"+y).css('background-color') == "rgb(57, 255, 255)"){
                    $("#box"+(x+1)+"_"+y).css("background-color","rgb(255, 255, 0)");
                    $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
                    // $("#box"+x+"_"+y).css("background-color", "transparent");
                    $("#box"+(x-1)+"_"+y).css("background","");//图片消失
                    $("#box"+(x-1)+"_"+y).css("background-color","rgb(57, 255, 255)");
                    //更新小人的位置
                    person = "box" + ((parseInt(objarr_02[0])) + 1) + "_" + objarr_02[1];
                }
                //判断若箱子前面是目的地
                else if($("#box"+(x+1)+"_"+y).css('background-color') == "rgb(0, 0, 0)"){
                    $("#box"+(x+1)+"_"+y).css("background-color","rgb(255, 0, 0)");//目的地变成红色
                    $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
                    // $("#box"+x+"_"+y).css("background-color", "transparent");
                    $("#box"+(x-1)+"_"+y).css("background","");//图片消失
                    $("#box"+(x-1)+"_"+y).css("background-color","rgb(57, 255, 255)");
                    //更新小人的位置
                    person = "box" + ((parseInt(objarr_02[0])) + 1) + "_" + objarr_02[1];
                    next();
                }
            }
            //判断若小人前面是目的地
            else if($("#box"+x+"_"+y).css('background-color') == "rgb(0, 0, 0)"){
                $("#box"+x+"_"+y).css("background","url('tuixiangzi/box.jpg')");
                $("#box"+(x-1)+"_"+y).css("background","");//图片消失
                $("#box"+(x-1)+"_"+y).css("background-color","rgb(57, 255, 255)");
            }
            break;
    }
});

function next() {
    var num = 0;
    for(var i=0;i<place.length;i++) {
        if($("#"+place[i]).css('background-color') == "rgb(255, 0, 0)") {
            num++;
        }
    }
    if(num == place.length) {
        setTimeout('alert("成功")', 50);
    }
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值