原生JS 实现2048小游戏详解

HTML部分

2048小游戏

	
Score：0
		
	

		

			 

			GAME OVER!				
			
Score：0
		
			Try  aging
		     
 
		
    

	
	

	

	

	

	
	

	

	

	

	
	

	

	

	

	
	

	

	

	



	
	

CSS部分

*{
	margin: 0;
	box-sizing: border-box;	    /*初始化*/
}
a{
	text-decoration: none;	
}
#gamestar{ 
	/*margin: 0 auto;*/
	width: 480px;
	height: 480px;
	border-radius:10px;
	background-color: #ccc0b3;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -240px;
	margin-left: -240px;
}
.cell{
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	font-size: 40px;
	background-color: #bbada0;  
	position: absolute;	
	
}
/*每行间距*/
div[id^="c0" ]{top: 16px;}
div[id^="c1" ]{top: 132px;}	
div[id^="c2" ]{top: 248px;}	
div[id^="c3" ]{top: 364px;}
/*每列间距*/
div[id$="0"]{left: 16px;}
div[id$="1"]{left: 132px;}
div[id$="2"]{left: 248px;}
div[id$="3"]{left: 364px;}
.score-style{
	font-size:45px ;
	width: 480px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	font-weight: bold;
	font-family: "微软雅黑";
	color: #776e65;
	/*background-color: #;*/
	position: absolute;
	left: 50%;
	top: 15%;
	margin-left: -240px;	
}



.gameover-stly{
	text-align: center;
	width: 240px;
	height: 264px;
	border: 1px solid #F65E3B;
	background-color: #FFFFFF;
	border-radius:5px ;
	font-family: "微软雅黑";
    font-size: 40px; 
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -132px;	
    z-index: 1;
    box-shadow: #F59563 5px 5px 20px;
}


.gameover-background-stly{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(55,55,55,0.5); 	
	display: none;  /*隐藏样式，如果不加持续刷新时会闪出样式*/
	
}

.n2{background-color:#eee3da}
.n4{background-color:#ede0c8}
.n8{background-color:#f2b179}
.n16{background-color:#f59563}
.n32{background-color:#f67c5f}
.n64{background-color:#f65e3b}
.n128{background-color:#edcf72}
.n256{background-color:#edcc61}
.n512{background-color:#9c0}
.n1024{background-color:#33b5e5}
.n2048{background-color:#09c}
.n4096{background-color:#a6c}
.n8192{background-color:#93c}
.n8,.n16,.n32,.n64,.n128,.n256,.n512,.n1024,.n2048,.n4096,.n8192{color:#fff}
.n1024,.n2048,.n4096,.n8192{font-size:40px}

js部分

var game={
	date:null,      //二维数组初始化
	RN:4,          /*行数*/
	CN:4,          //每行的列数
	state:1,      //保存游戏中的状态
	RUNNING:1,    //正在运行中
	GAMEOVER:0,   //结束游戏
	Scoeraddtion:0, //保存的分数
	start(){		
	
	 //清空遮罩层
	 document.getElementById("gameoverid").style.display="none";
	//清空分数
	this.Scoeraddtion=0;
	//游戏状态设为运行中
	 this.state=this.RUNNING;
	 
	//新建空数组
	this.date=[];//初始状态
	//遍历数组
	for(var i=0;i0.2?2:4; //随机位置产生2和4的几率
   			break;   		
   	   }   		
   	}	 	          	 		 	
 },
 
 //更新运算过后的视图给出样式和结果
 updateView(){	 
 	//给数组中不同数字添加样式
 	for(var i=0;i0;c--){                      // c从倒数第二个开始，到>0结束    反向遍历r行每一列
		var prevc=this.getPrevcInRow(r,c); // 得到位置prevc  调用函数 getPrevcInRow(r,c)
		//console.log(prevc)//测试
		if(prevc==-1){                                  // 查询r行c列的前一个不为0的位置 那么此行就是全部为0 
			break;
	   }else{
		if(this.date[r][c]==0){
			 this.date[r][c] = this.date[r][prevc];
		     this.date[r][prevc]=0;
		     		  c++;   
		}else if(this.date[r][c]== this.date[r][prevc]){			      
		           this.date[r][c]*=2;
		           this.date[r][prevc]=0;
		           this.Scoeraddtion=this.date[r][c]+this.Scoeraddtion;
		}
	    			
	}
	}	
		
},
getPrevcInRow(r,c){//获取r行c列前一个不为0值的位置
	for(var i=c-1;i>=0;i--){  // i从CN-1开始，到>=0结束   反向遍历
		if(this.date[r][i]!=0){
		 return  i;	   
	     }	
	    }return -1;					
		// 如果r行i列位置的值不等于0   返回i
	// 循环结束
	// 返回-1表示全部为0 的位置
	},
			
	//上移所有，遍历所有列，并判断算法是否有改变数组，刷新做过算法之后的视图，给出随机数
	moveTop(){
	var befor=String(this.date);	
		for(var c=0;c=0;r--){
			var  Down= this.moveDownNextCols(r,c);	  
			if(Down==-1){
				break;
			}else{
				if(this.date[r][c]==0){
					this.date[r][c]=this.date[Down][c]
					this.date[Down][c]=0;
					r++
					
				}else if(this.date[r][c]==this.date[Down][c]){
					this.date[r][c]*=2
					this.date[Down][c]=0;
					this.Scoeraddtion=this.date[r][c]+this.Scoeraddtion;
				}
			}			
		  }
		
		},			
		//下移，从RN-1开始反向查找不为0的下标
	moveDownNextCols(r,c){
		for(var i=r-1;i>=0;i--){
			if(this.date[i][c]!=0){
				return  i;	   
	     }	
	    }return -1;				
		}
	}

 game.start()