明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

如何完成頁面版別踩白塊的游戲 （代碼示例）

發(fā)表時(shí)間：2023-09-01 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章給大家?guī)淼膬?nèi)容是如何使用如何實(shí)現(xiàn)網(wǎng)頁版別踩白塊的游戲 （代碼示例） ，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。自己最近一直想做個(gè)小項(xiàng)目，但是自己代碼水平太爛了，做不了大系統(tǒng)，索性利用畢生所學(xué)寫個(gè)小游戲，哈哈哈別踩白塊這個(gè)游戲相信很多人都在手機(jī)上玩過，今天我們就來做一...
本篇文章給大家?guī)淼膬?nèi)容是如何使用如何實(shí)現(xiàn)網(wǎng)頁版別踩白塊的游戲 （代碼示例） ，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

自己最近一直想做個(gè)小項(xiàng)目，但是自己代碼水平太爛了，做不了大系統(tǒng)，索性利用畢生所學(xué)寫個(gè)小游戲，哈哈哈
別踩白塊這個(gè)游戲相信很多人都在手機(jī)上玩過，今天我們就來做一個(gè)網(wǎng)頁版的，先上一張游戲效果圖：

1503693920-5b98835f9b538_articlex.gif

不同于移動(dòng)端采用手指觸碰，網(wǎng)頁版需要我們用鼠標(biāo)點(diǎn)擊黑塊，黑塊才會(huì)消失。刷新頁面即可以開始游戲，這個(gè)小游戲最重要的部分代碼，初學(xué)者也能很快看懂。YES~

在開始之前，讓我們簡單分析下整個(gè)游戲的流程：一定的速度下移，點(diǎn)擊黑塊，黑塊消失，新的黑塊在普通游戲玩家眼中，應(yīng)該是游戲開始，黑塊以塊不斷向下移動(dòng)，若黑塊觸底則游戲結(jié)束；而以我們來說，可以將每一個(gè)黑塊和白塊抽象成一個(gè)個(gè)的數(shù)據(jù)結(jié)構(gòu)，黑塊的消失和出現(xiàn)其實(shí)就是 數(shù)據(jù)結(jié)構(gòu)的創(chuàng)造和銷毀，我們來看一張游戲的流程圖，對(duì)于要編寫的功能有一個(gè)大概的了解:

1186007412-5b98837f46499_articlex.png

頁面布局

可以用 div+css 布局來實(shí)現(xiàn)別踩白塊的靜態(tài)效果展示，直接上 HTML 代碼，我來簡要說下 HTML 思路，將主界面分解成一個(gè)4×4的大矩形格子，每一個(gè)方塊代表其中一個(gè)小的矩形格，其中每一行的四個(gè)白塊中有一個(gè)黑塊，每一行中黑塊位于那一列是隨機(jī)生成的，但是我們這里現(xiàn)在是靜態(tài)頁面就自己確定了，然后通過 css 控制樣式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>別踩白塊</title>
    <style type="text/css">
    </style>
</head>
<body>
    <div id="main">
        <div id="con">
            <div class="row">
                <div class="cell"></div>/*白塊*/
                <div class="cell black"></div>/*黑塊*/
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="row">
                <div class="cell"></div>
                <div class="cell black"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="row">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell black"></div>
                <div class="cell"></div>
            </div>
            <div class="row">
                <div class="cell black"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
        </div>
    </div>
</body>
<script>
</script>
</html>

游戲初始化

根據(jù)前面的 HTML 部分我們可以知道，每個(gè) <div class=”cell”> 就代表一個(gè)白塊，<div class=”cell black”> 就代表一個(gè)黑塊，每點(diǎn)擊一個(gè)黑塊消失其實(shí)是刪除了一個(gè) <div class=”row”> ，然后從上面添加一個(gè)新的 <div class=”row”> 。所以我們首先要通過 js 來控制 <div class=”row”> 的創(chuàng)造和生成（記得刪除在編寫靜態(tài)頁面時(shí)候指定生成的4個(gè) div.row）。具體方法如下：

//創(chuàng)建div, 參數(shù)className是其類名
    function creatediv(className){
        var div = document.createElement('div');
        div.className = className;
        return div;
    }

    // 創(chuàng)造一個(gè)<div class="row">并且有四個(gè)子節(jié)點(diǎn)<div class="cell">
    function createrow(){
        var con = $('con');
        var row = creatediv('row'); //創(chuàng)建div className=row
        var arr = creatcell(); //定義div cell的類名,其中一個(gè)為cell black

        con.appendChild(row); // 添加row為con的子節(jié)點(diǎn)

        for(var i = 0; i < 4; i++){
            row.appendChild(creatediv(arr[i])); //添加row的子節(jié)點(diǎn) cell
        }

        if(con.firstChild == null){
            con.appendChild(row);
        }else{
            con.insertBefore(row, con.firstChild);
        }
    }

    //刪除div#con的子節(jié)點(diǎn)中最后那個(gè)<div class="row">    
    function delrow(){
            var con = $('con');
            if(con.childNodes.length == 6) {
                   con.removeChild(con.lastChild);
               }
        }    

    //創(chuàng)建一個(gè)類名的數(shù)組，其中一個(gè)為cell black, 其余為cell
    function creatcell(){
        var temp = ['cell', 'cell', 'cell', 'cell',];
        var i = Math.floor(Math.random()*4);//隨機(jī)生成黑塊的位置
        temp[i] = 'cell black';
        return temp;
    }

讓黑塊動(dòng)起來

在可以通過 js 來創(chuàng)造和銷毀 div 后，我們就要讓黑塊動(dòng)起來，這個(gè)時(shí)候我們就用到了之前css提到的設(shè)定 <div id=”con”> 隱藏了一行的 <div id=”row”>，我們通過 js 的 DOM 操作使其向下方移動(dòng)，并設(shè)置定時(shí)器每30毫秒移動(dòng)一次，這樣就實(shí)現(xiàn)了黑塊的平滑移動(dòng)，在黑塊移動(dòng)的同時(shí)，我們要判斷黑塊是否已經(jīng)觸底，觸底則游戲失敗，停止調(diào)用 move()，觸底后調(diào)用函數(shù) fail() 游戲失敗，具體方法如下：

//使黑塊向下移動(dòng)    
    function move(){
        var con = $('con');
        var top = parseInt(window.getComputedStyle(con, null)['top']);

        if(speed + top > 0){
            top = 0;
        }else{
            top += speed;
        }            
        con.style.top = top + 'px';

        if(top == 0){
            createrow();
            con.style.top = '-100px';
            delrow();
        }else if(top == (-100 + speed)){
            var rows = con.childNodes;
            if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){
                fail();
            }
        }
    }

    function fail(){
            clearInterval(clock);
            confirm('你的最終得分為 ' + parseInt($('score').innerHTML) );
        }
點(diǎn)擊黑塊事件

讓黑塊動(dòng)起來之后呢，就要考慮用戶有沒有點(diǎn)擊到黑塊，用戶若點(diǎn)擊到黑塊我們要讓所在那一行消失，那么就需要一個(gè) judge 方法，具體如下：

//判斷用戶是否點(diǎn)擊到了黑塊，
function judge(ev){
    if (ev.target.className.indexOf('black') != -1) {
        ev.target.className = 'cell';
        ev.target.parentNode.pass = 1; //定義屬性pass，表明此行row的黑塊已經(jīng)被點(diǎn)擊
        score();
    }
}

這一步，幾個(gè)核心的功能點(diǎn)都已經(jīng)實(shí)現(xiàn)了，剩下來的就是將這些方法組合起來，組成完整的邏輯關(guān)系。

完整代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>別踩白塊</title>
    <style type="text/css">
        #score{
            text-align: center;}

        h2 {
            text-align: center;    }

        div{
            margin: 0 auto;
            width: 100px;
            height: 100px;}

        #main {
            width: 400px;
            height: 400px;
            background: white;
            border: 2px solid gray;
            margin: 0 auto;
            position: relative;
            overflow: hidden;}

        #con {
            width: 100%;
            height: 400px;
            position: relative;
            top: -100px;
            border-collapse:collapse;}

        .row{
            height: 100px;
            width: 100%;}

        .cell{
            height: 100px;
            width: 100px;
            float: left;}

        .black {
            background: black;}
    </style>
</head>
<body>

    <h2>score</h2>
    <h2 id="score">0</h2>
    <div id="main">
        <div id="con"></div>
    </div>
</body>
<script>
    var clock = null;
    var state = 0;
    var speed = 4;

        /*
        *    初始化 init
        */
        function init(){
            for(var i=0; i<4; i++){
                createrow();
            }

            // 添加onclick事件
            $('main').onclick = function(ev){
                judge(ev);
            }

            // 定時(shí)器 每30毫秒調(diào)用一次move()
                clock = window.setInterval('move()', 30);
        }

        // 判斷是否點(diǎn)擊黑塊
        function judge(ev){
            if (ev.target.className.indexOf('black') != -1) {
                ev.target.className = 'cell';
                ev.target.parentNode.pass = 1; //定義屬性pass，表明此行row的黑塊已經(jīng)被點(diǎn)擊
                score();
            }
        }

        // 游戲結(jié)束
        function fail(){
            clearInterval(clock);
            confirm('你的最終得分為 ' + parseInt($('score').innerHTML) );
        }

        // 創(chuàng)建div, className是其類名
        function creatediv(className){
            var div = document.createElement('div');
            div.className = className;
            return div;
        }

        // 創(chuàng)造一個(gè)<div class="row">并且有四個(gè)子節(jié)點(diǎn)<div class="cell">
        function createrow(){
            var con = $('con');
            var row = creatediv('row'); //創(chuàng)建div className=row
            var arr = creatcell(); //定義div cell的類名,其中一個(gè)為cell black

            con.appendChild(row); // 添加row為con的子節(jié)點(diǎn)

            for(var i = 0; i < 4; i++){
                row.appendChild(creatediv(arr[i])); //添加row的子節(jié)點(diǎn) cell
            }

            if(con.firstChild == null){
                con.appendChild(row);
            }else{
                con.insertBefore(row, con.firstChild);
            }
        }

        // 根據(jù)id來get DOM元素
        function $(id) {
            return document.getElementById(id);
        }

        // 創(chuàng)建一個(gè)類名的數(shù)組，其中一個(gè)為cell black, 其余為cell
        function creatcell(){
            var temp = ['cell', 'cell', 'cell', 'cell',];
            var i = Math.floor(Math.random()*4);
            temp[i] = 'cell black';
            return temp;
        }

        //讓黑塊動(dòng)起來
        function move(){
            var con = $('con');
            var top = parseInt(window.getComputedStyle(con, null)['top']);

            if(speed + top > 0){
                top = 0;
            }else{
                top += speed;
            }            
            con.style.top = top + 'px';

            if(top == 0){
                createrow();
                con.style.top = '-100px';
                delrow();
            }else if(top == (-100 + speed)){
                var rows = con.childNodes;
                if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){
                    fail();
                }
            }
        }

        // 加速函數(shù)
        function speedup(){
            speed += 2;
            if(speed == 20){
                alert('你超神了');
            }
        }

        //刪除某行
        function delrow(){
            var con = $('con');
            if(con.childNodes.length == 6) {
                   con.removeChild(con.lastChild);
               }
        }    

        // 記分
        function score(){
            var newscore = parseInt($('score').innerHTML) + 1;
            $('score').innerHTML = newscore;
            if(newscore % 10 == 0){
                speedup();
            }
        }

    init();
</script>
</html>

相關(guān)推薦：

Javascript小游戲之別踩白塊兒實(shí)例

HTML5網(wǎng)頁版黑白子五子棋游戲的示例代碼分享

以上就是如何實(shí)現(xiàn)網(wǎng)頁版別踩白塊的游戲 （代碼示例）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。