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

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

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

實(shí)現(xiàn)思路

1、offsetTop，與style.top

2、我們看到的是白塊在向下運(yùn)動(dòng)，其實(shí)不是，政治運(yùn)動(dòng)的是裝著白塊的盒子，白塊只是被裝在了盒子里面被帶著向下，而向下運(yùn)動(dòng)也只是改變top值。同事盒子total的高度也不是無(wú)限長(zhǎng)的能一直向下運(yùn)動(dòng)，所以肯定是運(yùn)動(dòng)到某個(gè)地方他又回去了。

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

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">開(kāi)始游戲</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%;
}
 
 
/* 一個(gè)塊 */
 
.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、首先是點(diǎn)擊開(kāi)始游戲，里面的開(kāi)始運(yùn)動(dòng)  
    ///1、動(dòng)態(tài)生成每一行(createrow())，里面有4個(gè)小的div。需要點(diǎn)擊，當(dāng)總的行數(shù)大于5的時(shí)候，就刪除最下面的哪一行
    ///2、點(diǎn)擊黑色的div，就刪除所在的這一行。并且score分?jǐn)?shù)加一
    ///3、判斷點(diǎn)擊了白色盒子的話，游戲結(jié)束
    ///4、當(dāng)有包含黑色的行超過(guò)范圍區(qū)域時(shí)，游戲也結(jié)束fail()
 
    var score = document.querySelector('#score')
    var con = document.querySelector('#con')
    var start = document.querySelector('#start')
    start.innerHTML = '游戲開(kāi)始'
        //需要給按鈕加一個(gè)節(jié)流閥
    var flag = 0
    var timer = null //將timer變?yōu)橐粋€(gè)全局變量
    start.addEventListener('click', function() {
        if (start.innerHTML == '游戲開(kāi)始' && flag == 0) {
            //用一個(gè)定時(shí)器，每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)被點(diǎn)擊了
                } 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() {
        //什么時(shí)候開(kāi)始創(chuàng)建行呢？就是當(dāng)con的top值等于0的時(shí)候就創(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é)束--點(diǎn)擊了白色方塊，或者黑色方塊觸底
    }
 
    //動(dòng)態(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)黑塊被點(diǎn)擊了的行
        { //因?yàn)槿绻c(diǎn)擊和黑色塊，就會(huì)將這一行刪除，如果沒(méi)有點(diǎn)擊操作，就說(shuō)明沒(méi)有刪除行，那么就會(huì)多一行，因此當(dāng)長(zhǎng)度等于6的時(shí)候就說(shuō)明有黑色塊觸底
            fail()
        }
    }
    //黑色塊的點(diǎn)擊時(shí)間，其實(shí)是委托給row上面，倒不如直接再委托到con上面，用事件對(duì)象
 
    function fail() {
        clearInterval(timer)
        score.innerHTML = 0
        con.innerHTML = ''
        flag = 0
        speed = 3
        start.innerHTML = '游戲結(jié)束，得分' + scorenumber
 
    }
}

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

您可能感興趣的文章: