最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這篇文章主要介紹怎么實(shí)現(xiàn)網(wǎng)頁版別踩白塊游戲，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來堅(jiān)持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于網(wǎng)站建設(shè)、做網(wǎng)站、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！

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

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

在開始之前，讓我們簡(jiǎn)單分析下整個(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è)大概的了解:

頁面布局

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

    
    
    


    

        

            

                
/*白塊*/
                
/*黑塊*/
                

                

            
            

                

                

                

                

            
            

                

                

                

                

            
            

                

                

                

                

            
        
    

游戲初始化

根據(jù)前面的 HTML 部分我們可以知道，每個(gè)

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

    // 創(chuàng)造一個(gè)
并且有四個(gè)子節(jié)點(diǎn)

    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è)
    
    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)    
    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();
    }
}

    
    
    



    
score
    
0