微信公眾號：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));//隨機選擇位置
14 cells[re[location].k][re[location].kk] = value;//進行賦值
15 }
16 }
在上述代碼中 注釋已經解釋的比較明白。我這里簡單說一下思路：首先隨機產生一個值2或4，然后通過循環把所有空值的坐標存入數組(re)中，再從數組中隨機選取一個空值坐標，通過坐標對相應元素進行賦值。
6.游戲結束
游戲的基本操作終於要結束了，接下來我們判斷游戲是如何結束的。看下面代碼：
1endgame: function (cells) {
2 var isNULL = false; //判斷是否有空元素
3 for (let x = 0; x < 4; x++) {
4 for (let y = 0; y < 4; y++) {
5 if (cells[x][y] == "") {
6 isNULL = true;
7 }
8 }
9 }
10 if (!isNULL) { //沒有空元素時 進入
11 for (let i = 0; i < 4; i++) {
12 for (let j = 0; j < 4; j++) {
13 if ((j + 1) < 4 && cells[i][j] == cells[i][j + 1]) {//判斷橫向是否有相等的元素
14 return false;
15 }
16 if ((j + 1) < 4 && cells[j][i] == cells[j + 1][i]) {//判斷縱向是否有相等的元素
17 return false;
18 }
19 }
20 }
21 return true;
22 }
23 return false;
24 }
簡述上面的代碼：首先判斷是否表格中是否存有空值,有 就證明游戲沒有結束，沒有 就判斷表格中的上下左右是否有相等的元素，沒有 證明游戲已經結束，有 就繼續進行游戲。
今天的學習暫時告一段落，后面會不定時更新的。送大家一句話生活越來越美好
下面是我的公眾號:CodeId 歡迎關注
