原生JS 实现2048小游戏详解

最新推荐文章于 2023-11-06 15:43:44 发布
最新推荐文章于 2023-11-06 15:43:44 发布
阅读量661 收藏 4
点赞数
分类专栏： 解决方法 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28835447/article/details/90730666
版权

HTML部分

2048小游戏 
	<div  class="score-style">Score：<span id="scorespan1">0</span></div>		
	<div class="gameover-background-stly" id="gameoverid">
		<div  class="gameover-stly">
			 <p>
			GAME OVER!				
			<div>Score：<span id="scorespan2">0</span></div>		
			<a href="javascript:game.start()">Try  aging</a>
		     </p> 
		</div>
    </div>
<div id="gamestar">
	<!--第一行-->
	<div id="c00" class="cell"></div>
	<div id="c01" class="cell"></div>
	<div id="c02" class="cell"></div>
	<div id="c03" class="cell"></div>
	<!--第二行-->
	<div id="c10" class="cell"></div>
	<div id="c11" class="cell"></div>
	<div id="c12" class="cell"></div>
	<div id="c13" class="cell"></div>
	<!--第三行-->
	<div id="c20" class="cell"></div>
	<div id="c21" class="cell"></div>
	<div id="c22" class="cell"></div>
	<div id="c23" class="cell"></div>
	<!--第四行-->
	<div id="c30" class="cell"></div>
	<div id="c31" class="cell"></div>
	<div id="c32" class="cell"></div>
	<div id="c33" class="cell"></div>
</div>

	<script src="js/new_file.js">
		
	</script>
	
</body>
 </html>

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;i<this.RN;i++){
		//将行数组变为空数组
		this.date[i]=[];
		for(var j=0;j<this.CN;j++){
			this.date[i][j]=0;
	  }			
	}
	
	this.randomnum()  		//调用方法，产生随机位置的2或4，生产两个随机数
	this.randomnum()
	game.updateView()          //更新视图
	
	 console.log(this.date)
	document.onkeydown=function(event){
			switch (event.keyCode){
				//左移动
				case 37:
				game.moveLeft();	
					break;
				//上移动
				case 38:
				game.moveTop()							
					break;
				//右移动
				case 39:
				game.moveRight()
					break;
				//下移动
				case 40:
				game.moveDown()	
					break;
			  }            
	          document.getElementById("scorespan1").innerHTML=game.Scoeraddtion;  //页面输出分数
	       }		       		          
        },   
        
        //判断是否结束游戏
	isgameOver(){			
	 	for(var r=0;r<this.date.length;r++){			   //遍历数组		
				for(var c=0;c<this.date[r].length;c++){
					if(this.date[r][c]==0){return false;}     // 当数组中有0是，输出 false   
					if((c<this.CN-1)&&(this.date[r][c]==this.date[r][c+1])){   //当0~2列与1~3列分别比较
						return false;
					}
					if((r<this.RN-1)&&(this.date[r][c]==this.date[r+1][c])){//当0~2行与1~3行分别比较，
						return false;
					  }
		       }	//如果全部不满足则输出ture，输出的结果用于判断结束弹框弹出
		  }
	 	return true;		 	
	},
	
	//获取一个随机位置的随机数
  randomnum(){	  	   		   	 
      while(true){	            
      	var sjr=Math.floor( Math.random()*this.RN);  //产生随机数的行位置
        var sjc=Math.floor( Math.random()*this.CN);  //产生随机数的列位置
   		if(this.date[sjr][sjc]==0){	   			
   			this.date[sjr][sjc]=Math.random()>0.2?2:4; //随机位置产生2和4的几率
   			break;   		
   	   }   		
   	}	 	          	 		 	
 },
 
 //更新运算过后的视图给出样式和结果
 updateView(){	 
 	//给数组中不同数字添加样式
 	for(var i=0;i<this.CN;i++){
 		for(var j=0;j<this.RN;j++){
			var	n=this.date[i][j];	
			var  div=document.getElementById("c"+i+j);
			if(n !=0 ){
				div.innerHTML= n;
				div.className="cell n"+n; //为出现在数组中的数字添加样式
			}else{
				div.innerHTML="";          //数字为0，样式不变
				div.className="cell";
			}
	      }					
 	  }	 
 	  
 	  //根据运算过后的结果，输出分数，调用方法 this.isgameOver()给出的结果判断是否结束游戏，给出结束游戏的视图
 	  document.getElementById("scorespan1").innerHTML= this.Scoeraddtion;  //运算过后的分数累加，页面输出分数，
 	  this.isgameOver();
 	  this.state=this.isgameOver()?this.GAMEOVER:this.RUNNING;    //判断当前的游戏状态，并赋值给this.state
 	  var div=document.getElementById("gameoverid");              //绑定htmlID用于给出结束后的样式
 	  if(this.state==this.GAMEOVER){                              //如果当前的游戏状态为结束状态，
 	  	div.style.display="block";                               //调出游戏结束后的页面
 	  	document.getElementById("scorespan2").innerHTML=game.Scoeraddtion;   //结束时的总分	 	  	
 	  }else{
 	  	div.style.display="none";               //否则结束页面隐藏
 	  }	 	  
 },
   
moveLeft(){//左移所有行		
	// 为数组拍照保存到before中，用于之后比较是否有过移动，为是否添加随机数做准备
	var befor=String(this.date);
	// r从0开始，到<RN结束 循环每一行
	for(var r=0;r<this.RN;r++){
	         this.moveLeftInRow(r);// 左移第r行  moveLeftInRow(r) ---- 可以单独完成一件事情  反复被使用     
	     }
	      var after=String(this.date); // 为数组拍照保存到after中
	      if(after!=befor) {        // 如果after!=before   表示data中的数据有变化
	         this.randomnum()                     // 生成随机数添加到data中去   randomNum()
	         this.updateView()         // 更新页面 updateView()		
	      }   		        			   
      },
      
moveLeftInRow(r){//左移第r行
	// c从0开始，到<CN-1
	//console.log(this.date)//测试
	for(var c=0;c<this.CN-1;c++){    //循环遍历第r行中的c列，将r行中的c列的每个元素进行比较判断，
	var nextc=this.getNextInRow(r,c);  //c列中从下标0开始第一个不为0的数下标，用于判断和运算
	   //console.log(nextc)  //测试
		if(nextc==-1){                   //说明r行中从下标为0开始的所有都为0，所以不做运算
			break;
		}else if(this.date[r][c]==0){    //当r行下标为0的数也为0，则将这个r数组中不为0的数交换赋值，
			 this.date[r][c] = this.date[r][nextc];
		     this.date[r][nextc]=0;
		     		  c--;                      //赋值完成后将此时的赋值的数保留原位置，用于与下一位直接判断和运算，减少一次循环
		}else if(this.date[r][c]== this.date[r][nextc]){		//两数相等的时候做相加	       
		           this.date[r][c]*=2;
		           this.date[r][nextc]=0;	
		           this.Scoeraddtion+=this.date[r][c];//根据规则，将相加出来的分数进行存储，用于输出页面展示
	 }		    			
	}		
   },
 
getNextInRow(r,c) {//查找r行c列下一个不为0的位置
	   for(var i=c+1;i<this.CN;i++){	//r行下标为0 的数,左移动时并不需要与左边的数做比较运算，所以从下标为1开始遍历r行	   	
	     if(this.date[r][i]!=0){      //不为0数的下标
	      return  i;	   
	     }	
	    }return -1;                  //全部遍历结束了返回-1，则说明r行这一行都为0（下标为0的数不在遍历范围内所以除外）
	// i从c+1开始，到<CN结束	
		// 如果i位置的值不为0， return  i
	// 循环结束
	// 返回 -1 表示全部为0 的位置		
   },
   
   //右移
   moveRight(){                     //右移所有行
   	 // 移动之前拍照  before
   	var befor=String(this.date);
   	 //console.log(befor)//测试

	for(var r=0;r<this.RN;r++){                   // r从0开始，到RN结束
		this.moveRightInRow(r)		             // 每一行向右移动 调用函数moveRightInRow(r)
	                                             // 循环结束
	}
	var after=String(this.date);                  // 为数组结束后拍照保存到after中      
	//console.log(after)//测试
	if(after!=befor) {                                // 如果after!=before   表示data中的数据有变化
	         this.randomnum()                        // 生成随机数添加到data中去   randomNum()
	         this.updateView()                       // 更新页面 updateView()		
	        }   
},
moveRightInRow(r){//右移第r行
	//console.log(this.date)//测试
	for(var c=this.CN-1;c>0;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<this.CN;c++){
			this.moveTopCol(c);
		}
		var after=String(this.date); 
		if(after!=befor) {                                // 如果after!=before   表示data中的数据有变化
	         this.randomnum()                        // 生成随机数添加到data中去   randomNum()
	         this.updateView()                       // 更新页面 updateView()		
	 }   
},
							
	//上移一列，根据不为0下标位置给出不同情况的算法
	  moveTopCol(c){		 
	    for(var r=0;r<this.RN-1;r++){
	      var Next=this.moveTopNextCol(r,c);	 // 将r行不为0 的数的下标调用赋值用于判断计算
	      //console.log(Next)
	          if(Next==-1){  //说明全部为0,不做计算调整
	       	 break;		       	
	       }else{
	       	if(this.date[r][c]==0){ //当c位置的数为0的时候，将第一个不为0的数赋值给c位置的数，c保持原位置，
	       		this.date[r][c]=this.date[Next][c]
	       		this.date[Next][c]=0;
	       		r--;
	       	}else if(this.date[r][c]==this.date[Next][c]){	 //	当第一个数字与c位置数相等则两数相加       				       		
	       		this.date[r][c]*=2;
	       		this.date[Next][c]=0;
	       		this.Scoeraddtion=this.date[r][c]+this.Scoeraddtion;
	       	}		       			       	
	       }
	    }				
	},	
	//输出从r开始，不为0的下标，用于判断情况作出算法  r行，c列
	moveTopNextCol(r,c){			
		for(var i=r+1;i<this.RN;i++){   
			if(this.date[i][c]!=0){
				 return  i;	   
	     }	
	    }return -1;	  //说明全部为0
	  },
	
	//下移，遍历每一列
	moveDown(){
		 var befor=String(this.date);
		 for(var c=0;c<this.CN;c++){
		 	this.moveDowninCol(c)
		   }
		var alter=String(this.date)
		if(alter!=befor){
			this.randomnum()                        // 生成随机数添加到data中去   randomNum()
	        this.updateView()                       // 更新页面 updateView()	
		}
		
	},
	//下移，上移的反向遍历，c列r行的排序计算
	moveDowninCol(c){
		for(var r=this.RN-1;r>=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()
混名汪小星
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现2048小游戏，我终于赢了一把
m0_61331573的博客
03-19 953
/创建卡片var card;i < 4;j++) {随机生成一个卡片，2或者4代码如下：//随机创建一个卡片//这样取出来的就是1-5 之间的随机数//因为2和4出现的概率是1比4，所以如果index是1，则创建数字4，否则创建数字2(1被随机出来的概率就是1/5，而其他就是4/5 就是1：4的关系)num = 4;//判断如果格子已经满了，则不再获取，退出return;//获取随机卡片，不为空的。
原生js实现贪食蛇小游戏的思路详解
10-15
在本文中，我们将深入探讨如何使用原生JavaScript实现经典的贪食蛇小游戏。首先，我们要明白这个游戏的基本机制：一条由多个方块组成的蛇在棋盘上移动，吃掉食物后会增长，碰到边界或自身会导致游戏结束。 游戏的...
Javascript-小游戏2048 超详细教学说明
qq_41045128的博客
06-16 1982
最近在学前端，趁热找几个小游戏练练手，这里主要用到了html，css，JavaScript
学习JavaScript完成2048小游戏
qq_41605179的博客
02-15 536
学习JavaScript做了一个2048游戏（此内容涉及到了JQuery） 游戏截图             主要实现的步骤 1.首先随机生成两个2或4的格子 2.方块的上下左右的移动，合并后颜色和内容数字的改变 3.判断是否可以移动 4.随机生成数字时判断16个格子中是否还有空位，有则随机生成以为2或4的数字 5.判断输，16个格子占满 格子无法上下左右移动 6.分数  任意两...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（一）
weixin_41306215的博客
07-26 5983
前几天看了慕课里的制作2048小游戏课程->>> 指路：https://www.imooc.com/learn/76 这个游戏适合我这种前端入门的小白作为第一个游戏项目，做完还挺有成就感、 虽然是跟着视频做，但是还是经常出错 做完以后收获挺大，但是还有一些不太理解。现在开始复盘，把每一步都认真归纳总结 希望能通过一步一步理解透彻里面的原理，分享出来也希望能帮到你 该游戏需要有HTML、CSS、JS和JQ基础 边做边思考每一步的来由 2048小游戏（一） ...
2048小游戏html制作,[ 逻辑锻炼] 用 JavaScript 做一个小游戏 ——2048 （详解版）
weixin_29404509的博客
05-31 786
前言这次使用了 vue 来编写 2048，主要目的是温习一下 vue。但是好像没有用到太多 vue 的东西，==！ 估计可能习惯了不用框架吧之前由于时间关系没有对实现过程详细讲解，本次会详细讲解下比较绕的函数由于篇幅问题简单的函数就不做详解了实现功能数字合并当前总分计算没有可移动的数字时不进行任何操作没有可移动，可合并的数字，并且不能新建时游戏失败达到 2048 结束游戏用到的知识ES6vue 部...
对于小游戏2048代码具体讲解
qq_61860114的博客
03-23 8808
1.如何做到打印外面的方框。 void Game_printf() { int i,k,j; printf("SCORE = %d\n", score); for (i=0;i<high;i++) //从第一行开始打印，由上往下。 { for (k=0;k<4;k++) //画出每一行的格子分割线。 { printf(" "); for(j=0;j<4;j++) { printf("-"); } } pr
js 编写的简单游戏代码,javascript小游戏开发
最新发布
神经网络爱好者
11-06 1463
戳这里拿原码👉github创建一个4 x 4的面板（HTML5表实现），总共16个格子。其中一个格子是空的，其他格子从1到15随机编号Deepl降重。可通过单击格子将当前空格子旁边的任何图块移入当前空格子。将格子按顺序逐行排列即为胜利✌️。当用户点击了与空格子不相邻的格子时，用户会收到提醒。这里就直接附上html的码，因为很短，就没什么好说的。
用 JavaScript 写一个小游戏打飞机
m0_62241283的博客
08-03 1652
以上就是 基于 js 制作一个飞机大战，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
原生js实现的金山打字小游戏（实例代码详解）
11-21
如果感兴趣的就来看一下Js源码吧 //计分板 var board = { dom: document.getElementById("score"), maxLost: 3, //最大丢失量 lost: 0, //当前丢失了多少个 score: 0, //当前分数 render: function() { //...
JavaScript简单小游戏
07-13
使用JavaScript简单做Html小游戏
2048基本原理
05-03
2048基本原理 自己写的 比较容易让人明白
js实现2048小游戏
08-10
js实现2048小游戏
原生JS编写的2048小游戏代码
06-01
《原生JS编写的2048小游戏代码详解》 2048是一款风靡全球的数字合并游戏，它的核心玩法是将相同的数字合并成更大的数字，直到达到2048。这款游戏的实现离不开编程技术，尤其是JavaScript这种前端开发语言。在这里，...
JavaScript游戏开发（1）（笔记）
weixin_46949627的博客
11-06 4875
学习HTML小游戏制作 使用Javascript
JavaScript简单实现拼图小游戏（附源码和资源）
qq_44651842的博客
07-03 3783
JavaScript代码68行，刚学JavaScript的时候写的，思想很简单，分享一下。附源码。
用原生js写2048小游戏
Alisen
03-20 5416
2048-game         #game {       display: none;       position: absolute;       left: 0px;       top: 0px;       right: 0px;       bottom: 0px;       background-color: #9DA5C3;       opac
原生js canvas小游戏
10-11
可以使用原生js和canvas来开发小游戏，通过canvas绘制游戏界面，监听用户交互，更新游戏状态并重新绘制界面。常见的小游戏类型包括射击游戏、跳跃游戏、平台游戏等。 开发原生js canvas小游戏需要掌握canvas的基本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值