微信公眾號：CodeId有什麼建議可以到公眾號里進行留言。 很高興又和大家見面了，最近寫了個小游戲——2048，這個游戲實現起來不是很難，感覺它對自己的邏輯能力起到一個訓練作用，還不錯，所以今天分享給大家。我是通過小程式寫的，源碼已經放到GitHub上了https://github.com/Craz ...
微信公眾號：CodeId
有什麼建議可以到公眾號里進行留言。
很高興又和大家見面了，最近寫了個小游戲——2048，這個游戲實現起來不是很難，感覺它對自己的邏輯能力起到一個訓練作用，還不錯，所以今天分享給大家。我是通過小程式寫的，源碼已經放到GitHub上了https://github.com/CrazyIdeas1/WeiXinXiaoChengXu_2048Pro。這篇文章的講解順序是先分析2048然後通過代碼實現裡面的主要功能。
0.開篇看圖
1. 2048分析
2048小游戲的規則想必大家已經知道了吧，簡單的說就是你通過上下左右的滑動一個4*4的表格，表格中相同的數字進行求和，使它們的和接近2048。下麵我們取出其中的一個方向（其他方向類似），對它的過程進行簡單的分析：
1//選取向左滑到的方向
22 0 0 2 4 0 0 0 4 0 0 0
30 2 2 0 相同求和 0 4 0 0 位置移動 4 0 0 0
42 4 2 0 ------> 2 4 2 0 -----> 2 4 2 0
50 2 4 0 0 2 4 0 2 4 0 0
6//起始 結束
通過上面的分析我們知道，當我們的手指向某一個方向滑動表格時，它的內部至少要經歷兩步操作，一個是相同求和，另一個是位置移動。接下來對著兩步進行分析
2.相同的求和
相同求和是指在某一方向上，對值相等並且中間沒有其他值的兩個數，進行相加求和，看下麵代碼：
1merge: function(cells){
2 for (let i = 0; i < 4; i++) {
3 for (let j = 0; j < 4; j++) {
4 if (cells[i][j] != "") {//排除前面的空格 標記一
5 if ((j + 1) < 4 && cells[i][j] == cells[i][j + 1] && cells[i][j] != 2048) { //標記二
6 cells[i][j] += cells[i][j + 1];//求和
7 cells[i][j + 1] = "";//清空原有值
8 j++;//把坐標移到兩個數的後面
9 } else {
10 for (let k = j + 1; k < 4; k++) { //標記三
11 if (cells[i][k] != "") {
12 if (cells[i][j] == cells[i][k] && cells[i][j] != 2048) {//標記二
13 cells[i][j] += cells[i][k];//求和
14 cells[i][k] = ""; //清空原有值
15 j = k;
16 } else {
17 j = k - 1;
18 }
19 break;
20 }
21 }
22 }
23 }
24 }
25 }
26 }
簡單解讀一下上面的代碼：標記一是用來排除前面的空值的，例如0 0 2 2,直接排除前面的兩個空值(0)。標記二是用來判斷兩個值是否相等的，相等時就進行裡面的一些列操作。標記三是用來排除兩個數之間是空值的情況的，例如2 0 0 2，排除中間的兩個空值(0)。其他的就不用多說，都有註釋。
3.位置移動
位置移動是指讓表格中所有的數字在不變順序的情況下，統一移動到某一方向上，數與數之間和數與某一方向的邊之間不允許有空值。看下麵代碼：
1moveUnit: function(cells){
2 for (let i = 0; i < 4; i++) {
3 var count = 0;
4 for (let j = 0; j < 4; j++) {
5 if (cells[i][j] != "") {
6 cells[i][count++] = cells[i][j];//標記一
7 if ((count - 1) != j) {//標記二
8 cells[i][j] = "";//把當前值清空
9 }
10 }
11 }
12 }
13 }
在上述代碼中標記一表示把當前值賦值到前面去。標記二表示如果當前值的位置和你賦值到前面去的位置 相同時，就不把當前值清空。
4.轉變方向
讀完上面的幾步，你會發現完成某一方向（上面講的是向左移動）的移動和求和，已經基本完事，只要把上邊的代碼稍加改變就可以把其他三個方向的代碼敲出來了（我一開始就是這麼乾的）。但是這樣會出現一個問題，就是很多的代碼都會重覆出現，代碼量也很大。後來我通過轉變方向的方法把代碼就行了簡單優化。轉變方向就是把所有方向上的表格按照一定的規則統一轉換到同一個方向上去操作，等操作完畢後再按照一定的規則轉換到原來的方向。看下麵代碼：
4.1 轉換到同一方向
1changeDirection: function(cells){
2 var result = [[],[],[],[]]
3 for(let i = 0; i < 4; i++){
4 for(let j = 0; j < 4; j++){
5 if (this.driection == 1){ // 上 》》左
6 result[i][j] = cells[j][3-i]
7 } else if (this.driection == 2){// 下 》》左
8 result[i][j] = cells[3-j][i]
9 } else if (this.driection == 3){//右 》》 左
10 result[i][j] = cells[i][3-j]
11 } else if (this.driection == 4){//不動
12 result[i][j] = cells[i][j]
13 }
14 }
15 }
16 return result;
17 }
在上面代碼中 1表示方向上、2表示方向下、3表示方向右、4表示方向左(本篇通用)。
4.2 轉回到以前的方向
1reChangeDirection: function(result){
2 var cells = [[], [], [], []]
3 for (let i = 0; i < 4; i++) {
4 for (let j = 0; j < 4; j++) {
5 if (this.driection == 1) { // 左 >>>>> 上
6 cells[i][j] = result[3 - j][i];
7 } else if (this.driection == 2) {//左 >>>>> 下
8 cells[i][j] = result[j][3 - i];
9 } else if (this.driection == 3) {//左 >>>>> 右
10 cells[i][j] = result[i][3 - j];
11 } else if (this.driection == 4) {//左 不動
12 cells[i][j] = result[i][j];
13 }
14 }
15 }
16 return cells;
17 },
以上兩段代碼 都是有關表格方向的轉變，裡面沒有涉及到什麼演算法，如何理解比較困難，就自己找幾個樣例在紙上寫一寫、畫一畫。
5.產生隨機數
上面我們基本解決了表格的合併和移動問題，接下來是看如何產生隨機的2或4。看下麵代碼：
1randomunt: function (cells) {
2 var value = Math.random() < 0.9 ? 2 : 4;//產生隨機值，90%概率產生 2
3 var re = [];
4 var count = 0;
5 for (let k = 0; k < 4; k++) {//統計有哪些格子沒有數字
6 for (let kk = 0; kk < 4; kk++) {
7 if (cells[k][kk] == "") {
8 re[count++] = { k, kk };
9 }
10 }
11 }
12 if (count > 0) {//當沒有空格時就不進行隨機數賦值了
13 var location = parseInt(Math.random() * (re.length - 1));//隨機選擇位置
