網頁版的2048非常簡單，用到的技術只要略懂html，css，javascript和jquery就ok了。

游戲源碼，我的github鏈接：https://github.com/wozien/demo/tree/master/2048

在線演示:wozien.com/2048

游戲界面：

游戲細節問題：
游戲主要操作是在一個二位數組上board[][]，每個元素表示當前方格的數字，0表示沒有數字。每次移動后，根據數組重新渲染格子。

1.格子是怎么移動的？
首先格子分為兩種，一種是不會動的背景單元格grid-cell，一種是會動的數字格子number-cell。格子是相對于格子面板進行絕對定位的，根據格子的坐標x和y就能求出對應的top和left值。移動利用jquery中animate函數。

2.鍵盤的方向鍵的監聽器？

$(document).keydown(function(event){switch(event.keyCode) {case 37: // leftevent.preventDefault();if(moveLeft()){setTimeout("generateOneNumber()",210);setTimeout("isgameover()",300);}break;case 38: //upbreak;case 39: //rightbreak;case 40: // downbreak;default:break;} });

3.如何判斷是否能某個方向移動？
以向左移動為例子，我們只看第2列到第4列。如果滿足下面2個條件之一，就能向左移動。
左邊的數字為0，或者左邊的數字和自己相等。
下面代碼為判斷能否向左移動，其他方向類似：

function canMoveLeft(board){for(var i=0;i<4;i++){for(var j=1;j<4;j++){if(board[i][j]!=0){if(board[i][j-1]==0 || board[i][j-1]==board[i][j])return true;}}}return false; }

4.向一個方向移動具體怎么操作數組board
我們仍然以向左移動為例子，同樣我們只看第2列到第4列。對于在這個范圍的一個可移動的格子，也就是數字不為0的格子，遍歷它左邊的所有格子。對于左邊的格子，如果存在下面2種可以移動的情況：

• 落腳點為空(我們稱移動后的位置為落腳點)，而且和待移動的位置之間沒有其他數字格子。
• 落腳點的數字與移動數字相同，而且和待移動的位置之間沒有其他數字格子。

5.移動端的觸摸滑動怎么實現？
移動的觸摸時間利用touchstart和touchend事件，分別表示觸摸滑動的開始和觸摸滑動的結束。因為對應的事件對象中有touches屬性，表示開始觸摸點的點坐標數組，由于存在多點觸摸，所以取數組一個元素，具體如下：

gridobj.addEventListener('touchstart',function(event){startx = event.touches[0].pageX;starty = event.touches[0].pageY; });

結束觸摸點的坐標：

gridobj.addEventListener('touchend',function(event){endx = event.changedTouches[0].pageX;endy = event.changedTouches[0].pageY; }

所以利用endy-starty的絕對值和startx-endx的絕對值之間的大小關系可以判斷當前的滑動是在x方向還是在y方向移動，通過endy-starty的正負判斷在y方向的正負滑動，記住移動端的y正方向是向下的。同樣x方向也是這樣判斷。判斷出方向后操作對應pc端的回調函數就行了。

其實搞懂其中一個方向的移動操作和細節處理,其他方向都能很快寫出來的.祝各位成功寫出自己的2048!!

總結

以上是生活随笔為你收集整理的网页版2048的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。