使用jquery實現別踩白塊小遊戲的方法範例

2022-04-11 19:00:30

前言

掘金真的是太懂了，寫遊戲的活動，想不參加都難！第一個，別踩白塊！

先來看效果~

如上圖所示，jkl三個鍵對應三列，左上是得分，得分右邊是時間（沒做倒計時。。。）敲擊對應的按鍵來進行遊戲，如果敲錯了就會彈出得分與所用時間

接下來就開始肢解這個小遊戲，來一步一步的分析究竟是怎麼實現的，let's go~

html

<body>
    <div class="main">
        <div id="score">0</div>
        <div id="time">00:00:00</div>
    </div>
    <div class="caption">別踩白塊!</div>
    <div class="container">
        <table id="tab">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <span class="font one">J</span>
        <span class="font two">K</span>
        <span class="font three">L</span>
    </div>
</body>

其他地方就是普通的div，中間的主體部分是用表格實現的，jkl置於表格的上方顯示

首頁字型

width: 300px;
font-size: 60px;
font-weight: bold;
text-align: center;
position: relative;
margin: 0 auto;
-webkit-text-fill-color: transparent;
/*文字的填充色*/
-webkit-text-stroke: 1.2px white;

重點的兩個屬性：最後兩個屬性-webkit-text-fill-color和-webkit-text-stroke，第一個是文字的填充顏色，第二個是文字的邊框顏色，最終形成這種效果

中間的表格

主體用的是table做的，四行三列，每一行都有一個黑塊在隨機的一列生成

Math.ceil(Math.random() * 3) - 1

Math.random()會取0-1的隨機小數，乘3是為了獲取1-3內的隨機小數，Math.ceil()向上取整，在減1，最後可以拿到三個可能的結果：0 1 2

實現每一行的黑塊隨機顯示

新建dom元素hang

var Game={
    ...
    hang: document.getElementsByTagName('tr');
    ...
}

為每一行的隨機列新增黑塊

//獲取列---------------------------------------------
Game.hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
Game.hang[1].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
Game.hang[2].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
Game.hang[3].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';

按鍵事件

鍵盤按下事件呼叫了兩個方法，一個是主方法key事件，另外一個是負責顯示jkl的color事件

key事件

key: function () {
            onkeydown = function (event) {
                if (Game.bool == true && (event.key == 'j' || event.key == 'k' || event.key == 'l')) {
                    Game.int = setInterval(Game.times, 10);
                    Game.bool = false;
                }
                switch (event.key) {
                    case 'j':
                        if (Game.hang[3].children[0].style.background == 'black') {
                            Game.speed();
                            Game.scores();
                        } else {
                            Game.over();
                            Game.begin()
                        }
                        break;
                    case 'k':
                        if (Game.hang[3].children[1].style.background == 'black') {
                            Game.speed();
                            Game.scores();
                        } else {
                            Game.over();
                            Game.begin()
                        }
                        break;
                    case 'l':
                        if (Game.hang[3].children[2].style.background == 'black') {
                            Game.speed();
                            Game.scores();
                        } else {
                            Game.over();
                            begin()
                        }
                        break;
                }
                Game.color();
            }
        }

第一塊if語句負責控制遊戲的開始和結束，當按下的按鍵是jkl的時候遊戲開始，Game.times是一個計時器的方法，每一秒去執行一下

times

times: function () {
           Game.mis += 1;
           if (Game.mis > 99) {
               Game.mis = 0;
               Game.sec += 1;
           }
           if (Game.sec > 59) {
               Game.sec = 0;
               Game.min += 1;
           }
           if (Game.min > 23) {
               Game.min = 0;
           }
           Game.begin();
       },

switch語句裡為主要邏輯，每個按鍵分為成功和失敗，如果當前按下的按鍵為黑色的話，執行speed方法和score方法

speed方法

speed: function () {
    Game.adds();
    Game.speedup();
    // 下面有介紹
},

score方法

scores: function () {
    Game.score += 1;
    Game.sco.innerHTML = Game.score;
},

將已經定好的score +1，返回給頁面

如果判斷按下的按鈕不是黑塊的話，執行結束的操作，即呼叫over()和begin()

over方法

over: function () {
    alert('遊戲結束,得分：' + Game.score + ';用時' + Game.time.innerHTML);
    clearInterval(Game.int);
    Game.mis = 0;
    Game.sec = 0;
    Game.min = 0;
    Game.score = 0;
    Game.sco.innerHTML = Game.score;
    Game.time.innerHTML = (Game.min < 10 ? "0" + Game.min : Game.min) + ":" + (Game.sec < 10 ? "0" + Game.sec : Game.sec) + ":" + (Game.mis < 10 ? "0" + Game.mis : Game.mis);
    Game.bool = true;
},

顯示遊戲結束的提示，將計時器，分數，遊戲狀態置為初始化，以便下次的重新開始

adds

adds: function () {
    Game.tab.insertRow(0);
    for (var i = 0; i < 3; i++) {
        Game.hang[0].insertCell();
    }
    Game.hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
},

此方法與下面的方法就是表格往下移動的主要函數

在最上面新增一行tr
給tr迴圈插入三個td
給三個td的隨機一個設定為黑色

speedup

speedup: function () {
    if (Game.btn == 0 || Game.btn % 150 != 0) {
        Game.tab.style.bottom = -Game.btn - 5 + 'px';
        Game.btn += 5;
        setTimeout(Game.speedup, 1);
    } else {
        clearTimeout(Game.speedup);
        Game.btn += 5;
    }
},

speedup方法給予了向下移動時的動畫效果

原始碼

直接扔進一個html裡就能玩

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>實驗</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100%;
            margin: 0 auto;
            background: linear-gradient(-45deg, purple, blue);
        }

        .container {
            margin: 0 auto;
            width: 470px;
            height: 630px;
            overflow: hidden;
            position: relative;
        }

        table {
            width: 464px;
            height: 612px;
            position: absolute;
            right: 0;
            bottom: 0;
            border-collapse: collapse;
        }

        td {
            width: 150px;
            height: 150px;
            border: 6px solid pink;
        }

        .main {
            color: white;
            text-align: center;
            /* vertical-align: middle; */
            font-size: 50px;
            position: absolute;
            top: 0;
            left: 0;
        }

        #score {
            display: inline-block;
            padding-right: 200px;
        }

        #time {
            display: inline-block;
        }

        .caption {
            width: 300px;
            font-size: 60px;
            font-weight: bold;
            text-align: center;
            position: relative;
            margin: 0 auto;
            -webkit-text-fill-color: transparent;
            /*文字的填充色*/
            -webkit-text-stroke: 1.2px white;
        }

        .font {
            color: transparent;
            display: inline-block;
            font-size: 60px;
            font-weight: bold;
            position: absolute;
        }

        .one {
            left: 14.5%;
            top: 81%;
        }

        .two {
            left: 45%;
            top: 81%;
        }

        .three {
            left: 79%;
            top: 81%;
        }
    </style>
</head>

<body>
    <div class="main">
        <div id="score">0</div>
        <div id="time">00:00:00</div>
    </div>
    <div class="caption">別踩白塊!</div>
    <div class="container">
        <table id="tab">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <span class="font one">J</span>
        <span class="font two">K</span>
        <span class="font three">L</span>
    </div>
</body>
<script>
    var Game = {
        // 屬性
        int: null,
        mis: 0,
        sec: 0,
        min: 0,
        score: 0,
        bool: true,
        btn: 0,
        tab: document.getElementsByTagName('table')[0],
        font: document.getElementsByTagName('span'),
        sco: document.getElementById('score'),
        time: document.getElementById('time'),
        hang: document.getElementsByTagName('tr'),
        // 方法
        times: function () {
            Game.mis += 1;
            if (Game.mis > 99) {
                Game.mis = 0;
                Game.sec += 1;
            }
            if (Game.sec > 59) {
                Game.sec = 0;
                Game.min += 1;
            }
            if (Game.min > 23) {
                Game.min = 0;
            }
            Game.begin();
        },
        color: function () {
            if (Game.hang[3].children[0].style.background == 'black') {
                Game.font[0].style.color = 'white';
            } else {
                Game.font[0].style.color = 'transparent';
            }
            if (Game.hang[3].children[1].style.background == 'black') {
                Game.font[1].style.color = 'white';
            } else {
                Game.font[1].style.color = 'transparent';
            }
            if (Game.hang[3].children[2].style.background == 'black') {
                Game.font[2].style.color = 'white';
            } else {
                Game.font[2].style.color = 'transparent';
            }
        },
        adds: function () {
            Game.tab.insertRow(0);
            for (var i = 0; i < 3; i++) {
                Game.hang[0].insertCell();
            }
            Game.hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
        },
        speedup: function () {
            if (Game.btn == 0 || Game.btn % 150 != 0) {
                Game.tab.style.bottom = -Game.btn - 5 + 'px';
                Game.btn += 5;
                setTimeout(Game.speedup, 1);
            } else {
                clearTimeout(Game.speedup);
                Game.btn += 5;
            }
        },
        speed: function () {
            Game.adds();
            Game.speedup();
        },
        scores: function () {
            Game.score += 1;
            Game.sco.innerHTML = Game.score;
        },
        over: function () {
            alert('遊戲結束,得分：' + Game.score + ';用時' + Game.time.innerHTML);
            clearInterval(Game.int);
            Game.mis = 0;
            Game.sec = 0;
            Game.min = 0;
            Game.score = 0;
            Game.sco.innerHTML = Game.score;
            Game.time.innerHTML = (Game.min < 10 ? "0" + Game.min : Game.min) + ":" + (Game.sec < 10 ? "0" + Game.sec : Game.sec) + ":" + (Game.mis < 10 ? "0" + Game.mis : Game.mis);
            Game.bool = true;
        },
        key: function () {
            onkeydown = function (event) {
                if (Game.bool == true && (event.key == 'j' || event.key == 'k' || event.key == 'l')) {
                    Game.int = setInterval(Game.times, 10);
                    Game.bool = false;
                }
                switch (event.key) {
                    case 'j':
                        if (Game.hang[3].children[0].style.background == 'black') {
                            Game.speed();
                            Game.scores();
                        } else {
                            Game.over();
                        }
                        break;
                    case 'k':
                        if (Game.hang[3].children[1].style.background == 'black') {
                            Game.speed();
                            Game.scores();
                        } else {
                            Game.over();
                        }
                        break;
                    case 'l':
                        if (Game.hang[3].children[2].style.background == 'black') {
                            Game.speed();
                            Game.scores();
                        } else {
                            Game.over();
                        }
                        break;
                }
                Game.color();
            }
        }
    }
    //獲取列---------------------------------------------
    Game.hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
    Game.hang[1].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
    Game.hang[2].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
    Game.hang[3].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';

    //--------------------------------------------------
    //鍵盤按下事件----------------------------------------
    Game.color();
    Game.key();
    //---------------------------------------------------
</script>
</html>

至此這個小遊戲也就完成了啦，希望對你有所幫助，再見~