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();//生成一个新格子。后面要对其做判断。
	}

游戏截图：