HTML/CSS/JavaScript實現的2048小遊戲

原創

liusaint1992

2020-02-21 18:24

前陣子2048火的時候我也玩過一陣。這種不用太多思考的遊戲其實蠻適合放空大腦的。最近心裏有點不愉快的事。所以就找點其他事情來分散一下注意力。就想着自己寫一個2048。

空閒時間寫了一個。大體上已完成了。也沒找到特別明顯的bug。稍微記錄一下。

這是第四個練手的小遊戲了。核心算法想明白了，寫起來還算輕鬆。

主要實現的功能：

1.初始化的時候隨機生成兩個爲2的格子。注意兩個格子別生成到一個格子上去了。

2.方塊的移動和合並。方塊移動的動畫。根據移動後的值。改變方塊的顏色。注意操作的順序。顏色主要是添加和移除 2到2048所代表的顏色的class。位置也添加和移除對應位置所代表的類。動畫則是用css3的過渡。0.2s。

3.判斷某個方向上不能移動，不能出現新的格子。

4.隨機在空白處出現下一塊。

5.判輸。需要滿足條件 1.沒有空格子。2.橫方向上沒有相鄰且相等的方塊。3.縱方向上沒有相鄰且相等的方塊。任何一項不滿足都沒輸。

6.判贏。某個格子的值達到2048。

7.分數。任意兩個格子合併的時候，分數增加合併之後方塊的值。

8.包裹div的大小任意設置，方塊中的數字始終垂直居中。

9.核心算法是判斷每個格子移動到什麼位置。應不應該合併。

我這裏使用的方法是，循環到每一個格子。然後這個格子的值，依次去跟它移動方向上的下一位做比較。下一位是空，可以繼續跟下一位比較，直到比較到下一位不是空且跟當前比較值相等或不相等或遇到比較的邊界（之前有合併的值對應的格子或移動方向上最後一格），判斷是移動併合並還是隻移動，最終的移動方位。值。

一些代碼：

1.不知道高度和寬度的div中的文字垂直居中。

.number_cell_con{
	width: 100%;
	height: 100%;
	text-align: center;
	position: relative;
}
.number_cell_con span{
	position: absolute;
	top: 50%;
	margin-top: -0.5em;
	left: 0;
	right: 0;
}

2.整體代碼結構：

核心代碼，以向下移動爲例子。

	moveDown:function(){
		/*向下移動*/
		var i,j,k,n;
		for (i = 0; i < 4; i++) {
			n = 3;
			for (j = 3; j >= 0; j--) {
				if(this.arr[i][j].value==0){					
					continue;
				}
				k = j+1;
				aa:
				while(k<=n){
					if(this.arr[i][k].value == 0){
						if(k == n || (this.arr[i][k+1].value!=0 && this.arr[i][k+1].value!=this.arr[i][j].value)){
							this.moveCell(i,j,i,k);//移動
						}
						k++;
						
					}else{
						if(this.arr[i][k].value == this.arr[i][j].value){
							this.mergeCells(i,j,i,k);//合併
							n--;
						}
						break aa;
					}

				}
			}
		}
		this.newCell();//生成一個新格子。後面要對其做判斷。
	}

遊戲截圖：