JS實現別踩白塊小遊戲

最近有朋友找我用js幫忙仿做乙個別踩白塊的小遊戲程式，但他給的源**較麻煩，而且沒有注釋，理解起來很無力，我就以自己的想法自己做了這個小遊戲，主要是應用js對dom和陣列的操作。

程式思路：如圖：將遊戲區域的css設定為相對定位、溢位隱藏;兩塊「遊戲板」上分別排布著24塊方格，黑色每行隨機產生乙個，「遊戲板」向下滾動並交替顯示，將每個操作板的黑塊位置存入陣列，每次點選時將陣列pop出來進行比對（我覺得亮點在這……）。

以下是具體實現，關鍵部分有注釋。

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部分：

*//簡單的reset一下,並用box-sizing設定盒子尺寸將邊框也計算進去,便於後面計算小方塊位置

#gamezone//遊戲區域，多兩個畫素是為了除去邊框外還有足夠的300*600的空間

.square.squareblack//每個小方塊為75*100，並且設定黑色小方塊的背景色。

js部分：這裡分函式介紹：

全域性變數初始化

var loc=600;//
黑塊落地失敗判定
var count=0;//
初始化擊中黑塊總數
var locarr=;//
初始化遊戲板上黑塊位置的
var order=(function
()})()
//用閉包函式使每次建立的遊戲板的id為boarda與boardb，其實用乙個全域性變數也行，不過為了有點逼格。。。

每次點選判定結果的函式

function
judge()
else
if(count!=0&&count%15==0)
//每擊中15個後將速度加快一點，這個式子可自行定義。
}

產生大框中小黑框位置的隨機數，每次建立遊戲板時呼叫此函式，根據產生數定義小黑塊的位置

function
generaterand()
return
numarr;
}

每次呼叫在遊戲區域的上方生成乙個待往下滾動的遊戲板，並將其黑色的部分的數字push進locarr中

function
drawboard()
else
ele.addeventlistener('click',judge,false); //
給每乙個小方格新增點選判定函式judge
}var gamezone=document.getelementbyid('gamezone');
}

找到指令碼中存在的兩個遊戲板，使其往下滾動

function
fall()
anowtop+=5;
boarda.style.top=anowtop+"px";
var boardb=document.getelementbyid('boardb');
var bnowtop=parseint(boardb.style.top);
if(bnowtop==595)
bnowtop+=5;
boardb.style.top=bnowtop+"px";
loc-=5; 
if(loc==0) 
//每一幀將落地判定減5，當落地判定為0時表示落地，結算分數。
}

將主體呼叫寫在window.onload函式裡，使得頁面的遊戲區域載入完成後再呼叫函式。

window.onload=function
()

遊戲擴充套件:增加頁面ui：因為一開始的html特別簡單，所以ui也很好修改，設定按鈕，點選觸發開始函式。

改變遊戲難度：修改setinterval的值，也可以對judge函式內的間隔數目進行修改，或將下落加速的表示式優化一下。

增加比分排行等：用ajax連線伺服器，在遊戲結束後將結果寫入資料庫，並引用資料中的排行榜。

改為街機模式：去除定時，修改judge函式，使其每次點選遊戲板下落乙個小方格的高度。設定總數，開始計時，結束計時。

用c 編寫別踩白塊兒小遊戲

部分源 include include 呼叫easyx圖形庫 include include using namespace std define high 110 方塊高 define wide 70 方塊寬 define white block 0 白塊 define black block 1...

別踩白塊兒遊戲原始碼Android版

這個專案有帶說明文件，大家可以看看原始碼附件的說明文件吧，別踩白塊兒是目前非常火的一款遊戲，遊戲非常簡單刺激。關於具體怎麼火法怎麼玩我就不多說了，相信看到本文的朋友們都非常地清楚。什麼遊戲火，我們都想知道自己能不能也弄乙個玩玩，我也花了點時間弄了乙個，遊戲將會開源，利人利己，大家一起提高，希望各...

js實現2048小遊戲

頁面class hidden id end id endspan id table colspan 4 id s1 id s2 id s3 id s4 id s5 id s6 id s7 id s8 id s9 id s10 id s11 id s12 id s13 id s14 id s15 id...

JS實現別踩白塊小遊戲

用c 編寫別踩白塊兒小遊戲

別踩白塊兒遊戲原始碼Android版

js實現2048小遊戲

相關推薦