推箱子小遊戲

 遊戲製做（推箱子）：

① 作地圖（css+div）

②揹包+遊戲公告+表格高亮+圖片放大  //未實現

③箱子的移動（動態操做標籤） 

④遊戲登陸頁面（頁面傳值+正則表達式+cookie保存自動登陸）//未實現

⑤遊戲邏輯（js面向對象+js邏輯）

⑥後端用戶表通訊（jquery+ajax+json）//未實現

1.推箱子小遊戲js代碼：

邏輯思惟:

 1.佈局：建立對象（地圖、箱子、人）。

 2.人的移動：

     人移動前要判斷前面是否有牆壁，若是有則不能移動，不然移動。
     人移動前要判斷前面是否有箱子，若是有則箱子移動、人移動。
     箱子移動前要判斷前面是否有箱子，若是有則不動，不然箱子移動，人移動。
     箱子移動前要判斷前面是否有牆壁，若是有則不動，不然箱子移動，人移動。
     判斷箱子位置和終點位置是否相等，相等則成功。

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

var Game = {
    gk:[
        {//關卡1
            map:[//0：移動區域，1：固定區域，2：牆壁，3：箱子最終位置
                1, 1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 2, 0, 3, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 2, 2, 0, 3, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 2, 0, 0, 0, 3, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                2, 2, 0, 0, 0, 0, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                2, 0, 0, 2, 0, 0, 0, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                2, 0, 0, 0, 0, 0, 0, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
            ],
            box:[
                {x: 4, y: 3},
                {x: 4, y: 5},
                {x: 5, y: 5}
            ],
            person:{x: 3, y: 6}
        },

        {//關卡2
            map:[
                1, 1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 2, 0, 3, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 2, 2, 0, 3, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 2, 0, 0, 0, 3, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                2, 2, 0, 0, 0, 3, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                2, 0, 0, 2, 0, 0, 0, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                2, 0, 0, 0, 0, 0, 0, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
            ],
            box:[
                { x: 4, y: 3 },
                { x: 3, y: 4 },
                { x: 4, y: 5 },
                { x: 5, y: 5 }

            ],
            person: { x: 3, y: 6 }
        }
    ],

    init: function (Parent) {//構造函數模式:1.沒有顯式的建立對象 2.直接將屬性和方法賦給了this對象 3.沒有return語句
        this.Parent = Parent;
        this.Now = 0;//判斷是第幾關
        this.createMap(this.Now);
    },

    createMap: function(Now) {//建立地圖
        this.Parent.empty();//empty() 方法從被選元素移除全部內容，包括全部文本和子節點
        document.title = "第" +(Now + 1)+"關";
        document.getElementById("up_font").innerText = "第" +(Now + 1)+"關";//第幾關
        this.newJson = this.gk[Now];//關卡布局

        this.Parent.css({"width": this.newJson.map.length / 11 * 53,
            "height": this.newJson.map.length /18 * 53});//this.newJson.map.length 求的是map的面積 11*18


        var mapHtml = '';
        $.each(this.newJson.map, $.proxy(function (i, elem) {//遍歷map[],建立<div>
            mapHtml += '<div class="pos' + elem + '"></div>';//爲建立的div添加 class樣式
        }, this));
        this.Parent.append(mapHtml);//將建立的<div>添加到 id=#w_left的<div> 裏

        this.createBox();
        this.createPerson();
    },

    createBox: function () {//建立箱子佈局
        $.each(this.newJson.box, $.proxy(function (i, elem) {//遍歷box[],建立<div>
            var BoxHtml = $('<div class="box"></div>');//爲建立的div添加 class樣式
            BoxHtml.css({'left': elem.x * 53, 'top': elem.y *53});//爲建立的div添加 css樣式
            this.Parent.append(BoxHtml);//將建立的<div>添加到 id=#w_left的<div> 裏
        }, this));
    },

    createPerson: function () {//建立人物所在的位置
        var oPerson = $('<div class="person"></div>')//爲建立的div添加 class樣式
        var pos = this.newJson.person;//得到父類
        oPerson.css({'left': pos.x * 53, 'top': pos.y * 53});
        oPerson.data('x', pos.x);//緩存在oPerson上的數據
        oPerson.data('y', pos.y);
        this.Parent.append(oPerson);//將建立的<div>添加到 id=#w_left的<div> 裏
        this.bindPerson(oPerson);
    },

    bindPerson: function (oPerson) {//綁定對人物←↑→↓操做
        $(document).keydown($.proxy(function (e) {
            switch (e.which) {
                case 37: //←
                    oPerson.css('backgroundPosition', '-159px 0');//設置人的設置背景圖像的位置,以人的左上角爲原點
                    this.movePerson(oPerson, {x: -1});//一次移動的距離
                    break;
                case 38: //↑
                    oPerson.css("backgroundPosition", "0 0");
                    this.movePerson(oPerson, { y: -1 });
                    break;
                case 39: //→
                    oPerson.css("backgroundPosition", "+53px 0");
                    this.movePerson(oPerson, { x: 1 });
                    break;
                case 40: //↓
                    oPerson.css("backgroundPosition", "106px 0");
                    this.movePerson(oPerson, { y: 1 });
                    break;
                default:

            }
        }, this));

    },


    movePerson: function (oPerson, move) {//移動人物
        var xValue = move.x || 0;//number類型 邏輯或的做用：move有值則爲move的值，不然值爲0
        var yValue = move.y || 0;//獲取y的值

        var length = this.newJson.map.length / 11;//map[]的寬

        // 獲取人在map[]上的索引， 列數+行數*長度
        // data() 方法向被選元素附加數據，或者從被選元素獲取數據。也是以一種鍵值對的形式存在。
        var currentMapIndex = (oPerson.data('x') + xValue) + (oPerson.data('y') + yValue) * length;

        if (this.newJson.map[currentMapIndex] != 2) {//若是不是牆壁
            //改變人的位置
            oPerson.data('x', oPerson.data('x') + xValue);
            oPerson.data('y', oPerson.data('y') + yValue);
            oPerson.css({ "left": oPerson.data("x") * 53, "top": oPerson.data("y") * 53 });

            $(".box").each($.proxy(function (i, elem) {
                //當人和箱子發生碰撞時 遇到牆的判斷
                if (this.pz(oPerson, $(elem)) &&
                    this.newJson.map[(oPerson.data('x') + xValue) + (oPerson.data('y') + yValue) * length] != 2) {//若是不是牆
                    //根據人的位置，改變箱子的位置
                    $(elem).css({ 'left': (oPerson.data('x') + xValue) * 53, 'top': (oPerson.data('y') + yValue) * 53 });

                    $(".box").each($.proxy(function (j, elem2) {
                        //當遇到箱子和箱子的的碰撞時 同時前面也不是牆的判斷
                        if (this.pz($(elem), $(elem2)) && elem != elem2) {
                            //箱子位置還原
                            $(elem).css({ 'left': oPerson.data('x') * 53, 'top': oPerson.data('y') * 53 });
                            //人位置還原
                            oPerson.data('x', oPerson.data('x') - xValue);
                            oPerson.data('y', oPerson.data('y') - yValue);
                            oPerson.css({ "left": oPerson.data("x") * 53, "top": oPerson.data("y") * 53 });
                        }
                    }, this));
                }
                if (this.pz(oPerson, $(elem))) {//人和牆之間的碰撞
                    //人位置還原
                    oPerson.data('x', oPerson.data('x') - xValue);
                    oPerson.data('y', oPerson.data('y') - yValue);
                    oPerson.css({ "left": oPerson.data("x") * 53, "top": oPerson.data("y") * 53 });
                }
            }, this));
        }
        this.nextShow();
    },

    nextShow: function () {//判斷是否贏
        var iNum = 0;
        //綠色區域所在的位置是否所有被箱子所佔據
        $(".box").each($.proxy(function (i, elem) {
            $(".pos3").each($.proxy(function (j, elem1) {
                if (this.pz($(elem), $(elem1))) {
                    iNum++;
                }
            }, this));
        }, this));
        if (iNum == this.newJson.box.length) {
            if(this.Now < 1) {
                this.Now++;
                this.createMap(this.Now);
            }else {
                setTimeout('alert("過關")', 50);
                setTimeout('document.location.reload()', 55);
            }
        }

    },

    pz: function (obj1, obj2) { //碰撞檢測
        var L1 = obj1.offset().left;//獲取元素距離頁面左側距離
        var R1 = obj1.offset().left + obj1.width();
        var T1 = obj1.offset().top;//獲取元素距離頁面頂端高度
        var B1 = obj1.offset().top + obj1.height();

        var L2 = obj2.offset().left;
        var R2 = obj2.offset().left + obj2.width();
        var T2 = obj2.offset().top;
        var B2 = obj2.offset().top + obj2.height();
        if (L1 >= R2 || T1 >= B2 || R1 <= L2 || B1 <= T2 )
        { return false; }
        else
        { return true; }
    }
};

 

2.推箱子的index.css代碼：

/*總體 B*/
.whole {
    width: 1150px;
    height: 600px;
    background-color: #999999;
    margin:5px auto;
}
/*總體 E*/
/*左邊 B*/
.w_left {
    margin-top: 7px;
    margin-left: 10px;
    border-top: 3px solid black;
    border-left: 3px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    position: relative;
}

.pos0 {
    width: 51px;
    height: 51px;
    float: left;
    background: #39ffff;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

.pos1 {
    width: 51px;
    height: 51px;
    float: left;
    background: #39ffff;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

.pos2 {
    width: 51px;
    height: 51px;
    float: left;
    background: white;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

.pos3 {
    width: 51px;
    height: 51px;
    float: left;
    background: #67b168;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

.box {
    width: 51px;
    height: 51px;
    position: absolute;
    background-color: yellow;
}

.person {
    width: 51px;
    height: 51px;
    position: absolute;
    background-color: red;
}
/*左邊 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>
    <!-- 左邊 E-->
    <!-- 右邊 B-->
    <div class="w_right fr">
        <!-- 上邊 B-->
        <div class="w_right_up">
            <p class="up_font" id="up_font"></p>
        </div>
        <!-- 上邊 E-->
    </div>
    <!-- 右邊 E-->
</div>
<!-- 總體 E-->
</body>
</html>