網(wǎng)頁版的2048非常簡單，用到的技術(shù)只要略懂html，css，javascript和jquery就ok了。

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

在線演示:wozien.com/2048

游戲界面：

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

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

2.鍵盤的方向鍵的監(jiān)聽器？

$(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個條件之一，就能向左移動。
左邊的數(shù)字為0，或者左邊的數(shù)字和自己相等。
下面代碼為判斷能否向左移動，其他方向類似：

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.向一個方向移動具體怎么操作數(shù)組board
我們?nèi)匀灰韵蜃笠苿訛槔?#xff0c;同樣我們只看第2列到第4列。對于在這個范圍的一個可移動的格子，也就是數(shù)字不為0的格子，遍歷它左邊的所有格子。對于左邊的格子，如果存在下面2種可以移動的情況：

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

5.移動端的觸摸滑動怎么實(shí)現(xiàn)？
移動的觸摸時間利用touchstart和touchend事件，分別表示觸摸滑動的開始和觸摸滑動的結(jié)束。因?yàn)閷?yīng)的事件對象中有touches屬性，表示開始觸摸點(diǎn)的點(diǎn)坐標(biāo)數(shù)組，由于存在多點(diǎn)觸摸，所以取數(shù)組一個元素，具體如下：

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

結(jié)束觸摸點(diǎn)的坐標(biāo)：

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。