jQuery實踐 別踩白塊兒網頁版

達人科技

2017-01-17 17:57

終於結束了考試，放假回家了。這次的別踩白塊兒網頁版要比之前做的 jquery實踐-網頁版2048小遊戲要簡單一點，基本的思路都差不多。

這個小遊戲可以抽象化分為3層

◆最底下的一層是基本的樣式（可見的）

◆中間的層是最主要的，是乙個4x3的二維陣列，遊戲中我們都是對這個二維陣列進行操作（不可見的）

◆最上面的一層也是乙個4x3的二維陣列，是使用者能最終看見的

我們通過最底下的一層顯示最基本的12個小方格，不同的顏色，每個格仔對應的中間的層有不同的值，最上面的一層負責顯示樣式

基本的結構和樣式都挺簡單，直接看**

結構：

1 2     3         

4         0.0000
5     
6     7         
8         
9         
10         
11         
12         
13         
14         
15         
16         
17         
18         
19     
20

樣式：

1 body

5 #header 
11 12 #header h1 
17 #timer 
24 #container
34 .grid 
42 .block 
53 .coblock
57 .gameover 
66 67 .gameover p 
75 76  .gameover span 
82 83   .restartgame 
99 100   .restartgame:hover

這裡並沒有設定每個格仔的位置，位置由js**來設定，以及第二層的二維陣列、第三層的顯示層都由js來設定，這裡和 jquery實踐-網頁版2048小遊戲並沒有什麼大的區別

**：

1 function init);

17 19 var block = $('#block-'+ i +'-'+ j);
20  block.css();
24 25 board[i][j] = 0;
26         }
27     }

1 function getpostop(i,j)

4 5 function getposleft(i,j)

遊戲開始時，要在每一行隨機的位置顯示乙個黑色的方塊，並且在最下面的那一行的黑色方塊上要有提示資訊

**：

1     for(var i=0;i<4;i++)

8  9         $('#block-'+ i +'-'+ randj).addclass('coblock');
10 11         board[i][randj] = 1;
12     }
13 14     $('#block-3-0').text('按j開始遊戲');
15     $('#block-3-1').text('按k開始遊戲');
16     $('#block-3-2').text('按l開始遊戲');

我們通過switch迴圈，來根據使用者不同的輸入進行不同的操作

**：

1 $(document).keydown(function(event) else

11 break;
12         case 75:
13 if(board[3][1] == 1 && keydown)else
20 break;
21         case 76:
22 if(board[3][2] == 1 && keydown)else
29 break;
30 31     }
32 });

在這裡設定 keydown 這個全域性變數的目的是為了防止使用者在遊戲結束時，繼續按鍵。

timeran這個函式是顯示遊戲時間的

**：

1 function timeran,1);

8 }

cleartext這個函式是在遊戲開始後，將最下面一行的提示資訊去掉

**：

1 function cleartext

movedown這個函式是方塊移動的最主要函式，因為方塊要向下移動，所以我們要從最下面開始遍歷二維陣列，如果該格仔是黑色的並且是最下面一行的，就只是簡單的把該格仔的顏色變回白色，如果該格仔是黑色的並且是第一行至第三行的，這個格仔變為白色，並且它的正下方的乙個格仔變為黑色，最後，在第一行的隨機位置上顯示乙個黑色的格仔

**：

1 function movedownelse

16  }
17         }
18     }
19 20     var randj = parseint(math.floor(math.random * 3));
21     $('#block-0-'+ randj).addclass('coblock');
22     board[0][randj] = 1;
23 }

isgameover是顯示遊戲結束樣式的函式，比較簡單

**：

1

function isgameover

1 function restartgame

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

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

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

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

別踩白塊兒之禪模式 windows程式實現

別踩白塊兒之禪模式 windows程式實現 如下 include lresult callback wndproc hwnd,uint,wparam,lparam int winapi winmain 程式入口，winapi是一種函式呼叫約定，用於表明如何生成在堆疊中放置呼叫引數的機器 hinsta...