教你用jQuery製作別踩白塊網頁版

2019-12-13 00:43:59

別踩白塊（又名鋼琴塊）相信大家都玩過，這是一款製作簡單、容易上手，但又很有新意的一款安卓遊戲，它一推出就取得了相當好的成果，獲得了較多的使用者量。一開始它只是簡單的一種遊戲模式，但在流行起來之後，別踩白塊又逐漸新增了許許多多的其他模式，今天我們製作的就是最初的別踩白塊，即經典版。

1

首先，沒有jQuery的去官網下載，如圖。

沒有Dreamweaver的去下載安裝，不在多說，自己百度。

2

進入別踩白塊，我們首先來分析一下這個遊戲。註：我們只分析經典模式。

這個遊戲的主體就是一個4*n的白格子，每一行有四個，共有n行。每一行中只有一個黑色的格子，玩家點選黑色的格子，直到過關，點錯即失敗。

值得一提的是：螢幕上方有計時器，顯示使用者所用時間，這樣就更增加了這個遊戲的可玩性！

如果沒有計時器，這個遊戲就缺少了互動，未免太乏味了。玩家可以把自己的所用時間「炫耀」到朋友圈或其他地方。

這樣一來相當於免費給別踩白塊打廣告，二來又提高了這個遊戲的玩家互動性，使玩家更加黏上這款遊戲！

不愧是第一虐心手遊。

3

分析之後，我們就開始做這款遊戲的網頁版了。

第一步：輸出表格

首先，我們需要一個4*n的格子，這個我們可以用jQuery輸出表格做到。

$(元素).append(HTML程式碼)；

利用這個加上for迴圈，我們可以輸出任意行數的4列表格。

圖示程式碼和表格效果。

4

js程式碼如下：

--------------------------------------------------------------------------------

function ym()//呼叫這個函數即可輸出4*20的表格。

{var i,j,k;

var be,li;

var ss="";

be=4;//橫著的塊數

li=20;//共有多少行

for (i=1;i<=li;i++)

{ss+="<tr>";

for (j=1;j<=be;j++)

{ss+="<td id="a"+i+j+"" tabindex='-1'>"+"<a name="b"+i+j+"" id="b"+i+j+""></a></td>";}

//你可以看見，td裡有一個a，那是一個錨，用來同步頁面。

//注意，每一個td一定要加id，按照坐標加，否則很難用jQuery操作。id不能以數位開頭。

ss+="</tr>";

}

$("#three").append(ss);//這裡的#three是一個id為three的table

--------------------------------------------------------------------------------

html程式碼：

--------------------------------------------------------------------------------

<body>

<tbody>

</tbody>

</table>

</center>

--------------------------------------------------------------------------------

5

第二步：塗色白色

我們來給格子圖上顏色，讓它更像別踩白塊！

塗色很簡單，用CSS就ok啦。

--------------------------------------------------------------------------------

#three td

{

height:163px;

width:250px;

background:#CCC;//灰色。白色改成white即可。

font-size:22px;

background-repeat:no-repeat;

}

</style>

--------------------------------------------------------------------------------

先把所有方塊塗成白色吧!

也可以換成你想要的其他顏色！

6

第三步：塗色黑色

我們知道每一行都要有一個黑色塊，所以我們必須在每一行塗一個黑色。

為了保證遊戲的難度，這個任務交給亂數去做吧！

--------------------------------------------------------------------------------

k=randomo(1,5);//這樣可以獲得1,2,3,4中的亂數。

function randomo(mi,ma){return Math.floor(mi+Math.random()*(ma-mi));}//一個簡單的亂數函數。

--------------------------------------------------------------------------------

接下來我們就要隨即塗色了，通過隨機得到的數位，給每一行的第n個塗上顏色，這時，td上的坐標id就起到作用了！

在這裡我們需要用到jQuery的$().css();函數。

簡單說明一下

$("#a11").css("background-color","white");//給第一行第一個格子塗上顏色

------------------------------------------------------------------------------

for (i=1;i<=li;i++)

{k=randomo(1,5);//獲取亂數

ss="";

ss+="#a"+i+k;//將坐標翻譯成id

$(ss).css("background-color","black");//塗成黑色

------------------------------------------------------------------------------

效果圖如下（我沒有改成黑白的，而是新增了圖片）

這樣看起來大體已經很像別踩白塊了！

7

第四步：按鍵觸控事件

首先說按鍵：需要用到jQuery的$(document).keyup(function(event){});

函數，即按鍵響應事件。

event.keyCode中有按鍵的值，至於值與按鍵的對應，

從A到Z：65-90

如圖。

程式碼中的switch中有一個bs()函數，那是我自己定義的一個函數，在這個函數里，將判斷是否按錯（css是否是black）和將按對的變為白色（css變為白色）

程式碼不再寫，上邊塗色已經說過。

按錯跳轉頁面，完成跳轉頁面什麼的就不再多說了，自己做幾個頁面就可以了。

8

第五步：頁面同步（錨的使用）小編我技術有限，所以同步頁面用的是html元素A，即拋錨跳轉。我不是沒有試過捲軸自動捲動或頁面下移，但這些都有點麻煩，雖然很有技術含量。當然，用什麼方法根據個人習慣即可。還記得td裡面的a吧，每一個td都有，而且有坐標id，那個就是用來跳轉的。如果沒有這個，那麼使用者要手動下脫網頁來進行遊戲，而不是網頁自己走。所以錨還是非常重要的，沒有這個，使用者體驗會非常不好。設定錨已經設定好了，那麼介紹使用。用到js的一個函數location.hash。location.hash="錨的id";//這句加到bs()(按鍵響應函數)裡面，即玩家按對鍵頁面下移。這樣頁面便會隨著玩家按鍵往下移動。

9

第六步：最後一步————計時器

這個就比較隨意了，網上jQuery計時器一大堆，搜一個改改就可以用了。

關鍵是顯示方式，個人覺得別踩白塊的顯示方式就很好，在最上邊動態顯示。

你也可以做一個浮動DIV，在頁面最上邊顯示時間。感覺蠻好的。

浮動DIV推薦Bootstrap的，畢竟人家做的高大上。

再加上一個資料庫，將使用者資料進行比較，列出排行榜、新紀錄、炫耀一下等東西，這個遊戲的可玩性就更高了！

你也可以看一下我做的計時器，關注我可以檢視我其他經驗，裡面有一篇是關於jQuery計時器的。

圖示為不好的計時器，建議不要這樣做！

教你用jQuery製作別踩白塊網頁版

1

2

3

4

5

6

7

8

9

熱門文章