JS實現(xiàn)別踩白塊游戲的示例代碼

更新時間：2022年05月16日 09:03:53 作者：一夕ξ

別踩白塊是一款音樂類休閑游戲，游戲的玩法不難，只需跟著音樂的節(jié)奏點中對的方塊即可。本文將用JavaScript實現(xiàn)這一經(jīng)典游戲，感興趣的可以了解一下

實現(xiàn)思路

1、offsetTop，與style.top

2、我們看到的是白塊在向下運動，其實不是，政治運動的是裝著白塊的盒子，白塊只是被裝在了盒子里面被帶著向下，而向下運動也只是改變top值。同事盒子total的高度也不是無限長的能一直向下運動，所以肯定是運動到某個地方他又回去了。

childNodes：由childNodes屬性返回的數(shù)組中包含著所有類型的節(jié)點，所有的屬性節(jié)點和文本節(jié)點也包含在其中。（不能亂用）

JS獲取元素的left和top值：

核心代碼

HTML代碼

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="3.css" rel="external nofollow" >
</head>
 
<body>
 
 
    <h2>
        <span>分?jǐn)?shù)：</span>
        <span id="score">0</span>
    </h2>
    <!-- 游戲區(qū) -->
    <div id="main">
        <div id="con">
 
        </div>
    </div>
    <div class="btn"><button id="start">開始游戲</button></div>
 
    <script src="3.js"></script>
</body>
 
</html>

CSS代碼

* {
    margin: 0;
    padding: 0
}
 
#main {
    width: 408px;
    height: 408px;
    margin: 0 auto;
    background: white;
    border: 2px solid gray;
    overflow: hidden;
}
 
#con {
    width: 100%;
    height: 400px;
    position: relative;
    border-collapse: collapse;
    top: -100px;
}
 
 
/* 行 */
 
.row {
    height: 100px;
    width: 100%;
}
 
 
/* 一個塊 */
 
.cell {
    height: 100px;
    width: 100px;
    float: left;
    border: rgb(54, 74, 129) 1px solid;
}
 
 
/* 黑塊 */
 
.black {
    background: black;
}
 
.btn {
    width: 100%;
    text-align: center;
}
 
button {
    width: 250px;
    height: 60px;
    border: 1px solid grey;
    margin-top: 20px;
    margin-bottom: 10px;
    background-color: rgb(162, 223, 146);
    font-size: 30px;
}
 
span {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    background-color: #fff;
    font-size: 20px;
    text-align: center;
}

JS代碼

window.onload = function() {
    //1、首先是點擊開始游戲，里面的開始運動  
    ///1、動態(tài)生成每一行(createrow())，里面有4個小的div。需要點擊，當(dāng)總的行數(shù)大于5的時候，就刪除最下面的哪一行
    ///2、點擊黑色的div，就刪除所在的這一行。并且score分?jǐn)?shù)加一
    ///3、判斷點擊了白色盒子的話，游戲結(jié)束
    ///4、當(dāng)有包含黑色的行超過范圍區(qū)域時，游戲也結(jié)束fail()
 
    var score = document.querySelector('#score')
    var con = document.querySelector('#con')
    var start = document.querySelector('#start')
    start.innerHTML = '游戲開始'
        //需要給按鈕加一個節(jié)流閥
    var flag = 0
    var timer = null //將timer變?yōu)橐粋€全局變量
    start.addEventListener('click', function() {
        if (start.innerHTML == '游戲開始' && flag == 0) {
            //用一個定時器，每50毫秒調(diào)用move（）
            timer = setInterval(move, [60])
            timer
            con.addEventListener('click', function(ec) {
                //  console.log(ec.target);
                console.log(ec.target.parentNode);
                if (ec.target.className == 'cell black') {
                    ec.target.className = 'cell'
                    addscore()
                    ec.target.parentNode.pass = 1 //表示我這一行的黑塊元素已經(jīng)被點擊了
                } else if (ec.target.className = 'cell') {
                    fail()
                }
            })
            flag = 1
 
        }
 
 
    })
 
 
    var speed = 3
    var scorenumber = 0
 
    function addscore() {
 
        scorenumber += 1
        score.innerHTML = scorenumber
        if (scorenumber % 10 == 0) {
            speed += 2
        }
    }
 
    function move() {
        //什么時候開始創(chuàng)建行呢？就是當(dāng)con的top值等于0的時候就創(chuàng)建一行
        var top = parseInt(window.getComputedStyle(con, null)['top']);
        if (speed + top > 0) {
            top = 0
        } else {
            top = top + speed
        }
        con.style.top = top + 'px'
        if (top == 0) {
            createrow()
            con.style.top = '-100px'
        } else {
            top = top + speed
        }
        //最多只讓row的數(shù)量等于5
        if (con.children.length >= 6) {
            con.removeChild(con.lastChild)
        }
        over()
            //什么情況下游戲結(jié)束--點擊了白色方塊，或者黑色方塊觸底
    }
 
    //動態(tài)創(chuàng)建行
    function createrow() {
        length = parseInt(con.children.length)
        var row = document.createElement('div')
        row.className = 'row'
        var nun = Math.floor(Math.random() * 4)
        for (i = 0; i < 4; i++) {
            var idiv = document.createElement('div')
            if (i == nun) {
                idiv.className = 'cell black'
            } else {
                idiv.className = 'cell'
            }
            row.appendChild(idiv)
        }
        if (length == 0) {
            con.appendChild(row)
        } else {
            con.insertBefore(row, con.firstChild)
        }
    }
    //黑色方塊觸底
    function over() {
        var rows = document.querySelectorAll('.row')
        if ((rows.length == 5) && (rows[rows.length - 1].pass != 1)) //怎么忽略掉已經(jīng)黑塊被點擊了的行
        { //因為如果點擊和黑色塊，就會將這一行刪除，如果沒有點擊操作，就說明沒有刪除行，那么就會多一行，因此當(dāng)長度等于6的時候就說明有黑色塊觸底
            fail()
        }
    }
    //黑色塊的點擊時間，其實是委托給row上面，倒不如直接再委托到con上面，用事件對象
 
    function fail() {
        clearInterval(timer)
        score.innerHTML = 0
        con.innerHTML = ''
        flag = 0
        speed = 3
        start.innerHTML = '游戲結(jié)束，得分' + scorenumber
 
    }
}

到此這篇關(guān)于JS實現(xiàn)別踩白塊游戲的示例代碼的文章就介紹到這了,更多相關(guān)JS別踩白塊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: