当前位置：移动技术网 > IT编程>网页制作>HTML > 经典小游戏2048 代码教学

经典小游戏2048 代码教学

2020年07月15日 | 移动技术网IT编程 | 我要评论

2048的玩法：

使用方向键移动方块，两个数字相同的方块撞在一起后，将会合并为一个数字是原来两倍的新方块!
在手机上可以滑动屏幕来移动方块！

html代码部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/0710.css">
</head>
<body>
	<div class="container">
		<div class="message">
			<span class="span0">游戏说明：</span>移动数字方块，相邻的两个数字方块相同，可合成一块！
		</div>
		<div class="box">
			<p class="pp">Score:<span id="span1">0</span></p>
			<button id="btn-start">开始游戏</button>
		</div>
		<div class="bgall">
			<!--第一行-->
			<div class="cell" id="c00"></div>
			<div class="cell" id="c01"></div>
			<div class="cell" id="c02"></div>
			<div class="cell" id="c03"></div>
			<!--第二行-->
			<div class="cell" id="c10"></div>
			<div class="cell" id="c11"></div>
			<div class="cell" id="c12"></div>
			<div class="cell" id="c13"></div>
			<!--第三行-->
			<div class="cell" id="c20"></div>
			<div class="cell" id="c21"></div>
			<div class="cell" id="c22"></div>
			<div class="cell" id="c23"></div>
			<!--第四行-->
			<div class="cell" id="c30"></div>
			<div class="cell" id="c31"></div>
			<div class="cell" id="c32"></div>
			<div class="cell" id="c33"></div>
		</div>
	</div>
	
	<div class="gameover" id="gameover">
		<p>GameOver!<br>
		Score:<span id="span2">0</span><br />
		<a href="#">Try Again!</a>
		</p>
	</div>
	<script src="js/0710.js"></script>
</body>
</html>

css样式

*{
	padding: 0;
	margin: 0;
	font-family: "Arvo", Helvetica, sans-serif;
    font-family: 12px;


}
.container{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.message{
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding: 25px 0;
}
.span0{
	font-weight: bolder;
}
.bgall{
	width: 480px;
	height: 480px;
	margin:0 auto;
	position: relative;
	background-color: #9a9a95;
	border-radius: 10px;
	    opacity: 0.7;
}
.box{
width: 480px;
	margin: 0 auto;
	    height: 70px;
}
.pp{
	font-size: 45px;
	font-weight: bold;
	display: inline-block;
	width: 250px;
}
/*开始游戏*/
button:nth-of-type(1){
	margin-left: 123px;
    border-radius: 5px;
    background-color: skyblue;
    width: 100px;
    height: 40px;
    color: white;
    border: none;
    font-size: 17px;
}
/*分数*/
#span1{
	color: pink;
}
/*每个小方块的统一样式*/
.cell{
	width: 100px;
	height: 100px;
	border-radius: 6px;
	/*position: absolute;*/
	margin-top: 16px;
    margin-left: 16px;
	float: left;
    background-color: #F8FFE5;
	font-size: 40px;
	text-align: center;
	color: #fff;
	line-height: 100px;
}


.n2{background-color:#FFC43D}
.n4{background-color:#EF476F}
.n8{background-color:#1B9AAA}
.n16{background-color:#06D6A0}
.n32{background-color:#f37694}
.n64{background-color:#22c2d6}
.n128{background-color:#17f8be}
.n256{background-color:#ffd470}
.n512{background-color:#eb184a}
.n1024{background-color:#14727e}
.n2048{background-color:#05a47b}
.n4096{background-color:#a6c}
.n8192{background-color:#93c}
.n2,.n4{color:#F8FFE5}
.n1024,.n2048,.n4096,.n8192{font-size:40px}


/*游戏结束*/
.gameover{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(55,55,55,.5);
	display: none;

}
.gameover>p{
	width: 300px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #fff;
	/*外边距调整宽和高的一半，保证元素在页面正中间显示*/
	/* margin-top: -257px;
	margin-left: -150px; */
	text-align: center;
	line-height: 1.5em;
	border-radius: 10px;
	border:1px solid #edcf72;
	font-size: 42px;
}
a{
	text-decoration: none;
	color: pink;
}
#span2{
	color: red;
}

js部分

var game = {
	data:[],    	//存放数据
	status:0, 		//当前游戏状态
	score:0,		//分数
	gameover:0, 	//游戏结束状态
	gamerunning:1,  //游戏运行状态

	// 开始游戏
	start:function(){
		this.score = 0;
		this.data =[
			[0,0,0,0],
			[0,0,0,0],
			[0,0,0,0],
			[0,0,0,0]
		]
		// 游戏状态设为游戏运行状态
		this.status = this.gamerunning;
		// 随机生成位置下标
		this.randomNum()
		this.randomNum()
		// 更新视图
		this.updateView();

	// 给键盘按下事件绑定事件处理函数
		document.onkeydown = function(evert){
			var e = evert || window.evert;//兼容性
			switch (e.keyCode) {
				case 37:
					this.moveLeft();
					break;
				case 39:
					this.moveRight();
					break;
				case 38:
					this.moveUp();
					break;
				case 40:
					this.moveDown();
					break;
			}
		}.bind(this);//不改变this指向的话 this是指向document
		remove();
	},

	// 生成随机数
	randomNum:function(){
		while(true){
			var r = Math.floor(Math.random()*4);
			var c = Math.floor(Math.random()*4);
			// 如果当前位置是0，随机生成2，当前位置值为随机生成的2
			if(this.data[r][c] == 0){
				var num = 2;
				this.data[r][c] = num;
				break;
			}
		}
	},
	// 更新视图
	updateView:function(){
		// 循环遍历每个位置
		for(var r = 0;r < 4;r++){
			for(var c = 0; c < 4;c++){
				// 获取当前div的位置
				var div = document.getElementById("c" + r + c);
				// 如果当前位置的数字不是0，获取的div的内容等于这个数
				// 且div的类名为cell n+这个数
				if(this.data[r][c] != 0){
					div.innerHTML = this.data[r][c];
					div.className = "cell n" + this.data[r][c];
				}else{//否则还原 不动
					div.innerHTML = "";
					div.className = "cell";
				}
			}
		}
		// 获取分数
		document.getElementById("span1").innerHTML = this.score;

		// 监测游戏状态
		// 如果游戏状态等于游戏结束状态 游戏结束弹框显示，分数等于当前分数
		if(this.status == this.gameover){
			document.getElementById("span2").innerHTML = this.score;
			document.getElementById("gameover").style.display = "block";
		}else{//否则隐藏
			document.getElementById("gameover").style.display = "none";
		}
	},
	// 判断游戏是否结束，游戏没有结束返回false，游戏结束返回true
	isgameover:function(){
		for(var r = 0;r < 4;r++){
			for(var c = 0; c < 4;c++){
				// 没有结束，3种情况  
				// 1.数组中还有0   
				// 2.左右相邻的有相同的   
				// 3.上下相邻有相同的
				if(this.data[r][c] == 0){
					return false
				}
				if(c<3){
					if(this.data[r][c] == this.data[r][c+1]){
						return false
					}
				}
				if(r<3){
					if(this.data[r][c] == this.data[r+1][c]){
						return false
					}
				}
			}
		}
		return true  //游戏结束
	},
	// 左移动
	moveLeft:function(){
		// 移动之前
		var before = String(this.data);

		// 移动逻辑   循环四行
		for(var r = 0;r < 4;r++){
			this.moveLeftInRow(r);
		}

		// 移动之后
		var after = String(this.data);
		// 如果移动前不等于移动后，随机位置生成2  更新视图
		if(before != after){
			this.randomNum();
			// 如果游戏状态是游戏结束   更改游戏状态
			if(this.isgameover()){
				this.status = this.gameover;
			}
			this.updateView();
		}
	},
	// 单独处理每一行的逻辑
	moveLeftInRow : function(r){
		// 循环每一列
		for(var c = 0;c < 3;c++){
			var nextc = this.getNextInRow(r,c);
			// 如果找到了下一个不为0的位置
			if(nextc != -1){
				// 如果当前位置为0  这个位置和下一个不为0 的交换数字 
			 //如果当前位置数等于下一个位置数  当前位置数*2 分数增加 下一个位置数变为0
				if(this.data[r][c] == 0){
					this.data[r][c] = this.data[r][nextc];
					 this.data[r][nextc] = 0;
					 // c留在原地 等待下一次可能的计算
					 c--;
				}else if(this.data[r][c] == this.data[r][nextc]){
					this.data[r][c] *= 2;
					this.score += this.data[r][c]
					this.data[r][nextc] = 0;
				}
			}else{
				// 没找到 跳出
				break;
			}
		}
		
	},
	// 当前位置的下一个位置
	getNextInRow : function(r,c){   
		// 循环下一个位置
		for(var i = c +1;i<4;i++){
			// 如果当前位置数字不等于0 返回这个数字
			if(this.data[r][i] != 0){
				return i
			}
		}
		// 等于0  没找到 返回-1
		return -1

	},
	// 右移动
	moveRight:function(){
		// 移动之前
		var before = String(this.data);

		// 移动逻辑   循环四行
		for(var r = 0;r < 4;r++){
			this.moveRightInRow(r);
		}

		// 移动之后
		var after = String(this.data);
		// 如果移动前不等于移动后，随机位置生成2  更新视图
		if(before != after){
			this.randomNum();
			// 如果游戏状态是游戏结束   更改游戏状态
			if(this.isgameover()){
				this.status = this.gameover;
			}
			this.updateView();
		}
	},
	// 单独处理每一行的逻辑
	moveRightInRow : function(r){
		// 循环每一列
		for(var c =3;c > 0;c--){
			var prev = this.getPrevInRow(r,c);
			// 如果找到了上一个不为0的位置
			if(prev != -1){
				// 如果当前位置为0  这个位置和上一个不为0 的交换数字 
			 //如果当前位置数等于上一个位置数  当前位置数*2 分数增加 上一个位置数变为0
				if(this.data[r][c] == 0){
					this.data[r][c] = this.data[r][prev];
					 this.data[r][prev] = 0;
					 // c留在原地 等待下一次可能的计算
					 c++;
				}else if(this.data[r][c] == this.data[r][prev]){
					this.data[r][c] *= 2;
					this.score += this.data[r][c]
					this.data[r][prev] = 0;
				}
			}else{
				// 没找到 跳出
				break;
			}
		}
		
	},
	// 当前位置的上一个位置
	getPrevInRow : function(r,c){   
		// 循环上一个位置
		for(var i = c - 1;i >= 0;i--){
			// 如果当前位置数字不等于0 返回这个数字
			if(this.data[r][i] != 0){
				return i
			}
		}
		// 等于0  没找到 返回-1
		return -1

	},
	//上移
	moveUp : function(){
		var before = new String(this.data);
		for(var c = 0;c < 4;c++){//从c列开始
			this.moveUpInRow(c);
		}
		var after = String(this.data);
		if(before != after){
			this.randomNum();
			if (this.isgameover()) {
                this.status = this.gameover;
            }
			this.updateView();
			
		}
	},
	moveUpInRow : function(c){//上移操作
		for(var r = 0;r < 3;r++){
			// 查找c列r行不为0的
			var up = this.getUpInRow(r,c);
			if(up != -1){//如果找到
				// 如果r位置的值是0
				if(this.data[r][c] == 0){
					// 将up位置的值赋值给r位置
					this.data[r][c] = this.data[up][c];
					// 将up位置的值置为0
					this.data[up][c] = 0;
					// r留在原地 等待下一次可能的计算
					r--;
				}else if(this.data[r][c] == this.data[up][c]){// 否则,如果r位置的值等于nextc位置的值
					// 将r位置的值*2
					this.data[r][c] *= 2;
					// 将up位置的值置为0 
					this.data[up][c] = 0;
					this.score += this.data[r][c];
				}
			}else{// 如果没找到
				break;
			}//退出循环
			
		}
	},
	getUpInRow : function(r,c){//下一个
		for(var i = r + 1;i < 4;i++){
			//如果不为0，表示找到，就返回i，i对应的格子的几个位置
			if(this.data[i][c] != 0){
				return i;
			}
		}
		return -1;//找不到 给一个状态 用-1表示该方法的返回
	},
	moveDown : function(){//下移
		var before = String(this.data);
		for(var c = 0; c < 4;c++){
			this.moveDownInRow(c);//找每一列不为0的位置
		}
		var after = String(this.data);
		if(before != after){
			this.randomNum();
			
			this.updateView();
			
		}

	},
	moveDownInRow : function(c){//下移操作
		for(var r = 3;r > 0;r--){
			var Down = this.getDownInRow(r,c);//找到下一个数
			if(Down != -1){
				// 如果r位置的值是0
				if(this.data[r][c] == 0){
					// 将up位置的值赋值给r位置
					this.data[r][c] = this.data[Down][c];
					// 将up位置的值置为0
					this.data[Down][c] = 0;
					// r留在原地 等待下一次可能的计算
					r++;
				}else if(this.data[r][c] == this.data[Down][c]){// 否则,如果r位置的值等于nextc位置的值
					// 将r位置的值*2
					this.data[r][c] *= 2;
					// 将up位置的值置为0 
					this.data[Down][c] = 0;
					this.score += this.data[r][c];
				}
			}else{// 如果没找到
				break;
			}//退出循环
		}
	},
	getDownInRow : function(r,c){
		for(var i = r - 1;i >= 0;i--){
			if(this.data[i][c] != 0){
				return i;
			}
		}
		return -1;
	}

}

document.getElementById("btn-start").onclick = function(){
	game.start();
}

大家一步一步来写，看注释，分析。这个是在电脑上玩的，下次我们来教如何把2048小游戏打包成手机APP;

本文地址：https://blog.csdn.net/Orange_Sheep/article/details/107344806

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

白帽子讲Web安全（重点摘录）

书名：白帽子讲Web安全作者：吴翰清出版社：电子工业出版社阅读进度：重点摘录：第 1 章我的安全世界观第 2 ... [阅读全文]
动态库、静态库、运行时库、引入库之间的区别

动态库、静态库、运行时库、引入库之间的区别杂集。捡对口味的看看吧。转自：http://lingualspark.... [阅读全文]
XSS训练网站XSS Challenges所有题目解（中篇）

目录Stage #6 html事件中的XSSStage #7 列表中的XSSStage #8 列表中的XSSSt... [阅读全文]
【计算机图形学】基于GPU预计算的大气层光效渲染

基于GPU预计算的大气层光效渲染前言大气物理模型渲染方程及其实现实验结果参考文献前言本文叙述基于物理模型的大气层... [阅读全文]
LibGdx学习过程（二）项目结构解析

LibGdx学习过程（二）项目结构解析项目路径及资源分配在根目录中Android/core/desktop/ht... [阅读全文]
[Go] GO语言实战-gin框架项目实现中英文切换

如果项目中需要有多语言的展示，类似网站中英文切换，可以使用下面这个方法来实现主要思路就是，页面html内容展示的... [阅读全文]
杭电多校——第二场（题解）

太难的不会写，因为真的不会。。。1010 Lead of Wisdom现在在题目单中已经可以找到6772Lead... [阅读全文]
如何给未越狱的ios下载历史版本的app？未越狱IOS系统安装历史版本软件的方法，iPhone未越狱的手机如何安装旧版本APP？

IOS由于系统机制问题不支持版本回退某些更新可能导致闪退卡顿等未知bughttps://jingyan.ba... [阅读全文]
itext 根据模板生成pdf 多行数据

前言：基于 html + ccs + itext + 字符串替换完成的。简单，依赖的 jar 少...根据 pd... [阅读全文]
Unity Android playerSetting相关设置

首先上player setting自动化脚本：https://blog.csdn.net/u014452413/... [阅读全文]

网友评论


验证码：

经典小游戏2048 代码教学

2020年07月15日 | 移动技术网IT编程 | 我要评论

2048的玩法：

您可能感兴趣的文章:

相关文章:

网友评论