欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實現(xiàn)別踩白塊兒小游戲程序

 更新時間:2015年11月22日 09:37:55   投稿:hebedich  
我們先看到的未開始的頁面黑色和白色方塊是隨機生成的,完了這么多把沒有發(fā)現(xiàn)時固定不變的。點擊一次方塊,程序需要判斷是黑色還是白色的。如果是黑色的,當然程序也是實現(xiàn)了一次自減,在動畫中是實現(xiàn)一次下移的,下移的時候點擊的方塊到黃顏色的區(qū)域會變成灰色

最近有朋友找我用JS幫忙仿做一個別踩白塊的小游戲程序,但他給的源代碼較麻煩,而且沒有注釋,理解起來很無力,我就以自己的想法自己做了這個小游戲,主要是應用JS對DOM和數(shù)組的操作。

程序思路:如圖:將游戲區(qū)域的CSS設(shè)置為相對定位、溢出隱藏;兩塊“游戲板”上分別排布著24塊方格,黑色每行隨機產(chǎn)生一個,“游戲板”向下滾動并交替顯示,將每個操作板的黑塊位置存入數(shù)組,每次點擊時將數(shù)組pop出來進行比對(我覺得亮點在這……)。

這里是游戲的GitHub地址,大家可以到里點擊中部菜單最右邊的的Download ZIP按鈕下載到桌面一試,HTML和JS,無需服務(wù)器。

下載地址

以下是具體實現(xiàn),關(guān)鍵部分有注釋。

HTML部分:

<!DOCTYPE html>

<html>

<head><title>別踩白塊</title></head>

<body>

<div id="gameZone"><div id="boardb" style="position: absolute;top: 0px;"></div></div>//初始化一個boardb,使ab同時存在

</body>

</html>

CSS部分:

復制代碼 代碼如下:
*{margin: 0px;padding: 0px;box-sizing: border-box;}  //簡單的reset一下,并用box-sizing設(shè)置盒子尺寸將邊框也計算進去,便于后面計算小方塊位置

#gameZone{width: 302px;height: 602px;border: 1px solid green;margin: 20px auto;position: relative;overflow: hidden;} //游戲區(qū)域,多兩個像素是為了除去邊框外還有足夠的300*600的空間

.square{width: 75px;height: 100px;float: left;border: 1px solid black;}

.squareBlack{width: 75px;height: 100px;border: 1px solid black;float: left;background: black;}//每個小方塊為75*100,并且設(shè)置黑色小方塊的背景色。

JS部分:

 這里分函數(shù)介紹:

全局變量初始化

var loc=600;//黑塊落地失敗判定

var count=0;//初始化擊中黑塊總數(shù)

var locArr=[];//初始化游戲板上黑塊位置的

var order=(function(){

    var ord="A";

    return function(){

    if(ord=='boarda')ord='boardb';

    else ord='boarda';

    return ord;

}

})()

//用閉包函數(shù)使每次創(chuàng)建的游戲板的ID為boarda與boardb,其實用一個全局變量也行,不過為了有點逼格。。。

每次點擊判定結(jié)果的函數(shù)

function judge(){

    var num=this.id.substr(3)//獲取元素的ID號

    if(num!=locArr.pop()){ //與位置數(shù)組pop出的對比

        clearTimeout(timer);

        alert("你的得分為:"+count+"分!");

        return; //失敗清除定時器,結(jié)算分數(shù)。

    }else{

        loc+=100; 

        this.style.background="silver";

        count+=1;//成功將落地標志加方格的高度,將方格背景色改變一下,擊中數(shù)+1

    }

    if(count!=0&&count%15==0){

        clearTimeout(timer);

        newtimer=50-count/15*5;

        timer=setInterval('fall()',newtimer);

    }//每擊中15個后將速度加快一點,這個式子可自行定義。

}

產(chǎn)生大框中小黑框位置的隨機數(shù),每次創(chuàng)建游戲板時調(diào)用此函數(shù),根據(jù)產(chǎn)生數(shù)定義小黑塊的位置

function generateRand(){

    var numArr=[];

    for(var j=0;j<6;j++){

        var num=Math.floor(Math.random()*4)+j*4;

        numArr.push(num);

    }

    return numArr;

}

每次調(diào)用在游戲區(qū)域的上方生成一個待往下滾動的游戲板,并將其黑色的部分的數(shù)字PUSH進locArr中

function drawBoard(){

    var temArr=generateRand();//這里應用一個臨時的位置數(shù)組,為了防止兩塊游戲板之間的位置沖突。

    locArr=temArr.concat(locArr);//將臨時數(shù)組相連到全局位置數(shù)組中

    var board=document.createElement('div');

    board.setAttribute('id',order());

    board.style.position="absolute";

    board.style.top='-600px';

    for(var i=0;i<24;i++){

        var ele=document.createElement('div');

        ele.setAttribute('id',"ele"+i);

        if(temArr.indexOf(i)>-1){  //判斷當前創(chuàng)建的小方塊的ID序列是否屬于臨時位置數(shù)組

            ele.setAttribute('class','squareBlack')

        }else{

            ele.setAttribute('class','square');

        }

        ele.addEventListener('click',judge,false); //給每一個小方格添加點擊判定函數(shù)judge

        board.appendChild(ele);

    }

    var gameZone=document.getElementById('gameZone');

    gameZone.appendChild(board);

}

找到腳本中存在的兩個游戲板,使其往下滾動

function fall(){

    gameZone=document.getElementById('gameZone');

    var boarda=document.getElementById('boarda');//因為ab兩個游戲板全局一直存在,所以不需要定義找不到時的邏輯

    var anowtop=parseInt(boarda.style.top);//因為獲取到的top位置是xxxpx類型,所以用一個parseInt()將其轉(zhuǎn)換為整數(shù)便于處理。

    if(anowtop==595){ //這里數(shù)目為595而不是600是因為在這一幀刪除后,下一幀正好600px,剛好使兩塊游戲板銜接完好。

        gameZone.removeChild(boarda);

        drawBoard();//刪除游戲區(qū)域的游戲板,并在最上方新生成一個。

    }

    anowtop+=5;

    boarda.style.top=anowtop+"px";

    var boardb=document.getElementById('boardb');

    var bnowtop=parseInt(boardb.style.top);

    if(bnowtop==595){

        gameZone.removeChild(boardb);

        drawBoard();

    }

    bnowtop+=5;

    boardb.style.top=bnowtop+"px";

    loc-=5;

    if(loc==0){

        clearTimeout(timer);

        alert("你的得分為:"+count+"分!");

        return;

    } //每一幀將落地判定減5,當落地判定為0時表示落地,結(jié)算分數(shù)。

}

將主體調(diào)用寫在window.onload函數(shù)里,使得頁面的游戲區(qū)域加載完成后再調(diào)用函數(shù)。

window.onload=function(){

    drawBoard();

    fall();

    var timer=setInterval('fall()',50);

}

游戲擴展:

增加頁面UI:因為一開始的HTML特別簡單,所以UI也很好修改,設(shè)置按鈕,點擊觸發(fā)開始函數(shù)。

改變游戲難度:修改setInterval的值,也可以對judge函數(shù)內(nèi)的間隔數(shù)目進行修改,或?qū)⑾侣浼铀俚谋磉_式優(yōu)化一下。

增加比分排行等:用ajax連接服務(wù)器,在游戲結(jié)束后將結(jié)果寫入數(shù)據(jù)庫,并引用數(shù)據(jù)中的排行榜。

改為街機模式:去除定時,修改judge函數(shù),使其每次點擊游戲板下落一個小方格的高度。設(shè)置總數(shù),開始計時,結(jié)束計時。

相關(guān)文章

最新評論