简易推箱子游戏

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

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

html与css部分

   
   
   



   
       
           
           
           
           
           
           
           
           
           
           
           
       
       
           
           
           
           
           
           
           
           
           
           
           
       
       
           
           
           
           
           
           
           
           
           
           
           
       
       
           
           
           
           
           
           
           
           
           
           
           
       
       
           
           
           
           
           
           
           
           
           
           
           
       
       
           
           
           
           
           
           
           
           
           
           
           
       
       
           
           
           
           
           
           
           
           
           
           
           
       
       
           
           
           
           
           
           
           
           
           
           
           
       
       
           
           
           
           
           
           
           
           
           
           
           
       
       
           
           
           
           
           
           
           
           
           
           
           
       
       
           
           
           
           
           
           
           
           
           
           
           
       
   

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[i]).css("backgroundColor","white");
    }
    //箱子
    for(var i=0;i         $("#"+box[i]).css("backgroundColor","yellow");
    }
    //目的地
    for(var i=0;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         if($("#"+place[i]).css('background-color') == "rgb(255, 0, 0)") {
            num++;
        }
    }
    if(num == place.length) {
        setTimeout('alert("成功")', 50);
    }
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！