jquery之別踩白塊遊戲的實現

時間 2019-12-06

原文原文鏈接

　　轉載請註明出處http://www.cnblogs.com/Wxtrkbc/p/5687112.html javascript

　　前端學習要告一段落了，也沒機會寫什麼像樣的東西，而後無心中想起某人之前給我玩了一下別踩白塊的遊戲，手殘還被嘲諷了下，如今想起來以爲這遊戲實現起來也不難，因而上星期用jquery寫了一個別踩白塊的小遊戲，就像當初學python的時候同樣寫了一個2048。而後今天正好抽個時間寫個博客紀錄下，算是對前一段時間學習的總結，沒有玩過的能夠去下一個原版的來玩一下，遊戲很簡單，就是從不斷下落的方塊中點擊黑快，若是點擊到百塊或者有黑塊沒被點擊到，遊戲就算結束。遊戲實現起來不難，都是一些小知識點。當時寫的時候，腦殼有點糊，有一bug看了半天沒解決，後來次日早上腦殼清醒的時一看就看出來，順便在這裏提醒本身必定不要在腦殼不清醒的時候寫代碼。好了說了這麼多先來看一下效果圖，這裏別吐槽個人css樣式設計就好。。。css

1、遊戲html頁面

遊戲的html界面很是簡單，分爲4部分，html

得分標題欄，
遊戲界面主題容器，開始的時候爲一個div，而後用jquery動態生成黑白格子
開始暫停按鈕一欄
遊戲結束時候顯示的模態框

下面是代碼部分前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/game.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="main">
    <h3>Score:<span id="score">0</span></h3>
    <div id="content" class="content">
        <div id="inner"></div>
    </div>
    <div class="btn">
        <div class="container">
            <button id="begin">開始</button>
            <button id="stop">暫停</button>
        </div>
    </div>

    <div class="shadow hide"></div>
    <div class="alert-box hide">
        <div class="game-over">
            <img style="opacity: 0.8" src="../pic/gg.jpg">
        </div>
        <div class="btn">
            <button id="again">從新開始</button>
            <button id="back">返回</button>
        </div>
    </div>
</div>

<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/game.js"></script>

</body>
</html>

2、css佈局　　

寫完了html而後就是css，這裏主要用到 absolute佈局，而後須要注意的是就是遊戲過程因爲須要不停的生成一欄新div，因此div容器要設置overflow: hidden，這一點須要注意下，而後其餘的知識點也就是absolute，relative如何佈局，模態框如何實現並居中，都不難，下面看下代碼就好java

*{
    margin: 0;
    padding: 0;
}

.main{
    width: 808px;
    margin: 50px auto;
    background: gray;
    min-height: 544px;
    position: relative;
}
.content{
    width: 408px;
    margin: 0 auto;
    height:408px;
    border: 2px solid green;
    background-color: white;
    position: relative;
    top:0;
    overflow: hidden;
}
#inner{
    position: relative;
    top:-102px;
}
.item{
    height: 102px;
}
.item *{
    float: left;
    height: 100px;
    width: 100px;
    background-color: white;
    border: 1px solid black;
}
.black{
    background-color: black;
}

h3{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
h3 span{
    color:brown;
}
.hide{
    display: none;
}

.shadow{
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background-color: gray;
    opacity: 0.6;
}
.alert-box{
    position: absolute;
    width: 300px;
    height: 300px;
    left: 50%;
    top:50%;
    margin-left: -150px;
    margin-top: -150px;
    background-color: white;
}
.alert-box .game-over{
    margin-left: 20px;
    margin-top: 30px;
}
.alert-box .btn{
    width: 150px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
.main .btn .container{
    width: 150px;
    margin: 20px auto;
}
button{
    cursor: pointer;
    border: 0;
    display: inline-block;
    width: 70px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: cyan;
}

3、jquery實現　　

遊戲最核心的部分就是jquery實現了，主要的功能以下python

遊戲的初始化
如何動態插入一行div和刪除一行div
開始暫停按鈕的事件綁定
遊戲過程當中點擊百塊和黑快的事件委託
遊戲如何移動以及如何得分
如何自動增長白塊下落速度
如何斷定遊戲結束

　　下面來看一下初始化代碼的實現，初始化以前寫了個函數，自動插入一行，而且在這一行4個div中某一個爲隨機的黑塊供遊戲中點擊，剩下3個白塊，怎麼隨機生成，怎麼動態建立div這裏須要點小技巧，具體看下面。生成一行div的函數完成後只需在初始化函數裏面調用4次便可jquery

function insertDiv() {
    var rand = Math.floor(Math.random() * 4);　　　　　　　　// 生成一個0到3 的隨機數，用來做爲判斷生成黑塊的位置
    $("#inner").prepend("<div class='item'></div>");  
    $.each([0, 1, 2, 3], function (k, v) {
        if (v == rand) {
            $("#inner .item").first().append("<div class='black col'></div>"); 
        } else {
            $("#inner .item").first().append("<div class='col'></div>");
        }
    })
}


function init() {　　　　　　　　　　　　　　　　// 初始生成4*4的div
    $.each([0, 1, 2, 3], function () {
        insertDiv();
    });
}

　　初始化完成後，咱們須要作的就是如何讓界面動起來，這裏寫了一個函數，每次調用該函數的話，遊戲內容會自動向下移動幾px，而後將該函數傳給定時器，就能夠不斷的向下滑動，不過這裏須要注意，下落過程當中，若是下落的距離超過一行後，須要從新插入一行，而後將超出的那一行刪除，並且須要將偏移的距離恢復到原來的位置，若是須要加速白塊下落的速度，只需將每次向下移動加大便可，遊戲後面的自動加速也是基於此來作的。下面來看一下這部分的代碼app

function move() {
    var ctop = parseInt($("#inner").offset().top);
    ctop += window.globalSpeed;　　　　　　　　　　　　// 自定義的全局變量， 每次下落偏移的距離
    $("#inner").offset({top: ctop});
    if (ctop >= 114) {
        insertDiv();
        $("#inner").offset({top: 12}); 　　　　　　 // 恰好移動一個item後在上移一個item
        delDiv();
    }
}

以後就是寫開始，暫停部分，這裏主要是對計時器的使用，這裏須要注意的是每次點擊的時候，都要先判判定時器是否已經清除，不然這裏會有bug，下面來直接看一下代碼dom

function bindStart() {
    $("#begin").mouseover(function () {
        $(this).css("cursor", 'pointer');
    }).click(function () {
        if(window.globalIsClearT1){　　  　　　　// 自定義的全局變量，看定時器是否清楚

        }else {
            clearInterval(window.globalT1); 　　//沒有清除的話，先清除，避免兩次按下開始按鈕
        }
        window.globalT1 = setInterval(move, 30);
        window.globalStartClick = true;　　　　　　//全局變量，是否開始標誌位，只有開始了，才能點擊
    })
}

function bindStop() {
    $("#stop").mouseover(function () {
        $(this).css("cursor", 'pointer');
    }).click(function () {
        clearInterval(window.globalT1);
        window.globalStartClick = false;
        window.globalIsClearT1 = true;
    })
}

　　寫到這裏，再就是看一下，每次點擊的時候如何操做，是否得分，仍是點錯了遊戲結束，下面來看一下代碼，界面上有4*4個格子，須要事件委託，來判斷是哪個白塊被點擊，若是點擊的是黑快，將其變爲白塊，而且加上一分便可，不然點錯的話，遊戲就結束　ide

function bindClick() {
    $("#inner").click(function (e) {
        if (window.globalStartClick) {
            var current = $(e.target);
            if (current.hasClass("black")) {
                current.removeClass("black");
                score();
            } else {
                gameOver();
            }
        }
    })；
}

下面來看一下如何計算得分的代碼，以及如何實現自動的加速，比較簡單就很少說了

function score() {
    var score = parseInt($("#score").text());
    if(score%10 == 0){
        window.globalSpeed += 1;                //獲得必定的分數後就自動加速
    }
    $("#score").text(score + 1);
}

　　最後來看一下，遊戲結束的時候如何處理，遊戲結束的話，先暫停遊戲下落，而後彈出模態對話框，讓用戶選擇返回，仍是從新來過，從新來過的話，分數清零，遊戲界面清空，而後初始化再在自動觸發開始按鈕，開始下一輪遊戲，　　

function gameOver() {
    //暫停遊戲，顯示模態框
    $("#stop").trigger('click');
    window.globalIsClearT1 = true;
    $(".shadow").removeClass('hide').next().removeClass('hide');

    $("#again").click(function () {
        clearInterval(window.globalT1);
        $(".shadow").addClass('hide').next().addClass('hide');
        $("#score").text(0);
        clearAll();
        init();
        $("#begin").trigger('click');
        // window.globalT1 = setInterval(move, 30)
    });

到這裏，基本整個遊戲都算實現了，遊戲不復雜，可是要徹底運行起來，沒有bug也不是那麼簡單，有興趣的也能夠去寫寫，若是上面代碼有什麼問題的話，能夠向我提出來。　　

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。