HTML+JS實現(xiàn)經(jīng)典推箱子游戲

更新時間：2022年11月10日 09:13:50 作者：橙子!

今天，這篇文章將利用HTML，CSS，JS的知識編寫一個童年經(jīng)典游戲?-?推箱子，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1. 效果展示

2. 游戲介紹

經(jīng)典的推箱子是一個非常古老游戲，甚至是80，90年代的回憶，目的是在訓(xùn)練你的邏輯思考能力。

在一個狹小的倉庫中，要求把木箱放到指定的位置，稍不小心就會出現(xiàn)箱子無法移動或者通道被堵住的情況，所以需要巧妙的利用有限的空間和通道，合理安排移動的次序和位置，才能順利的完成任務(wù)。

在移動箱子的過程中，是對你的思維能力的一個訓(xùn)練，今天這款推箱子正是童年的回憶，但是我們的目的是為了通過學(xué)習(xí)源碼的形式，來學(xué)習(xí)前端開發(fā)的知識，熟練掌握HtML標(biāo)簽，CSS屬性和JS邏輯的知識。

3. 游戲規(guī)則

我們的目標(biāo)是把箱子移動到指定的地點，該地點標(biāo)注為空，當(dāng)我們順利的把箱子移動的指定的位置時，標(biāo)注為滿。請你盡量不要把箱子推動到角落，那樣，你將無法移動它。例如：

我們可以選擇不同的關(guān)卡進(jìn)行闖關(guān)，大家在學(xué)習(xí)的過程中也可以添加不同的關(guān)卡，這樣達(dá)到熟練掌握常用標(biāo)簽和屬性的目的。例如：

4. 源碼學(xué)習(xí)

部分HTML代碼：

 <div class="menu" onclick="newgame()">開始新游戲</div>
    <div class="menu" onclick="continuegame()">繼續(xù)游戲</div>
    <div class="menu" onclick="select()">選關(guān)</div>
    <div class="menu" onclick="closewindow()">退出游戲</div>
    <table id="g">
        <tr>
            <td>
                <div class="choice" onclick=start(0)>1</div>
            </td>
            <td>
                <div class="choice" onclick=start(1)>2</div>
            </td>
            <td>
                <div class="choice" onclick=start(2)>3</div>
            </td>
        </tr>
    </table>
    <div class="win" id="notlast" onclick=next(progress)>下一關(guān)</div>
    <div class="win" onclick=returnselect()>選擇關(guān)卡</div>
    <div class="win" onclick=back()>返回</div>
    <div class="side" id="side1" onclick=continuegame()>重試</div>
    <div class="side" id="side2" onclick=leave()>返回</div>

部分樣式代碼：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url(./pic.jpg);
            background-size: 100%;
            color: whitesmoke;
            text-align: center;

        }

        h1 {
            font:normal bold 100px 楷體;
            -webkit-font-smoothing: antialiased;
            padding:50px;
        }

        table,
        .menu,
        .choice,
        .win {
            margin: 0 auto;
        }

        div {
            width: 180px;
        }

        td div {
            width: 75px;
            height: 75px;
            margin: 5px;
            border-radius: 5px;
            font-size: 60px;
            line-height: 75px;
            display: none;
        }

        .menu,
        .win {
            position: relative;
            background-color: #6781e0;
            width: 360px;
            height: 80px;
            margin-bottom: 40px;
            line-height: 74px;
            font-size: 50px;
            font-family: "WDKT";
            box-shadow:
                1px 1px 0px #5d77dd,
                2px 2px 0px #5f79de,
                3px 3px 0px #617bdf,
                4px 4px 0px #637de0;
            text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
            border-radius: 40px;
        }

        .side {
            position: relative;
            background-color: #6781e0;
            width: 240px;
            height: 80px;
            margin-bottom: 40px;
            line-height: 74px;
            font-size: 50px;
            font-family: "WDKT";
            box-shadow:
                1px 1px 0px #5d77dd,
                2px 2px 0px #5f79de,
                3px 3px 0px #617bdf,
                4px 4px 0px #637de0;
            text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
            border-radius: 40px;
        }

        .choice {
            background-color: #6781e0;
            width: 80px;
            height: 80px;
            margin: 10px;
            line-height: 74px;
            font-size: 60px;
            font-family: "包圖小白體";
            box-shadow:
                1px 1px 0px #5d77dd,
                2px 2px 0px #5f79de,
                3px 3px 0px #617bdf,
                4px 4px 0px #637de0;
            border-radius: 5px;
        }

        .menu:hover {
            transform: translateX(1px) translateY(3px);
        }

        .choice:hover {
            transform: translateX(1px) translateY(3px);
        }

        .win:hover {
            transform: translateX(1px) translateY(3px);
        }

        .side:hover {
            transform: translateX(1px) translateY(3px);
        }

        #g {
            margin-left: 400px;
            display: none;
        }

        .win,
        .side {
            display: none;
        }

        #side1 {
            position: absolute;
            right: 150px;
            top: 200px;
        }

        #side2 {
            position: absolute;
            right: 150px;
            top: 600px;
        }

    </style>

部分邏輯代碼：

    function up() {
        if (copy[py - 1][px] == 0 || copy[py - 1][px] == 3) {
            if (copy[py][px] == 4) {
                document.getElementById(names[py][px]).innerHTML = "";
                copy[py][px] = 0;
            }
            else if (copy[py][px] == 6) {
                document.getElementById(names[py][px]).innerHTML = "??";
                copy[py][px] = 3;
            }
            if (copy[py - 1][px] == 3) {
                document.getElementById(names[py - 1][px]).innerHTML = "??";
                copy[py - 1][px] = 6;
            }
            else if (copy[py - 1][px] == 0) {
                document.getElementById(names[py - 1][px]).innerHTML = "??";
                copy[py - 1][px] = 4;
            }
            py--;
        }
        else if ((copy[py - 1][px] == 2 || copy[py - 1][px] == 5) && (copy[py - 2][px] == 0 || copy[py - 2][px] == 3)) {
            if (copy[py][px] == 4) {
                document.getElementById(names[py][px]).innerHTML = "";
                copy[py][px] = 0;
            }
            else if (copy[py][px] == 6) {
                document.getElementById(names[py][px]).innerHTML = "??";
                copy[py][px] = 3;
            }
            if (copy[py - 1][px] == 2) {
                document.getElementById(names[py - 1][px]).innerHTML = "??";
                copy[py - 1][px] = 4;
            }
            else if (copy[py - 1][px] == 5) {
                document.getElementById(names[py - 1][px]).innerHTML = "??";
                copy[py - 1][px] = 6;
            }
            if (copy[py - 2][px] == 0) {
                document.getElementById(names[py - 2][px]).innerHTML = "??";
                copy[py - 2][px] = 2;
            }
            else if (copy[py - 2][px] == 3) {
                document.getElementById(names[py - 2][px]).innerHTML = "??";
                copy[py - 2][px] = 5;
            }
            py--;
        }
    }
    function down() {
        if (copy[py + 1][px] == 0 || copy[py + 1][px] == 3) {
            if (copy[py][px] == 4) {
                document.getElementById(names[py][px]).innerHTML = "";
                copy[py][px] = 0;
            }
            else if (copy[py][px] == 6) {
                document.getElementById(names[py][px]).innerHTML = "??";
                copy[py][px] = 3;
            }
            if (copy[py + 1][px] == 3) {
                document.getElementById(names[py + 1][px]).innerHTML = "??";
                copy[py + 1][px] = 6;
            }
            else if (copy[py + 1][px] == 0) {
                document.getElementById(names[py + 1][px]).innerHTML = "??";
                copy[py + 1][px] = 4;
            }
            py++;
        }
        else if ((copy[py + 1][px] == 2 || copy[py + 1][px] == 5) && (copy[py + 2][px] == 0 || copy[py + 2][px] == 3)) {
            if (copy[py][px] == 4) {
                document.getElementById(names[py][px]).innerHTML = "";
                copy[py][px] = 0;
            }
            else if (copy[py][px] == 6) {
                document.getElementById(names[py][px]).innerHTML = "??";
                copy[py][px] = 3;
            }
            if (copy[py + 1][px] == 2) {
                document.getElementById(names[py + 1][px]).innerHTML = "??";
                copy[py + 1][px] = 4;
            }
            else if (copy[py + 1][px] == 5) {
                document.getElementById(names[py + 1][px]).innerHTML = "??";
                copy[py + 1][px] = 6;
            }
            if (copy[py + 2][px] == 0) {
                document.getElementById(names[py + 2][px]).innerHTML = "??";
                copy[py + 2][px] = 2;
            }
            else if (copy[py + 2][px] == 3) {
                document.getElementById(names[py + 2][px]).innerHTML = "??";
                copy[py + 2][px] = 5;
            }
            py++;
        }
    }

以上就是HTML+JS實現(xiàn)經(jīng)典推箱子游戲的詳細(xì)內(nèi)容，更多關(guān)于JS推箱子游戲的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: