国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

網(wǎng)頁(yè)版別踩白塊游戲

fobnn / 3064人閱讀

摘要：別踩白塊白塊黑塊游戲初始化根據(jù)前面的部分我們可以知道，每個(gè)就代表一個(gè)白塊，就代表一個(gè)黑塊，每點(diǎn)擊一個(gè)黑塊消失其實(shí)是刪除了一個(gè)，然后從上面添加一個(gè)新的。所以我們首先要通過(guò)來(lái)控制的創(chuàng)造和生成記得刪除在編寫靜態(tài)頁(yè)面時(shí)候指定生成的個(gè)。

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

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

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

頁(yè)面布局

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




    
    別踩白塊
    


    

        

            

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

游戲初始化

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

就代表一個(gè)白塊，
就代表一個(gè)黑塊，每點(diǎn)擊一個(gè)黑塊消失其實(shí)是刪除了一個(gè)
，然后從上面添加一個(gè)新的
。所以我們首先要通過(guò) js 來(lái)控制
的創(chuàng)造和生成（記得刪除在編寫靜態(tài)頁(yè)面時(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è)
并且有四個(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)起來(lái)

在可以通過(guò) js 來(lái)創(chuàng)造和銷毀 div 后，我們就要讓黑塊動(dòng)起來(lái)，這個(gè)時(shí)候我們就用到了之前css提到的設(shè)定

隱藏了一行的
，我們通過(guò) 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)起來(lái)之后呢，就要考慮用戶有沒有點(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)了，剩下來(lái)的就是將這些方法組合起來(lái)，組成完整的邏輯關(guān)系。

完整代碼




    
    別踩白塊
    



    
score

    
0

祝大家早日富可敵國(guó)，bye~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/54645.html

相關(guān)文章

  • 網(wǎng)頁(yè)版別踩白塊游戲

    摘要：別踩白塊白塊黑塊游戲初始化根據(jù)前面的部分我們可以知道，每個(gè)就代表一個(gè)白塊，就代表一個(gè)黑塊，每點(diǎn)擊一個(gè)黑塊消失其實(shí)是刪除了一個(gè)，然后從上面添加一個(gè)新的。所以我們首先要通過(guò)來(lái)控制的創(chuàng)造和生成記得刪除在編寫靜態(tài)頁(yè)面時(shí)候指定生成的個(gè)。 自己最近一直想做個(gè)小項(xiàng)目，但是自己代碼水平太爛了，做不了大系統(tǒng)，索性利用畢生所學(xué)寫個(gè)小游戲，哈哈哈別踩白塊這個(gè)游戲相信很多人都在手機(jī)上玩過(guò)，今天我們就來(lái)做一個(gè)網(wǎng)...

    0x584a 評(píng)論0 收藏0

  • 網(wǎng)頁(yè)版別踩白塊游戲

    摘要：別踩白塊白塊黑塊游戲初始化根據(jù)前面的部分我們可以知道，每個(gè)就代表一個(gè)白塊，就代表一個(gè)黑塊，每點(diǎn)擊一個(gè)黑塊消失其實(shí)是刪除了一個(gè)，然后從上面添加一個(gè)新的。所以我們首先要通過(guò)來(lái)控制的創(chuàng)造和生成記得刪除在編寫靜態(tài)頁(yè)面時(shí)候指定生成的個(gè)。 自己最近一直想做個(gè)小項(xiàng)目，但是自己代碼水平太爛了，做不了大系統(tǒng)，索性利用畢生所學(xué)寫個(gè)小游戲，哈哈哈別踩白塊這個(gè)游戲相信很多人都在手機(jī)上玩過(guò)，今天我們就來(lái)做一個(gè)網(wǎng)...

    focusj 評(píng)論0 收藏0

  • Python游戲開發(fā)，pyautogui模塊，Python自動(dòng)玩“別再踩白塊了“小游戲

    摘要：前言利用自動(dòng)玩別再踩白塊了這個(gè)小游戲，讓我們愉快地開始吧開發(fā)工具版本相關(guān)模塊模塊模塊模塊模塊以及一些自帶的模塊。環(huán)境搭建安裝并添加到環(huán)境變量，安裝需要的相關(guān)模塊即可。 ...

    youkede 評(píng)論0 收藏0

  • 手摸手帶你實(shí)現(xiàn) 小游戲<別踩白塊兒 -- 內(nèi)有游戲鏈接>

    摘要：別踩白塊兒使用白鷺引擎編寫的游戲游戲地址準(zhǔn)備工作了解白鷺引擎并安裝編寫工具安裝游戲引擎安裝創(chuàng)建項(xiàng)目創(chuàng)建項(xiàng)目可以選擇不同版本的引擎，創(chuàng)建成功之后還可以查看，對(duì)發(fā)布進(jìn)行設(shè)置。 別踩白塊兒 使用（白鷺引擎）Egret編寫的游戲 showImg(https://user-gold-cdn.xitu.io/2018/10/26/166af8033a59fdbf?w=500&h=840&f=gif...

    zhoutk 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<