2048小游戏，代码奉上！！！界面有点丑，但代码绝对没问题！

最新推荐文章于 2022-04-08 12:10:00 发布

置顶 Shan_Cb

最新推荐文章于 2022-04-08 12:10:00 发布

阅读量578

点赞数

分类专栏： JavaScript 文章标签： 2048小游戏

本文链接：https://blog.csdn.net/Shan_Cb/article/details/83350856

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Shan_Cb/article/details/83350856

在里插入图片描述

网页代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Game2048.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
	<script src="js/jquery-1.11.0.min.js"></script>
	<script src="js/game-main.js"></script>
	<style type="text/css">
	.class-div-w{
		width: 400px;
		height: 400px;
		position:absolute;
		left:35%;
		top:15%;
		background:url(img/bg.png);
		background-size: cover;
	} 
	.class-img-ele{
		width: 90px;
		height: 90px;
		background: #ccaaff;
		margin: 5px;
	}
	.titlediv{
		width:200px;
		text-align:center;
		background-color:white;
	}
	#g2048{
		background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
	}
	</style>
  </head>
  
  <body id="g2048">
	<div id="titlediv">
		<h1>GAME&nbsp;:&nbsp;2048</h1>
		<h3 id="score">SCORE&nbsp;:&nbsp;0</h3>
	</div>
  	<div class="class-div-w">
		<img class="class-img-ele" style="position:absolute;left:0px;top:0px" id="i11"/>
		<img class="class-img-ele" style="position:absolute;left:100px;top:0px" id="i12"/>
		<img class="class-img-ele" style="position:absolute;left:200px;top:0px" id="i13"/>	
		<img class="class-img-ele" style="position:absolute;left:300px;top:0px" id="i14"/>	
		
		<br>
		<img class="class-img-ele" style="position:absolute;left:0px;top:100px" id="i21"/>
		<img class="class-img-ele" style="position:absolute;left:100px;top:100px" id="i22"/>
		<img class="class-img-ele" style="position:absolute;left:200px;top:100px" id="i23"/>
		<img class="class-img-ele" style="position:absolute;left:300px;top:100px" id="i24"/>

		<br>
		<img class="class-img-ele" style="position:absolute;left:0px;top:200px" id="i31"/>
		<img class="class-img-ele" style="position:absolute;left:100px;top:200px" id="i32"/>
		<img class="class-img-ele" style="position:absolute;left:200px;top:200px" id="i33"/>
		<img class="class-img-ele" style="position:absolute;left:300px;top:200px" id="i34"/>
		
		<br>
		<img class="class-img-ele" style="position:absolute;left:0px;top:300px" id="i41"/>
		<img class="class-img-ele" style="position:absolute;left:100px;top:300px" id="i42"/>
		<img class="class-img-ele" style="position:absolute;left:200px;top:300px" id="i43"/>
		<img class="class-img-ele" style="position:absolute;left:300px;top:300px" id="i44"/>	
	</div>
  </body>
</html>

JavaScript代码：game-main.js

var gamescore=0;
var gamesum=0;
$(function(){
	var imgs=[[11,12,13,14],[21,22,23,24],[31,32,33,34],[41,42,43,44]];
	var n=[[ 0, 0, 0, 0 ],[ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0 ]];
	var m=0;
	//游戏开始的时候生成两个数字（2/4中随机）
	while(m<2){
		var x=Math.floor(Math.random()*4);
		var y=Math.floor(Math.random()*4);
		if(n[x][y]==0) {
			var rnum=Math.floor(Math.random()*20);
			n[x][y] = rnum < 1 ? 4 : 2;
			$("#i"+imgs[x][y]).attr("src","img/i"+n[x][y]+".png");
			m++;
		}
	}
	var isend=false;
	$("#g2048").keydown(function(){
		/*设置ismove开关，用来判断是否进行了移动，
		如果没有移动，就不生成新的数字，如果移动了，
		就调用随机数方法，在空白处生成新的数字*/
		var ismove;
		/*获取用户的按键，如果按的是方向键，就执行
		响应的移动操作*/
		var keyid=event.keyCode;
		if(keyid==38){
			ismove=up(imgs, n);
		}
		else if(keyid==40){
			ismove=down(imgs, n);
		}
		else if(keyid==37){
			ismove=left(imgs, n);
		}
		else if(keyid==39){
			ismove=right(imgs, n);
		}
		/*该变量记录用户的分数*/
		gamescore+=gamesum;
		/*该变量记录每次移动获得的分数*/
		gamesum=0;
		/*将总分数显示到页面上*/
		$("#score").html("SCORE&nbsp;:&nbsp;"+gamescore);
		/*判断游戏结束的入口，如果没有移动就进入游戏结束的判断中*/
		if(ismove==false){
			/*游戏结束的判断：调用fun_end(数组)，方法
			判断依据：如果4X4方格上没有空余的位置，
			且每个相邻的数字间的数字均不相等，
			且当前方格中不存在2048的值，显示游戏结束*/
			isend=fun_end(n);
			/*返回值为-1，证明游戏结束*/
			if(isend==-1){
				if(confirm("游戏结束，是否开始下一局")){
					location.reload();
				}
			/*返回值为2，证明游戏胜利*/
			}else if(isend==2){
				if(confirm("恭喜你，游戏胜利")){
					location.reload();
				}
			}
			return;
		}
		/*调用随机数方法，在方格的空白处生成2或4的随机数*/
		setRandom(imgs,n);
	});
});

function up(imgs,n){
	var ismove=false;
	for (var i = 0; i < n.length; i++) {
		//执行相同数字相加的操作
		//isnot0用来记录已经读取到的最后一个不为0的值的位置，同时记录数据读取的位置
		var isnot0=0;
		for (var j = 0; j < n.length; j++) {
			//判断当前读到的数字是否为0，如果是0，就跳出本次循环，进入下一次循环
			if(n[j][i]==0){
				continue;
			}else{
				/*如果isnot0的位置的值与当前读取到的值相等，且isnot0和j不相等，
				执行相加操作，并将当前读取到的下标中的值置为0，同时将判断
				是否移动的开关设置为true*/
				if(n[j][i] == n[isnot0][i] && j!=isnot0){
					n[j][i]=0;
					gamesum+=n[isnot0][i];
					n[isnot0][i]*=2;
					ismove=true;
				}
				/*将isnot0的记录的位置设置为当前读取的值在数组中的下标*/
				isnot0=j;
			}
		}
		//将数字的位置移动
		//记录当前数组该列中的值为0的下标
		var is0=0;
		for (var j = 0; j < n.length; j++) {
			//
			if(n[j][i]==0){
				//设置图片
				$("#i"+imgs[j][i]).attr("src","img/i0.png");
				continue;
			}else{
				/*如果is0记录的值与当前读取数组的下标的值相等或者两者记录的均不为0，就设置相应的图片，
				并将is0记录的位置+1*/
				if(is0==j || (n[j][i]!=0 && n[is0][i]!=0)){
					$("#i"+imgs[is0][i]).attr("src","img/i"+n[is0][i]+".png");
					is0++;
					continue;
				}
				//图片移动动画效果
				$("#i"+imgs[j][i]).css("z-index",10);
				$("#i"+imgs[j][i]).animate({top:"-="+((j-is0)*100)+""},80);
				$("#i"+imgs[is0][i]).animate({top:"+="+((j-is0)*100)+""},0);
				$("#i"+imgs[j][i]).attr("src","img/i"+n[j][i]+".png");
				$("#i"+imgs[is0][i]).attr("src","img/i0.png");
				$("#i"+imgs[is0][i]).css("z-index",1);
				var imgval=imgs[j][i];
				imgs[j][i]=imgs[is0][i];
				imgs[is0][i]=imgval;

				n[is0][i]=n[j][i];
				n[j][i]=0;
				is0++;
				ismove=true;
			}
		}
	}
	return ismove;
}
function down(imgs,n){
	var ismove=false;
	for (var i = 0; i < n.length; i++) {
		//执行相同数字相加的操作
		var isnot0=n.length-1;
		for (var j = n.length-1; j >= 0; j--) {
			if(n[j][i]==0){
				continue;
			}else{
				if(n[j][i] == n[isnot0][i] && j!=isnot0){
					n[j][i]=0;
					gamesum+=n[isnot0][i];
					n[isnot0][i]*=2;
					ismove=true;
				}
				isnot0=j;
			}
		}
		//将数字的位置移动
		var is0=n.length-1;
		for (var j = n.length-1; j >= 0; j--) {
			if(n[j][i]==0){
				$("#i"+imgs[j][i]).attr("src","img/i0.png");
				continue;
			}else{
				if(is0==j || (n[j][i]!=0 && n[is0][i]!=0)){
					$("#i"+imgs[is0][i]).attr("src","img/i"+n[is0][i]+".png");
					is0--;
					continue;
				}
				$("#i"+imgs[j][i]).css("z-index",10);
				$("#i"+imgs[j][i]).animate({top:"-="+((j-is0)*100)+""},80);
				$("#i"+imgs[is0][i]).animate({top:"+="+((j-is0)*100)+""},0);
				$("#i"+imgs[j][i]).attr("src","img/i"+n[j][i]+".png");
				$("#i"+imgs[is0][i]).attr("src","img/i0.png");
				$("#i"+imgs[is0][i]).css("z-index",1);
				var imgval=imgs[j][i];
				imgs[j][i]=imgs[is0][i];
				imgs[is0][i]=imgval;

				n[is0][i]=n[j][i];
				n[j][i]=0;
				is0--;
				ismove=true;
			}
		}
	}
	return ismove;
}
function left(imgs,n){
	var ismove=false;
	for (var i = 0; i < n.length; i++) {
		//执行相同数字相加的操作
		var isnot0=0;
		for (var j = 0; j < n.length; j++) {
			if(n[i][j]==0){
				continue;
			}else{
				if(n[i][j] == n[i][isnot0] && j!=isnot0){
					n[i][j]=0;
					gamesum+=n[i][isnot0];
					n[i][isnot0]*=2;
					ismove=true;
				}
				isnot0=j;
			}
		}
		//将数字的位置移动
		var is0=0;
		for (var j = 0; j < n.length; j++) {
			if(n[i][j]==0){
				$("#i"+imgs[i][j]).attr("src","img/i0.png");
				continue;
			}else{
				if(is0==j || (n[i][j]!=0 && n[i][is0]!=0)){
					$("#i"+imgs[i][is0]).attr("src","img/i"+n[i][is0]+".png");
					is0++;
					continue;
				}
				$("#i"+imgs[j][i]).css("z-index",10);
				$("#i"+imgs[i][j]).animate({left:"-="+((j-is0)*100)+""},80);
				$("#i"+imgs[i][is0]).animate({left:"+="+((j-is0)*100)+""},0);
				$("#i"+imgs[i][j]).attr("src","img/i"+n[i][j]+".png");
				$("#i"+imgs[i][is0]).attr("src","img/i0.png");
				$("#i"+imgs[i][is0]).css("z-index",1);
				var imgval=imgs[i][j];
				imgs[i][j]=imgs[i][is0];
				imgs[i][is0]=imgval;

				n[i][is0]=n[i][j];
				n[i][j]=0;
				is0++;
				ismove=true;
			}
		}
	}
	return ismove;
}
function right(imgs,n){
	var ismove=false;
	for (var i = 0; i < n.length; i++) {
		//执行相同数字相加的操作
		var isnot0=n.length-1;
		for (var j = n.length-1; j >= 0; j--) {
			if(n[i][j]==0){
				continue;
			}else{
				if(n[i][j] == n[i][isnot0] && j!=isnot0){
					n[i][j]=0;
					gamesum+=n[i][isnot0];
					n[i][isnot0]*=2;
					ismove=true;
				}
				isnot0=j;
			}
		}
		//将数字的位置移动
		var is0=n.length-1;
		for (var j = n.length-1; j >= 0; j--) {
			if(n[i][j]==0){
				$("#i"+imgs[i][j]).attr("src","img/i0.png");
				continue;
			}else{
				if(is0==j || (n[i][j]!=0 && n[i][is0]!=0)){
					$("#i"+imgs[i][is0]).attr("src","img/i"+n[i][is0]+".png");
					is0--;
					continue;
				}
				$("#i"+imgs[j][i]).css("z-index",10);
				$("#i"+imgs[i][j]).animate({left:"-="+((j-is0)*100)+""},80);
				$("#i"+imgs[i][is0]).animate({left:"+="+((j-is0)*100)+""},0);
				$("#i"+imgs[i][j]).attr("src","img/i"+n[i][j]+".png");
				$("#i"+imgs[i][is0]).attr("src","img/i0.png");
				$("#i"+imgs[i][is0]).css("z-index",1);
				var imgval=imgs[i][j];
				imgs[i][j]=imgs[i][is0];
				imgs[i][is0]=imgval;

				n[i][is0]=n[i][j];
				n[i][j]=0;
				is0--;
				ismove=true;
			}
		}
	}
	return ismove;
}

function setRandom(imgs,n){
	var m=0;
	var sum=0;
	while(m<1){
		var x=Math.floor(Math.random()*4);
		var y=Math.floor(Math.random()*4);
		if(n[x][y]==0){
			var rnum=Math.floor(Math.random()*20);
			n[x][y] = rnum < 1 ? 4 : 2;
			$("#i"+imgs[x][y]).attr("src","img/i"+n[x][y]+".png");
			m++;
		}
	}
}

function fun_end(n){
	var isfull=-1;
	for(var i=0;i<n.length;i++){
		for(var j=0;j<n.length;j++){
			if(n[i][j]==2048){
				return 2;
			}
			if(n[i][j]==0){
				isfull=0;
			}
		}
	}

	if(isfull==-1){
		for(var i=0;i<n.length-1;i++){
			for(var j=0;j<n.length-1;j++){
				if(n[i][j]==n[i+1][j] || n[i][j]==n[i][j+1]){
					return 0;
				}
				if((i==2 && n[i+1][j]==n[i+1][j+1]) || (j==2 && n[i][j+1]==n[i+1][j+1])){
					return 0;
				}
			}
		}
	}
	return isfull;
}

最后还使用了一个jquery的jquery-1.11.0.min.js包，读者可以自行百度一下！
写的代码备注很详细，希望读者能够理解！