具體幹了件什麼事情
要實現如圖所示的小遊戲。
規則是有16個格仔，初始時會有兩個格仔上安放了兩個數字，每次可以選擇上下左右其中乙個方向去滑動，每滑動一次，所有的數字方塊都會往滑動的方向靠攏外，系統也會在空白的地方隨即出現乙個數字方塊，相同數字的方塊在靠攏，相撞時會相加。不斷的疊加最終拼湊出8192這個數字就算成功。如果沒有了空白的地方，也沒有了相同的數字可以靠攏，相撞就遊戲失敗。
技術難點。
2.1如圖的展示，需要做到有滑動效果，相消的效果，
2.2移動原理，還有判斷陣列相消，遊戲結束，遊戲勝利
怎麼破解技術難點
3.1滑動效果可是使用css的樣式transform: translate(x,y);這個樣式具有移動效果，我們可以把所以的數字塊都定位到數字盤的最左上角，為了方便，我們把這個點稱之為座標原點（0，0），那麼圖中數字塊64所在的座標就為（3，3），由於我們使用的數字盤，和數字塊都是矩形規則的，這裡我先用的是寫死的寬高從（0，0）–>(3，3)體現到樣式上的距離就是（3*120px，3*120px）,我定位這個數字塊用的是transform: translate(3*120px，3*120px);由於我使用的是vue所以就更方便了，我只要準備好資料，這些重複性的工作就交個vue了，我使用了乙個陣列來裝這個16個數字塊，使用標籤來包裹每乙個數字塊，通過遍歷陣列來完成定位**如下。
3.2數字相消的效果可以使用es6的animate函式，我們其實只是做了個數字塊在兩毫秒內放大1.3倍然後又縮小回原始尺寸，這樣給使用者的感覺就是進行了合併，**如下圖所示。
3.3數字塊移動，我們給數字塊設定了如下資料結構，其實數字塊的位置就是x，y的值，數字塊的移動就相當於改變其x，y的值，我就拿乙個方向作為例子，其他方向類似，我們按下上箭頭，那麼處理邏輯是先從y=0這排開始，也就是y=1這排有能夠和y=0這排合併的合併，能下移的下移，然後是y=2，y=3，可是我們在新增數字塊的時候x，y值是隨機乙個不存在的數字塊座標，這也就意味著數字中的不是有序的，我們需要首先根據y來進行排序，用排完序的和y-1排的進行比較處理，也就是說為了避免陣列越界，我們排序的時候要去掉y=0這一層的，當檢測到y-1為空時我們讓當前數字塊前進一步，並且繼續和下一排做比較，如果檢測到y-1不為空時，就看看他們的數值是否相同，相同則讓下一排成2，本身數字塊消失（這裡面有個小坑，有的數字塊可能面臨兩次操作，所以我額外記錄了乙個屬性，用來判斷當前數字塊是否已經被處理過），涉及到的**邏輯如下。
3.4判斷遊戲是否成功，這個比較好實現，在每次移動的時候都去判斷一次是不是有數字塊的值達到了8192。
3.5判讀遊戲是否失敗，這個也是迴圈整個陣列，首先判讀陣列是不是已經有16塊了，其次判讀還存不存在相鄰的兩個數字塊的數字相同，如果滿足16塊且沒有相同數字塊相鄰則判斷遊戲失敗，關鍵**如下。
下篇部落格需要完善的事項有
4.1遊戲數字塊的移動採用矩陣方式
4.2背景**的新增
4.3遊戲演算法的優化
專案原始碼
2048小遊戲編寫思路
有點難 關鍵知識點 下面請各位讀者先學習一下該遊戲中涉及到的幾個關鍵知識點，有了這些必備條件，我們才好講解 2048 遊戲的設計思路。1 改變文字顏色 2048小遊戲的整體的設計思路是 遊戲介面初始化，共有 4 行 4 列，總計 16 個位置，遊戲開始時，在任意的兩個位置上，隨機產生數字 2 或 4...
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...
小專案 2048小遊戲
很久之前，在學完c語言的時候，老師留下了乙個作業，問大家有沒有玩過2048，讓自己做乙個2048的小專案，然後就各種查閱資料，自己做了乙個小小的2048小遊戲，用w s a d實現上下左右的移動，下面是 實現部分。實現 include include include includeint code ...