javascript實(shí)現(xiàn)別踩白塊兒小游戲程序
最近有朋友找我用JS幫忙仿做一個(gè)別踩白塊的小游戲程序，但他給的源代碼較麻煩，而且沒(méi)有注釋，理解起來(lái)很無(wú)力，我就以自己的想法自己做了這個(gè)小游戲，主要是應(yīng)用JS對(duì)DOM和數(shù)組的操作。
程序思路：如圖：將游戲區(qū)域的CSS設(shè)置為相對(duì)定位、溢出隱藏;兩塊“游戲板”上分別排布著24塊方格，黑色每行隨機(jī)產(chǎn)生一個(gè)，“游戲板”向下滾動(dòng)并交替顯示，將每個(gè)操作板的黑塊位置存入數(shù)組，每次點(diǎn)擊時(shí)將數(shù)組pop出來(lái)進(jìn)行比對(duì)（我覺(jué)得亮點(diǎn)在這……）。
這里是游戲的GitHub地址，大家可以到里點(diǎn)擊中部菜單最右邊的的Download ZIP按鈕下載到桌面一試，HTML和JS，無(wú)需服務(wù)器。
以下是具體實(shí)現(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>//初始化一個(gè)boardb,使ab同時(shí)存在 </body> </html>
CSS部分：
#gameZone{width: 302px;height: 602px;border: 1px solid green;margin: 20px auto;position: relative;overflow: hidden;} //游戲區(qū)域，多兩個(gè)像素是為了除去邊框外還有足夠的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;}//每個(gè)小方塊為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，其實(shí)用一個(gè)全局變量也行，不過(guò)為了有點(diǎn)逼格。。。
每次點(diǎn)擊判定結(jié)果的函數(shù)
function judge(){
var num=this.id.substr(3)//獲取元素的ID號(hào)
if(num!=locArr.pop()){ //與位置數(shù)組pop出的對(duì)比
clearTimeout(timer);
alert("你的得分為："+count+"分！");
return; //失敗清除定時(shí)器，結(jié)算分?jǐn)?shù)。
}else{
loc+=100;
this.style.background="silver";
count+=1;//成功將落地標(biāo)志加方格的高度，將方格背景色改變一下，擊中數(shù)+1
}
if(count!=0&&count%15==0){
clearTimeout(timer);
newtimer=50-count/15*5;
timer=setInterval('fall()',newtimer);
}//每擊中15個(gè)后將速度加快一點(diǎn)，這個(gè)式子可自行定義。
}
產(chǎn)生大框中小黑框位置的隨機(jī)數(shù)，每次創(chuàng)建游戲板時(shí)調(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ū)域的上方生成一個(gè)待往下滾動(dòng)的游戲板，并將其黑色的部分的數(shù)字PUSH進(jìn)locArr中
function drawBoard(){
var temArr=generateRand();//這里應(yīng)用一個(gè)臨時(shí)的位置數(shù)組，為了防止兩塊游戲板之間的位置沖突。
locArr=temArr.concat(locArr);//將臨時(shí)數(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){ //判斷當(dāng)前創(chuàng)建的小方塊的ID序列是否屬于臨時(shí)位置數(shù)組
ele.setAttribute('class','squareBlack')
}else{
ele.setAttribute('class','square');
}
ele.addEventListener('click',judge,false); //給每一個(gè)小方格添加點(diǎn)擊判定函數(shù)judge
board.appendChild(ele);
}
var gameZone=document.getElementById('gameZone');
gameZone.appendChild(board);
}
找到腳本中存在的兩個(gè)游戲板，使其往下滾動(dòng)
function fall(){
gameZone=document.getElementById('gameZone');
var boarda=document.getElementById('boarda');//因?yàn)閍b兩個(gè)游戲板全局一直存在，所以不需要定義找不到時(shí)的邏輯
var anowtop=parseInt(boarda.style.top);//因?yàn)楂@取到的top位置是xxxpx類型，所以用一個(gè)parseInt()將其轉(zhuǎn)換為整數(shù)便于處理。
if(anowtop==595){ //這里數(shù)目為595而不是600是因?yàn)樵谶@一幀刪除后，下一幀正好600px，剛好使兩塊游戲板銜接完好。
gameZone.removeChild(boarda);
drawBoard();//刪除游戲區(qū)域的游戲板，并在最上方新生成一個(gè)。
}
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，當(dāng)落地判定為0時(shí)表示落地，結(jié)算分?jǐn)?shù)。
}
將主體調(diào)用寫在window.onload函數(shù)里，使得頁(yè)面的游戲區(qū)域加載完成后再調(diào)用函數(shù)。
window.onload=function(){
drawBoard();
fall();
var timer=setInterval('fall()',50);
}
游戲擴(kuò)展:
增加頁(yè)面UI：因?yàn)橐婚_始的HTML特別簡(jiǎn)單，所以UI也很好修改，設(shè)置按鈕，點(diǎn)擊觸發(fā)開始函數(shù)。
改變游戲難度：修改setInterval的值，也可以對(duì)judge函數(shù)內(nèi)的間隔數(shù)目進(jìn)行修改，或?qū)⑾侣浼铀俚谋磉_(dá)式優(yōu)化一下。
增加比分排行等：用ajax連接服務(wù)器，在游戲結(jié)束后將結(jié)果寫入數(shù)據(jù)庫(kù)，并引用數(shù)據(jù)中的排行榜。
改為街機(jī)模式：去除定時(shí)，修改judge函數(shù)，使其每次點(diǎn)擊游戲板下落一個(gè)小方格的高度。設(shè)置總數(shù)，開始計(jì)時(shí)，結(jié)束計(jì)時(shí)。
相關(guān)文章
微信小程序訪問(wèn)mysql數(shù)據(jù)庫(kù)流程詳解
日常我們?cè)陂_發(fā)小程序的時(shí)候，總是希望把數(shù)據(jù)提交回?cái)?shù)據(jù)庫(kù)進(jìn)行存儲(chǔ)，那在小程序中該如何訪問(wèn)數(shù)據(jù)庫(kù)呢？本篇我們就介紹一下具體的思路2022-08-08
這篇文章主要介紹了詳解package.json版本號(hào)規(guī)則，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JS 對(duì)象屬性相關(guān)(檢查屬性、枚舉屬性等)
這篇文章主要介紹了JS 對(duì)象屬性相關(guān)(檢查屬性、枚舉屬性等),需要的朋友可以參考下2015-04-04
這篇文章主要介紹了簡(jiǎn)單的JavaScript互斥鎖的相關(guān)資料,需要的朋友可以參考下2014-02-02
微信小程序?qū)崿F(xiàn)簡(jiǎn)單計(jì)算器
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)懞?jiǎn)單計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)按字母排列選擇城市功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
Layui組件Table綁定行點(diǎn)擊事件和獲取行數(shù)據(jù)的方法
今天小編就為大家分享一篇Layui組件Table綁定行點(diǎn)擊事件和獲取行數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
詳解微信小程序之scroll-view的flex布局問(wèn)題
這篇文章主要介紹了詳解微信小程序之scroll-view的flex布局問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
Cpage.js給組件綁定事件的實(shí)現(xiàn)代碼
Cpage.js是一款輕量級(jí)的Mvvm框架，使用TypeScript（JavaScript的超集）開發(fā)。下面通過(guò)本文給大家分享Cpage.js給組件綁定事件的實(shí)現(xiàn)代碼，需要的的朋友參考下吧2017-08-08
JS實(shí)現(xiàn)數(shù)組簡(jiǎn)單去重及數(shù)組根據(jù)對(duì)象中的元素去重操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組簡(jiǎn)單去重及數(shù)組根據(jù)對(duì)象中的元素去重操作,涉及javascript數(shù)組元素的遍歷、判斷、追加等操作實(shí)現(xiàn)去重功能的相關(guān)技巧,需要的朋友可以參考下2018-01-01