微信小程式版2048

演算法

1、生成4*4棋盤檢視

2、隨機生成2或4填充兩個單元格

3、記錄使用者touch時的起始位置和結束位置，以此判斷滑動方向

4、根據滑動方向移動單元格，並進行相同值合併

5、使用者一次滑動完成後重複執行步驟2

6、判斷遊戲是否結束，並根據遊戲結果產生不同提示

難點1、確定滑動方向

2、使用者滑動時相同格仔合併，並移到滑動方向一側

實現檢視實現

1、用wxml+wxss生成棋盤檢視

2、用wx:for將資料渲染到每個單元格

邏輯實現

1、頁面載入完畢隨機用數字2或4填充兩個單元格

2、判斷使用者滑動方向

1

var disx = this.touchstartx - this
.touchendx; 
2var absdisx =math.abs(disx); 
3var disy = this.touchstarty - this
.touchendy; 
4var absdisy =math.abs(disy); 5//
確定移動方向 6//
0:上, 1:右, 2:下, 3:左 
7var direction = absdisx > absdisy ? (disx < 0 ? 1 : 3) : (disy < 0 ? 2 : 0);

//

比如棋盤資料如下 
var grid =[
[2, 2, 0, 0], 
[0, 0, 0, 0], 
[0, 8, 4, 0], 
[0, 0, 0, 0] 
];

var list =[ 

[0, 0, 2, 2], //
注意是0022不是2200，因為像右滑動所以從右邊push入陣列 
[0, 0, 0, 0], 
[0, 4, 8, 0], 
[0, 0, 0, 0] 
];

1 formlist(dir) 19}

20return
list;
21 }

list2 =[ 

[2, 2, 0, 0], 
[0, 0, 0, 0], 
[4, 8, 0, 0], 
[0, 0, 0, 0] 
];

1 changeitem(item)

list2 =[ 

[4, 0, 0, 0], 
[0, 0, 0, 0], 
[4, 8, 0, 0], 
[0, 0, 0, 0] 
];

1 combine(list) 11}

12}13for (var i = 0; i < list.length; i++) //
再次數字靠邊，避免0220變成0400的情況發生
14 list[i] = this
.changeitem(list[i]);
1516
return
list;
17 }

list =[ 

[0, 0, 0, 4], 
[0, 0, 0, 0], 
[0, 0, 8, 4], 
[0, 0, 0, 0] 
];

1

move(dir) 
24} 
25this.board.grid =result;
26this.setdatarandom(); //
移動一次之後隨機用2或4填充兩個單元格
2728
return
result;
29 }

5、判斷遊戲是否結束

1 isover() 

7for (var j = 0; j < this.size; j++) //
上下不等
8for (var i = 1; i < this.size; i++) 
12return
true
;13 }

有興趣的可以fork一下，求star~

微信小程式 2048小遊戲

介面抽象如下 重新開始按鈕 模式選擇 用時 秒級 難度級別 時間條 x x x x x x x x x x x x x x x x 排行榜 使用者圖 名字 分數 模式 難度 用時 主要是伺服器端搭建和前端設計 遊戲功能優化 已完成jobs 1.前端布局和設計 high 2 2.前端觸控事件判定方向函...

微信支付小程式版

請求流程 1.小程式呼叫wx.request請求到後台 含一些支付資訊，如金額 交易名稱等 3.連同生成的簽名及一些重要資訊在後台加密後生成乙個簽名 後文稱第二次簽名 連同第二次簽名已經資訊返回給 1 中的小程式request請求。跳坑指南 以下為 供參考 為了測試，交易金額資訊直接在後台寫死了 小...

WordPress版微信小程式3 1 5版的新功能

產品的完善是無止境，每過段時間就會發現產品的新問題，使用的人越多，提的需求也會越多，我聽得最多的一句話就是 如果加上某某功能就完美了。其實，完美是不存在的，每個人的視角不一樣，完美的定義也是不一樣的。做一款開源產品，會面對很多善意的批評和建議，當然也不乏無理的要求，如何在這眾多批評 建議 要求裡去取...