推箱子小游戏2

一、页面布局方式：

 在HTML中设置好了页面布局。

二、js逻辑思维：

1.根据上下左右的移动改变 人的id。

2.运用字符串的截取和拼接。

3.用$("id").css()//设置css样式。

三、代码：

1.index.js/**

 * Created by wln on 2017/9/8.
 */
$(function () {
    Game.init();//初始化容器
});

var Game = {
    //墙壁、箱子、箱子终点、人
    wall:[
        'w_left_br1_3', 'w_left_br1_4', 'w_left_br1_5',
        'w_left_br2_3', 'w_left_br2_5',
        'w_left_br3_3', 'w_left_br3_5', 'w_left_br3_6', 'w_left_br3_7', 'w_left_br3_8',
        'w_left_br4_1', 'w_left_br4_2', 'w_left_br4_3', 'w_left_br4_8',
        'w_left_br5_1', 'w_left_br5_6', 'w_left_br5_7', 'w_left_br5_8',
        'w_left_br6_1', 'w_left_br6_2', 'w_left_br6_3', 'w_left_br6_4', 'w_left_br6_6',
        'w_left_br7_4', 'w_left_br7_6',
        'w_left_br8_4', 'w_left_br8_5', 'w_left_br8_6'
    ],
    box: ['w_left_br4_4', 'w_left_br4_6', 'w_left_br5_4', 'w_left_br6_5'],
    end: ['w_left_br2_4', 'w_left_br4_7', 'w_left_br5_2', 'w_left_br7_5'],
    person:['w_left_br5_5'],

    init: function () {
        for(var i = 1; i <= 11; i++) {
            for(var j=1; j<=18; j++) {
                $(".w_left_br"+i+"_"+j).css({"width":"50px","height":"50px","border":"1px solid black"});
                $(".w_left_b"+i+"_"+j).css({"width":"50px","height":"50px","border":"1px solid black"});
                $(".w_left_r"+i+"_"+j).css({"width":"50px","height":"50px","border":"1px solid black"});
            }
        }
        for(var i = 0; i < Game.wall.length; i++) {
            $("." + Game.wall[i]).css({'background':'white'});
        }
        for(var i = 0; i < Game.box.length; i++) {
            $("." + Game.box[i]).css('background','yellow');
        }
        for(var i = 0; i < Game.end.length; i++) {
            $("." + Game.end[i]).css('background','black');
        }
        $("." + Game.person).css({'background':'url(images/men1.png)'});
        $("." + Game.person).css({'background-repeat':'no-repeat'});

    },

    movePerson: function (person, move) {//移动人物

        if(move == 1) {//←
            move = -1;
            var Person = person.toString();
            var Pen_len = Person.length -1;
            var Pen_end = parseInt(Person.substring(Pen_len)) + move;
            var Pen_before = Person.substring(0,Pen_len).concat(Pen_end);
            var box_before = Person.substring(0,Pen_len).concat(Pen_end + move);

        }else if(move == 2) {//↑
            move = -1;
            var Person = person.toString();
            var Pen_len = Person.length -3;
            var Pen_end = (parseInt(Person.substring(Pen_len, Pen_len + 1)) + move) +
                Person.substring(Pen_len + 1);
            var Pen_end_1 = (parseInt(Person.substring(Pen_len, Pen_len + 1)) + move + move) +
                Person.substring(Pen_len + 1);
            var Pen_before = Person.substring(0,Pen_len).concat(Pen_end);
            var box_before = Person.substring(0,Pen_len).concat(Pen_end_1);

        }else if(move == 3) {//→
            move = 1;
            var Person = person.toString();
            var Pen_len = Person.length -1;
            var Pen_end = parseInt(Person.substring(Pen_len)) + move;
            var Pen_before = Person.substring(0,Pen_len).concat(Pen_end);
            var box_before = Person.substring(0,Pen_len).concat(Pen_end + move);

        }else {//↓
            move = 1;
            var Person = person.toString();
            var Pen_len = Person.length -3;
            var Pen_end = (parseInt(Person.substring(Pen_len, Pen_len + 1)) + move) +
                Person.substring(Pen_len + 1);
            var Pen_end_1 = (parseInt(Person.substring(Pen_len, Pen_len + 1)) + move + move) +
                Person.substring(Pen_len + 1);
            var Pen_before = Person.substring(0,Pen_len).concat(Pen_end);
            var box_before = Person.substring(0,Pen_len).concat(Pen_end_1);

        }

        //判断人的前面是否有箱子
        if($("." + Pen_before).css('backgroundColor') == 'rgb(255, 255, 0)') {

            //判断箱子前面是否有箱子或墙
            if($("." + box_before).css('backgroundColor') == 'rgb(255, 255, 0)' ||
                $("." + box_before).css('backgroundColor') == 'rgb(255, 255, 255)'){
                //箱子前面有箱子不能走

            }else {
                $("." + box_before).css("background-color", "yellow");
                $("." + Pen_before).css("background", "url('images/men1.png')");
                $("." + Pen_before).css("background-repeat","no-repeat");
                $("." + Pen_before).css("background-color", "transparent");//背景变透明
                $("." + Person).css("background", "");
                Game.person = Pen_before;//更新人的位置
            }

        }
        //判断人前面是否有墙
        else if($("." + Pen_before).css('backgroundColor') == 'rgb(255, 255, 255)'){
            //人前面有墙不能走
        }
        //如果人前面没有墙和箱子
        else {
            $("." + Pen_before).css("background", "url('images/men1.png')");
            $("." + Pen_before).css("background-repeat","no-repeat");
            $("." + Pen_before).css("background-color", "transparent");//背景变透明
            $("." + Person).css("background", "");
            Game.person = Pen_before;//更新人的位置
        }

        this.nextShow();
    },

    nextShow: function () {//判断是否赢
        var num = 0;
        for(var i = 0; i < Game.end.length; i++) {
            if($("."+Game.end[i]).css("backgroundColor") == "rgb(255, 255, 0)") {
                num++;
            }
        }
        if (num == Game.box.length) {
            setTimeout('alert("过关")', 50);
            setTimeout('document.location.reload()', 50);//刷新页面

        }
    }

};
document.onkeydown = function (e) {//键盘按下事件
    var e = e || event;
    switch (e.which) {
        case 37: //← -1
            Game.movePerson(Game.person, 1);//一次移动的距离
            break;
        case 38: //↑ -1
            Game.movePerson(Game.person, 2);
            break;
        case 39: //→ 1
            Game.movePerson(Game.person, 3);
            break;
        case 40: //↓ 1
            Game.movePerson(Game.person, 4);
            break;
        // default:
    }
};

 

2.index.css

/*整体 B*/
.whole {
    width: 1150px;
    height: 600px;
    background-color: #999999;
    margin:5px auto;
}
/*整体 E*/
/*左边 B*/
.w_left {
    width: 936px;
    height: 572px;
    margin-top: 7px;
    margin-left: 10px;
    border:2px solid black;
    position: relative;
    background-color: #39ffff;

}
/*左边 E*/
/*右边 B*/
.w_right {
    width: 150px;
    height: 581px;
    background-color: #a67300;
    margin-top: 7px;
    margin-right: 10px;
    border: 2px solid black;
}
.w_right_up {
    width: 100%;
    height: 60px;
    background-color: white;
}
.w_right_up .up_font {
    font:normal normal 26px "微软雅黑";
    text-align: center;
    padding-top: 15px;
}
/*右边 E*/

 

3.common.css

@charset "utf-8";
/* 存放CSS初始化代码 */
/* 去掉标签的默认margin和padding: */
html, body, ul, li, ol, p, h1, h2, h3, form,img {
    margin:0; 
    padding:0;
}
/* 去掉图片的边框： */
img {
    border:0;
}
/* 去掉ul前面的小点 */
ul {
    list-style:none;
}
/* 去掉input标签默认的padding-top，padding-bottom，border */
input {
    padding-top:0; padding-bottom:0; border:none;
}
/* 去掉a标签的下划线 */
a {
    text-decoration:none;
}
/* 给body设置一个统一的字体样式和背景颜色 */
body {
    font:normal normal 12px "宋体"; 
    color:#4c4c4c; 
    background-color:#fae8c8;
}
/* 左右浮动，清除浮动 */
.fl {float:left;} 
.fr {float:right;} 
.clearfix:after {
    content:"."; 
    height:0;
    line-height:0; 
    display:block; 
    visibility:hidden; 
    clear: both;
} 
.clearfix {
    zoom:1;
}

 

4.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>推箱子</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>


<!-- 整体 B-->
<div class="whole">
    <!-- 左边 B-->
    <div class="w_left fl" id="w_left">
        <div class="w_left_row fl">
            <div class="w_left_br1_1 fl"></div>
            <div class="w_left_br1_2 fl"></div>
            <div class="w_left_br1_3 fl"></div>
            <div class="w_left_br1_4 fl"></div>
            <div class="w_left_br1_5 fl"></div>
            <div class="w_left_br1_6 fl"></div>
            <div class="w_left_br1_7 fl"></div>
            <div class="w_left_br1_8 fl"></div>
            <div class="w_left_br1_9 fl"></div>
            <div class="w_left_br1_10 fl"></div>
            <div class="w_left_br1_11 fl"></div>
            <div class="w_left_br1_12 fl"></div>
            <div class="w_left_br1_13 fl"></div>
            <div class="w_left_br1_14 fl"></div>
            <div class="w_left_br1_15 fl"></div>
            <div class="w_left_br1_16 fl"></div>
            <div class="w_left_br1_17 fl"></div>
            <div class="w_left_b1_18 fl"></div>
        </div>
        <div class="w_left_row fl">
            <div class="w_left_br2_1 fl"></div>
            <div class="w_left_br2_2 fl"></div>
            <div class="w_left_br2_3 fl"></div>
            <div class="w_left_br2_4 fl"></div>
            <div class="w_left_br2_5 fl"></div>
            <div class="w_left_br2_6 fl"></div>
            <div class="w_left_br2_7 fl"></div>
            <div class="w_left_br2_8 fl"></div>
            <div class="w_left_br2_9 fl"></div>
            <div class="w_left_br2_10 fl"></div>
            <div class="w_left_br2_11 fl"></div>
            <div class="w_left_br2_12 fl"></div>
            <div class="w_left_br2_13 fl"></div>
            <div class="w_left_br2_14 fl"></div>
            <div class="w_left_br2_15 fl"></div>
            <div class="w_left_br2_16 fl"></div>
            <div class="w_left_br2_17 fl"></div>
            <div class="w_left_b2_18 fl"></div>
        </div>
        <div class="w_left_row fl">
            <div class="w_left_br3_1 fl"></div>
            <div class="w_left_br3_2 fl"></div>
            <div class="w_left_br3_3 fl"></div>
            <div class="w_left_br3_4 fl"></div>
            <div class="w_left_br3_5 fl"></div>
            <div class="w_left_br3_6 fl"></div>
            <div class="w_left_br3_7 fl"></div>
            <div class="w_left_br3_8 fl"></div>
            <div class="w_left_br3_9 fl"></div>
            <div class="w_left_br3_10 fl"></div>
            <div class="w_left_br3_11 fl"></div>
            <div class="w_left_br3_12 fl"></div>
            <div class="w_left_br3_13 fl"></div>
            <div class="w_left_br3_14 fl"></div>
            <div class="w_left_br3_15 fl"></div>
            <div class="w_left_br3_16 fl"></div>
            <div class="w_left_br3_17 fl"></div>
            <div class="w_left_b3_18 fl"></div>
        </div>
        <div class="w_left_row fl">
            <div class="w_left_br4_1 fl"></div>
            <div class="w_left_br4_2 fl"></div>
            <div class="w_left_br4_3 fl"></div>
            <div class="w_left_br4_4 fl"></div>
            <div class="w_left_br4_5 fl"></div>
            <div class="w_left_br4_6 fl"></div>
            <div class="w_left_br4_7 fl"></div>
            <div class="w_left_br4_8 fl"></div>
            <div class="w_left_br4_9 fl"></div>
            <div class="w_left_br4_10 fl"></div>
            <div class="w_left_br4_11 fl"></div>
            <div class="w_left_br4_12 fl"></div>
            <div class="w_left_br4_13 fl"></div>
            <div class="w_left_br4_14 fl"></div>
            <div class="w_left_br4_15 fl"></div>
            <div class="w_left_br4_16 fl"></div>
            <div class="w_left_br4_17 fl"></div>
            <div class="w_left_b4_18 fl"></div>
        </div>
        <div class="w_left_row fl">
            <div class="w_left_br5_1 fl"></div>
            <div class="w_left_br5_2 fl"></div>
            <div class="w_left_br5_3 fl"></div>
            <div class="w_left_br5_4 fl"></div>
            <div class="w_left_br5_5 fl"></div>
            <div class="w_left_br5_6 fl"></div>
            <div class="w_left_br5_7 fl"></div>
            <div class="w_left_br5_8 fl"></div>
            <div class="w_left_br5_9 fl"></div>
            <div class="w_left_br5_10 fl"></div>
            <div class="w_left_br5_11 fl"></div>
            <div class="w_left_br5_12 fl"></div>
            <div class="w_left_br5_13 fl"></div>
            <div class="w_left_br5_14 fl"></div>
            <div class="w_left_br5_15 fl"></div>
            <div class="w_left_br5_16 fl"></div>
            <div class="w_left_br5_17 fl"></div>
            <div class="w_left_b5_18 fl"></div>
        </div>
        <div class="w_left_row fl">
            <div class="w_left_br6_1 fl"></div>
            <div class="w_left_br6_2 fl"></div>
            <div class="w_left_br6_3 fl"></div>
            <div class="w_left_br6_4 fl"></div>
            <div class="w_left_br6_5 fl"></div>
            <div class="w_left_br6_6 fl"></div>
            <div class="w_left_br6_7 fl"></div>
            <div class="w_left_br6_8 fl"></div>
            <div class="w_left_br6_9 fl"></div>
            <div class="w_left_br6_10 fl"></div>
            <div class="w_left_br6_11 fl"></div>
            <div class="w_left_br6_12 fl"></div>
            <div class="w_left_br6_13 fl"></div>
            <div class="w_left_br6_14 fl"></div>
            <div class="w_left_br6_15 fl"></div>
            <div class="w_left_br6_16 fl"></div>
            <div class="w_left_br6_17 fl"></div>
            <div class="w_left_b6_18 fl"></div>
        </div>
        <div class="w_left_row fl">
            <div class="w_left_br7_1 fl"></div>
            <div class="w_left_br7_2 fl"></div>
            <div class="w_left_br7_3 fl"></div>
            <div class="w_left_br7_4 fl"></div>
            <div class="w_left_br7_5 fl"></div>
            <div class="w_left_br7_6 fl"></div>
            <div class="w_left_br7_7 fl"></div>
            <div class="w_left_br7_8 fl"></div>
            <div class="w_left_br7_9 fl"></div>
            <div class="w_left_br7_10 fl"></div>
            <div class="w_left_br7_11 fl"></div>
            <div class="w_left_br7_12 fl"></div>
            <div class="w_left_br7_13 fl"></div>
            <div class="w_left_br7_14 fl"></div>
            <div class="w_left_br7_15 fl"></div>
            <div class="w_left_br7_16 fl"></div>
            <div class="w_left_br7_17 fl"></div>
            <div class="w_left_b7_18 fl"></div>
        </div>
        <div class="w_left_row fl">
            <div class="w_left_br8_1 fl"></div>
            <div class="w_left_br8_2 fl"></div>
            <div class="w_left_br8_3 fl"></div>
            <div class="w_left_br8_4 fl"></div>
            <div class="w_left_br8_5 fl"></div>
            <div class="w_left_br8_6 fl"></div>
            <div class="w_left_br8_7 fl"></div>
            <div class="w_left_br8_8 fl"></div>
            <div class="w_left_br8_9 fl"></div>
            <div class="w_left_br8_10 fl"></div>
            <div class="w_left_br8_11 fl"></div>
            <div class="w_left_br8_12 fl"></div>
            <div class="w_left_br8_13 fl"></div>
            <div class="w_left_br8_14 fl"></div>
            <div class="w_left_br8_15 fl"></div>
            <div class="w_left_br8_16 fl"></div>
            <div class="w_left_br8_17 fl"></div>
            <div class="w_left_b8_18 fl"></div>
        </div>
        <div class="w_left_row fl">
            <div class="w_left_br9_1 fl"></div>
            <div class="w_left_br9_2 fl"></div>
            <div class="w_left_br9_3 fl"></div>
            <div class="w_left_br9_4 fl"></div>
            <div class="w_left_br9_5 fl"></div>
            <div class="w_left_br9_6 fl"></div>
            <div class="w_left_br9_7 fl"></div>
            <div class="w_left_br9_8 fl"></div>
            <div class="w_left_br9_9 fl"></div>
            <div class="w_left_br9_10 fl"></div>
            <div class="w_left_br9_11 fl"></div>
            <div class="w_left_br9_12 fl"></div>
            <div class="w_left_br9_13 fl"></div>
            <div class="w_left_br9_14 fl"></div>
            <div class="w_left_br9_15 fl"></div>
            <div class="w_left_br9_16 fl"></div>
            <div class="w_left_br9_17 fl"></div>
            <div class="w_left_b9_18 fl"></div>
        </div>
        <div class="w_left_row fl">
            <div class="w_left_br10_1 fl"></div>
            <div class="w_left_br10_2 fl"></div>
            <div class="w_left_br10_3 fl"></div>
            <div class="w_left_br10_4 fl"></div>
            <div class="w_left_br10_5 fl"></div>
            <div class="w_left_br10_6 fl"></div>
            <div class="w_left_br10_7 fl"></div>
            <div class="w_left_br10_8 fl"></div>
            <div class="w_left_br10_9 fl"></div>
            <div class="w_left_br10_10 fl"></div>
            <div class="w_left_br10_11 fl"></div>
            <div class="w_left_br10_12 fl"></div>
            <div class="w_left_br10_13 fl"></div>
            <div class="w_left_br10_14 fl"></div>
            <div class="w_left_br10_15 fl"></div>
            <div class="w_left_br10_16 fl"></div>
            <div class="w_left_br10_17 fl"></div>
            <div class="w_left_b10_18 fl"></div>
        </div>
        <div class="w_left_row fl">
            <div class="w_left_r11_1 fl"></div>
            <div class="w_left_r11_2 fl"></div>
            <div class="w_left_r11_3 fl"></div>
            <div class="w_left_r11_4 fl"></div>
            <div class="w_left_r11_5 fl"></div>
            <div class="w_left_r11_6 fl"></div>
            <div class="w_left_r11_7 fl"></div>
            <div class="w_left_r11_8 fl"></div>
            <div class="w_left_r11_9 fl"></div>
            <div class="w_left_r11_10 fl"></div>
            <div class="w_left_r11_11 fl"></div>
            <div class="w_left_r11_12 fl"></div>
            <div class="w_left_r11_13 fl"></div>
            <div class="w_left_r11_14 fl"></div>
            <div class="w_left_r11_15 fl"></div>
            <div class="w_left_r11_16 fl"></div>
            <div class="w_left_r11_17 fl"></div>
            <div class="w_left_b11_18 fl"></div>
        </div>

    </div>
    <!-- 左边 E-->
    <!-- 右边 B-->
    <div class="w_right fr">
        <!-- 上边 B-->
        <div class="w_right_up">
            <p class="up_font">第一局</p>
        </div>
        <!-- 上边 E-->
    </div>
    <!-- 右边 E-->
</div>
<!-- 整体 E-->
</body>
</html>

 

图片：