javascript實(shí)現(xiàn)別踩白塊兒小游戲程序
最近有朋友找我用JS幫忙仿做一個別踩白塊的小游戲程序,但他給的源代碼較麻煩,而且沒有注釋,理解起來很無力,我就以自己的想法自己做了這個小游戲,主要是應(yīng)用JS對DOM和數(shù)組的操作。
程序思路:如圖:將游戲區(qū)域的CSS設(shè)置為相對定位、溢出隱藏;兩塊“游戲板”上分別排布著24塊方格,黑色每行隨機(jī)產(chǎn)生一個,“游戲板”向下滾動并交替顯示,將每個操作板的黑塊位置存入數(shù)組,每次點(diǎn)擊時(shí)將數(shù)組pop出來進(jìn)行比對(我覺得亮點(diǎn)在這……)。
這里是游戲的GitHub地址,大家可以到里點(diǎn)擊中部菜單最右邊的的Download ZIP按鈕下載到桌面一試,HTML和JS,無需服務(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>//初始化一個boardb,使ab同時(shí)存在 </body> </html>
CSS部分:
#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,其實(shí)用一個全局變量也行,不過為了有點(diǎn)逼格。。。
每次點(diǎn)擊判定結(jié)果的函數(shù)
function judge(){ var num=this.id.substr(3)//獲取元素的ID號 if(num!=locArr.pop()){ //與位置數(shù)組pop出的對比 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個后將速度加快一點(diǎn),這個式子可自行定義。 }
產(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ū)域的上方生成一個待往下滾動的游戲板,并將其黑色的部分的數(shù)字PUSH進(jìn)locArr中
function drawBoard(){ var temArr=generateRand();//這里應(yīng)用一個臨時(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); //給每一個小方格添加點(diǎn)擊判定函數(shù)judge board.appendChild(ele); } var gameZone=document.getElementById('gameZone'); gameZone.appendChild(board); }
找到腳本中存在的兩個游戲板,使其往下滾動
function fall(){ gameZone=document.getElementById('gameZone'); var boarda=document.getElementById('boarda');//因?yàn)閍b兩個游戲板全局一直存在,所以不需要定義找不到時(shí)的邏輯 var anowtop=parseInt(boarda.style.top);//因?yàn)楂@取到的top位置是xxxpx類型,所以用一個parseInt()將其轉(zhuǎn)換為整數(shù)便于處理。 if(anowtop==595){ //這里數(shù)目為595而不是600是因?yàn)樵谶@一幀刪除后,下一幀正好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,當(dāng)落地判定為0時(shí)表示落地,結(jié)算分?jǐn)?shù)。 }
將主體調(diào)用寫在window.onload函數(shù)里,使得頁面的游戲區(qū)域加載完成后再調(diào)用函數(shù)。
window.onload=function(){ drawBoard(); fall(); var timer=setInterval('fall()',50); }
游戲擴(kuò)展:
增加頁面UI:因?yàn)橐婚_始的HTML特別簡單,所以UI也很好修改,設(shè)置按鈕,點(diǎn)擊觸發(fā)開始函數(shù)。
改變游戲難度:修改setInterval的值,也可以對judge函數(shù)內(nèi)的間隔數(shù)目進(jìn)行修改,或?qū)⑾侣浼铀俚谋磉_(dá)式優(yōu)化一下。
增加比分排行等:用ajax連接服務(wù)器,在游戲結(jié)束后將結(jié)果寫入數(shù)據(jù)庫,并引用數(shù)據(jù)中的排行榜。
改為街機(jī)模式:去除定時(shí),修改judge函數(shù),使其每次點(diǎn)擊游戲板下落一個小方格的高度。設(shè)置總數(shù),開始計(jì)時(shí),結(jié)束計(jì)時(shí)。
相關(guān)文章
LayUi使用switch開關(guān),動態(tài)的去控制它是否被啟用的方法
今天小編就為大家分享一篇LayUi使用switch開關(guān),動態(tài)的去控制它是否被啟用的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript函數(shù)執(zhí)行、作用域鏈以及內(nèi)存管理詳解
這篇文章主要介紹了JavaScript函數(shù)執(zhí)行、作用域鏈以及內(nèi)存管理的知識,文章內(nèi)容非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01原生js實(shí)現(xiàn)簡單的模態(tài)框示例
下面小編就為大家?guī)硪黄鷍s實(shí)現(xiàn)簡單的模態(tài)框示例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09兼容IE FF Opera的javascript最短的拖動代碼
關(guān)于拖動的代碼太多了要么復(fù)雜要么不兼容,在這就不多說了. 這里提供個簡潔的。2008-01-01JS實(shí)現(xiàn)的在線調(diào)色板實(shí)例(附demo源碼下載)
這篇文章主要介紹了JS實(shí)現(xiàn)的在線調(diào)色板,可實(shí)現(xiàn)響應(yīng)鼠標(biāo)點(diǎn)擊動態(tài)改變調(diào)色板顏色的功能,涉及JavaScript針對頁面元素屬性的動態(tài)操作與計(jì)算技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-03-03微信小程序?qū)崿F(xiàn)2048小游戲的詳細(xì)過程
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)2048小游戲的相關(guān)資料,文中將實(shí)現(xiàn)的代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09