2048小游戏（原生js基础代码篇）

最新推荐文章于 2024-02-29 20:20:13 发布

@星城

最新推荐文章于 2024-02-29 20:20:13 发布

阅读量5.7k

点赞数 4

分类专栏：前端文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_44624386/article/details/104494862

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天在这里，我将给各位呈现一个简单的游戏代码。

想必大家都接触过2048这个小游戏吧，在悠闲时间用于消遣时间最好不过了，那么，我给大家写一个2048最基本的原生js代码。

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>2048小游戏</title>
	<link rel="stylesheet" href="2048.css" />
</head>
<body>
	<!--分数-->
	<p class="header">SCORE: <span id="score01"></span></p>
	<!--游戏部分-->
	<div id="all">
		<!--第一行-->
		<div class="cell"  id="n00"></div>
		<div class="cell"  id="n01"></div>
		<div class="cell"  id="n02"></div>
		<div class="cell"  id="n03"></div>
		<!--第二行-->
		<div class="cell"  id="n10"></div>
		<div class="cell"  id="n11"></div>
		<div class="cell"  id="n12"></div>
		<div class="cell"  id="n13"></div>
		<!--第三行-->
		<div class="cell"  id="n20"></div>
		<div class="cell"  id="n21"></div>
		<div class="cell"  id="n22"></div>
		<div class="cell"  id="n23"></div>
		<!--第四行-->
		<div class="cell"  id="n30"></div>
		<div class="cell"  id="n31"></div>
		<div class="cell"  id="n32"></div>
		<div class="cell"  id="n33"></div>
	</div>
	<!--弹框-->
	<div id="gameover" >
		<p>
			GAME OVER
			<br />
			SCORE:<span id="score02"></span>
			<br />
			<a onclick="typeonce()">TYPE AGAIN</a>
		</p>
		
	</div>
	<script type="text/javascript" src="2048.js" ></script>
</body>
</html>

CSS:

*{
font-family: arial;
/*	user-select: none;*/
font-weight: bold;
}

.header{
width: 480px;
font-size:40px ;
margin: 60px auto 5px auto;
}

#score01{
color: #F00;
}

#all{
width: 480px;
height: 480px;
background-color: #bbada0;
margin: 0 auto;
border-radius: 20px;
}

.cell{
width: 100px;
height: 100px;
background-color: #ccc0b3;;
border-radius: 10px;
text-align: center;
line-height: 100px;
font-size: 40px;
color: #fff;
float: left;
margin: 16px 0px 0px 16px;

}

.n2{
background-color:#eee3da;
color:#776e65;
}
.n4{
background-color:#ede0c8;
color:#776e65;
}
.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;
font-size:40px;
}
.n2048{
background-color:#09c;
font-size:40px;
}
.n4096{
background-color:#a6c;
font-size:40px;
}
.n8192{
background-color:#93c;
font-size:40px;
}

#gameover{
position: absolute;
background-color: rgba(0,0,0,0.2);
left: 0;
top: 0;
right: 0;
bottom: 0;
font-size: 40px;
display: none;
}

#gameover p{
background-color: #fff;
width: 300px;
height: 200px;
border-radius: 10px;
line-height: 66.66px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}

#gameover p a{
padding: 10px;
text-decoration: none;
background-color: #9f8d77;
color: #fff;
border-radius: 10px;
cursor: pointer;
}

JS:

//游戏环节
var game = {
data: [],  //定义一个数组存储
score: 0,  //开始时分数为0
gamerunning: 1,  //游戏开始时游戏状态为1
gameover: 0,  //游戏结束时游戏状态为0
status: 1,  //个人状态与游戏状态相对应，默认为1
//游戏开始时还原所有
start: function () {
	this.data = [
		[0, 0, 0, 0],
		[0, 0, 0, 0],
		[0, 0, 0, 0],
		[0, 0, 0, 0]
	];
	this.score = 0;
	this.status = this.gamerunning;
	//随机生成两个数2或者4，方法调用5次
	this.randomNum();
	this.randomNum();
	this.randomNum();
	this.randomNum();
	this.randomNum();
	//更新视图
	this.dataView();
},
//随机赋值
randomNum: function () {
	//循环获取是否方块存在空白位置
	while (true) {
		//获取随机值
		var r = Math.floor(Math.random() * 4);   //随机生成一个行
		var c = Math.floor(Math.random() * 4);   //随机生成一个列
		//判断 
		if (this.data[r][c] == 0) {
			//随机生成2或者4
			var num = Math.random() > 0.2 ? 2 : 4;   //三元表达式
			//赋值
			this.data[r][c] = num;
			//停止循环
			break;

		}

	}
},
//更新视图的方法
dataView: function () {
	//		直接大循环
	for (var r = 0; r < 4; r++) {  //循环行
		for (var c = 0; c < 4; c++) { //循环里面的每个单元格
			//				找到对应的id的div
			var div = document.getElementById("n" + r + c);  //字符串拼接
			if (this.data[r][c] != 0) {
				div.innerHTML = this.data[r][c]; //直接把数组中的数字展示到div中
				div.className = "cell n" + this.data[r][c]; //设置对应div的样式
			} else {
				div.innerHTML = "";  //等于0的时候，div里面的内容直接置空
				div.className = "cell";
			}
		}
	}
	//		更新分数
	document.getElementById("score01").innerHTML = this.score;
	//		判断游戏是否结束
	if (this.status == this.gameover) {  //游戏结束弹出框显示
		document.getElementById("gameover").style.display = "block";
		document.getElementById("score02").innerHTML = this.score;
	} else {   //游戏没有结束的时候弹出框一直隐藏
		document.getElementById("gameover").style.display = "none";
	}
},
//	判断游戏是否结束的方法
isgameove: function () {
	for (var r = 0; r < 4; r++) {
		for (var c = 0; c < 4; c++) {
			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;   //上面情况全都不符合，表示游戏已经GG了，返回一个true
},
//移动的方法
//数字左移
moveLeft: function () {
	//移动之前转化一次字符串
	var before = String(this.data);
	//循环每行数据
	for (var r = 0; r < 4; r++) {
		//处理每一行的函数
		this.moveLeftinRow(r);
	}
	//移动之后转换一次
	var after = String(this.data);
	//判断
	if (before != after) {
		//随机生成两个数2或者4
		this.randomNum();
		if (this.isgameove()) { //如果游戏结束
			//自己状态等于游戏结束状态
			this.status = this.gameover;
		}
		//更新视图
		this.dataView();
	}

},
//处理每一行的数据
moveLeftinRow: function (r) {
	//循环获取后面的数据,最左边不用考虑
	for (var c = 0; c < 3; c++) {
		//变量接收
		var nextc = this.moveLeftNum(r, c);
		//判断是否为-1，否则则为找到数字
		if (nextc != -1) {
			if (this.data[r][c] == 0) {  //如果当前的数等于0，则当前的数和找到的数进行比较
				this.data[r][c] = this.data[r][nextc];
				//找到的数清空变为0
				this.data[r][nextc] = 0;
				//再次从最左边的数进行循环
				c--;

			}
			else if (this.data[r][c] == this.data[r][nextc]) {
				//如果当前的数等于找到的数，则相加
				this.data[r][c] *= 2;
				//找到的数清空变为0
				this.data[r][nextc] = 0;
				//数字相加一次分数加
				this.score += this.data[r][c];

			}
		} else {
			//如果没有找到数，则退出循环
			break;
		}
	}

},
moveLeftNum: function (r, c) {	//	左移
	//循环获取后面的数据,最左边不用考虑
	for (var i = c + 1; i < 4; i++) {
		//判断后面是否找到数字
		if (this.data[r][i] != 0) {
			//返回下标
			return i;
		}
	}
	//如果没有找到，返回
	return -1;
},
//移动的方法
//数字右移
moveRight: function () {
	//移动之前转化一次字符串
	var before = String(this.data);
	//循环每行数据
	for (var r = 0; r < 4; r++) {
		//处理每一行的函数
		this.moveRightinRow(r);
	}
	//移动之后转换一次
	var after = String(this.data);
	//判断
	if (before != after) {
		//随机生成两个数2或者4
		this.randomNum();
		if (this.isgameove()) { //如果游戏结束
			//自己状态等于游戏结束状态
			this.status = this.gameover;
		}
		//更新视图
		this.dataView();
	}

},
//处理每一行的数据
moveRightinRow: function (r) {
	//循环获取前面的数据,最左边不用考虑
	for (var c = 3; c >= 0; c--) {
		//变量接收
		var nextc = this.moveRightNum(r, c);
		//判断是否为-1，否则则为找到数字
		if (nextc != -1) {
			if (this.data[r][c] == 0) {  //如果当前的数等于0，则当前的数和找到的数进行比较
				this.data[r][c] = this.data[r][nextc];
				//找到的数清空变为0
				this.data[r][nextc] = 0;
				//再次从最右边的数进行循环
				c++;

			}
			else if (this.data[r][c] == this.data[r][nextc]) {
				//如果当前的数等于找到的数，则相加
				this.data[r][c] *= 2;
				//找到的数清空变为0
				this.data[r][nextc] = 0;
				//数字相加一次分数加
				this.score += this.data[r][c];

			}
		} else {
			//如果没有找到数，则退出循环
			break;
		}
	}

},
moveRightNum: function (r, c) {	//	左移
	//循环获取前面的数据,最右边不用考虑
	for (var i = c - 1; i >= 0; i--) {
		//判断前面是否找到数字
		if (this.data[r][i] != 0) {
			//返回下标
			return i;
		}
	}
	//如果没有找到，返回
	return -1;
},
//移动的方法
//数字上移
moveUp: function () {
	//移动之前转化一次字符串
	var before = String(this.data);
	//循环每行数据
	for (var c = 0; c < 4; c++) {
		//处理每一行的函数
		this.moveUpinRow(c);
	}
	//移动之后转换一次
	var after = String(this.data);
	//判断
	if (before != after) {
		//随机生成两个数2或者4
		this.randomNum();
		if (this.isgameove()) { //如果游戏结束
			//自己状态等于游戏结束状态
			this.status = this.gameover;
		}
		//更新视图
		this.dataView();
	}

},
//处理每一行的数据
moveUpinRow: function (c) {
	//循环获取前面的数据,最上面不用考虑
	for (var r = 0; r < 3; r++) {
		//变量接收
		var nextr = this.moveUpNum(r, c);
		//判断是否为-1，否则则为找到数字
		if (nextr != -1) {
			if (this.data[r][c] == 0) {  //如果当前的数等于0，则当前的数和找到的数进行比较
				this.data[r][c] = this.data[nextr][c];
				//找到的数清空变为0
				this.data[nextr][c] = 0;
				//再次从最上面的数进行循环
				r--;

			}
			else if (this.data[r][c] == this.data[nextr][c]) {
				//如果当前的数等于找到的数，则相加
				this.data[r][c] *= 2;
				//找到的数清空变为0
				this.data[nextr][c] = 0;
				//数字相加一次分数加
				this.score += this.data[r][c];

			}
		} else {
			//如果没有找到数，则退出循环
			break;
		}
	}

},
moveUpNum: function (r, c) {	//	上移
	//循环获取上面的数据,最右边不用考虑
	for (var i = r + 1; i < 4; i++) {
		//判断下面是否找到数字
		if (this.data[i][c] != 0) {
			//返回下标
			return i;
		}
	}
	//如果没有找到，返回
	return -1;
},
//移动的方法
//数字下移
moveDown: function () {
	//移动之前转化一次字符串
	var before = String(this.data);
	//循环每行数据
	for (var c = 0; c < 4; c++) {
		//处理每一行的函数
		this.moveDowninRow(c);
	}
	//移动之后转换一次
	var after = String(this.data);
	//判断
	if (before != after) {
		//随机生成两个数2或者4
		this.randomNum();
		if (this.isgameove()) { //如果游戏结束
			//自己状态等于游戏结束状态
			this.status = this.gameover;
		}
		//更新视图
		this.dataView();
	}

},
//处理每一行的数据
moveDowninRow: function (c) {
	//循环获取前面的数据,最下面不用考虑
	for (var r = 3; r >= 0; r--) {
		//变量接收
		var nextr = this.moveDownNum(r, c);
		//判断是否为-1，否则则为找到数字
		if (nextr != -1) {
			if (this.data[r][c] == 0) {  //如果当前的数等于0，则当前的数和找到的数进行比较
				this.data[r][c] = this.data[nextr][c];
				//找到的数清空变为0
				this.data[nextr][c] = 0;
				//再次从最下面的数进行循环
				r++;

			}
			else if (this.data[r][c] == this.data[nextr][c]) {
				//如果当前的数等于找到的数，则相加
				this.data[r][c] *= 2;
				//找到的数清空变为0
				this.data[nextr][c] = 0;
				//数字相加一次分数加
				this.score += this.data[r][c];

			}
		} else {
			//如果没有找到数，则退出循环
			break;
		}
	}

},
moveDownNum: function (r, c) {	//	下移
	//循环获取前面的数据,最下面不用考虑
	for (var i = r - 1; i >= 0; i--) {
		//判断上面是否找到数字
		if (this.data[i][c] != 0) {
			//返回下标
			return i;
		}
	}
	//如果没有找到，返回
	return -1;
}

}

//键盘按下时事件
document.onkeydown = function () {
//键盘上
if (event.keyCode == 37) {   //键盘左
	console.log("左")
	//左移
	game.moveLeft();
} else if (event.keyCode == 38) {   //键盘上
	console.log("上")
	//上移
	game.moveUp();

} else if (event.keyCode == 39) {   //键盘右
	console.log("右")
	//右移
	game.moveRight();
} else if (event.keyCode == 40) {   //键盘下
	console.log("下")
	//下移
	game.moveDown();
}

}

//键盘按下时事件
document.onkeydown = function () {
//键盘上
if (event.keyCode == 37) {   //键盘左
	console.log("左")
	//左移
	game.moveLeft();
} else if (event.keyCode == 38) {   //键盘上
	console.log("上")
	//上移
	game.moveUp();

} else if (event.keyCode == 39) {   //键盘右
	console.log("右")
	//右移
	game.moveRight();
} else if (event.keyCode == 40) {   //键盘下
	console.log("下")
	//下移
	game.moveDown();
}

}

//游戏开始时调用
game.start();
console.log(game.data)
console.log(game.score)

//点击再来一次
function typeonce() {
document.getElementById("gameover").style.display = "none";
window.location.href = "2048.html";
}

以上代码便是2048小游戏最基本的游戏代码了，当然，你也可以将写好的2048打包成App在移动端运行，该代码是Web端和移动端都能运行的了。

具体的移动端我放在这里了 2048小游戏移动端与Web端基本代码
密码：321200

希望对大家有帮助！

@星城

关注

4
点赞
踩
47

收藏

觉得还不错? 一键收藏
4
评论
2048小游戏（原生js基础代码篇）

今天在这里，我将给各位呈现一个简单的游戏代码。想必大家都接触过2048这个小游戏吧，在悠闲时间用于消遣时间最好不过了，那么，我给大家写一个2048最基本的原生js代码。HTML:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>2048小游戏</titl...
复制链接

扫一扫