原生JS实现2048小游戏

已于 2024-11-09 02:51:07 修改
阅读量2.7k 收藏 27
点赞数 4
分类专栏： # JavaScript 文章标签： Web前端 JavaScript 经典小游戏2048
于 2018-05-26 19:27:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39725309/article/details/80462199
版权

#JS原生实现2048经典小游戏
虽然2048都已经众所周知，但还是看一下游戏的效果吧

这里是链接https://codepen.io/windxuan/pen/odrpGX
这里写图片描述
这里写图片描述

##接下来我们来写2048的实现部分
####HTML部分
布局很简单，
一个大的div容器里嵌套16个等比的小盒子。
一个盒子记录游戏中的分数。
一个盒子记录游戏结束时的分数（设置display:none；在游戏结束时弹出）。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2048</title>
	<link rel="stylesheet" href="css/2048.css">
</head>
<body>
	<!-- header -->
	<div class="header">
		SCORE:<span id="score_01">0</span>
	</div>

	<!-- 4*4 -->
	<div class="cell_all">
		<!-- 第一行 -->
		<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>
		<!--[
				[00,01,02,03],
				[10,11,12,13],
				[20,21,22,23],
				[30,31,32,33]
		]-->
	</div>

	<!-- gameover -->
	<div class="gameover" id="gameover">
		<p class="gameover_p">
			GAMEOVER！<br>
			SCORE:<span id="score_02">0</span><br>
			<a href="javascript:game.start()">TRY AGAIN!</a>
		</p>
	</div>

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

###然后用CSS把页面修饰一下
####CSS部分

*{
	font-family: arial;
	margin: 0;
	padding: 0;
}
.header{
	width: 500px;
	height: 50px;
	color: #000;
	margin: 0 auto;
	border: 1px solid #000;
	font-size: 48px;
	font-weight: bold;
	margin-top: 100px;
}
.header>span{
	color: #f00;
}
.cell_all{
	width: 500px;
	height: 500px;
	border: 1px solid #0ff;
	margin: 0 auto;
	background-color: #bbada0;
	border-radius: 10px;
}
.cell{
	width: 110px;
	height: 110px;
	border: 1px solid #000;
	opacity: 0.95;
	float: left;
	border-radius: 80px;
	margin-left: 12px;
	margin-top: 12px;
	font-size: 35px;
	font-weight: bold;
	line-height: 110px;
	text-align: center;
	color: #fff;
}
/*不同数字加减后的数值*/
.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{
	font-size:40px;
	background-color:#33b5e5;
}
.n2048{
	font-size:40px
	background-color:#09c;
}
.n4096{
	background-color:#a6c;
	font-size:40px;
}
.n8192{
	background-color:#93c;
	font-size:40px;
}

/*gameover*/
.gameover{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.3);
	display: none;
}
.gameover>p{
	width: 300px;
	height: 200px;
	background-color: #fff;
	border: 1px solid #000;
	border-radius: 15px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -100px;
	margin-left: -150px;

	font-size: 30px;
	font-weight: bold;
	text-align: center;
	line-height: 66px;
}

.gameover_p>span{
	color: #f00;
	font-size: 40px;
}

.gameover_p>a{
	text-decoration: none;
	background-color: #9f8d77;
	border-radius: 5px;
	color: #fff;
	padding: 8px 8px 4px;
}

写完了是这样子的（把用于辅助的边框线去掉）
这里写图片描述

好了，接下来用JavaScript实现2048的核心部分（游戏运行）

  • 每一步的作用都写上了注释
  • 在开始编写代码前，最重要的是思路（游戏运行的流程），而代码只是实现思路的工具：
    ####1. 游戏开始阶段
    1.1 生成两个随机数. （位置随机，数字为：2 或 4）；
    1.2 初始化分数；
    ####2. 游戏运行阶段
    2.1 每次触发事件后，根据游戏对应的情况更新视图；
    2.2 时实判断游戏状态，当游戏结束时，更改游戏状态。
    ####3. 游戏结束阶段
    3.1 总结分数，弹出游戏结束时的视图。
    3.2 上传分数到好友排名（可以引申）

好了，理清了思路我们开始编译代码部分~

####JavaScript部分

//创建一个对象,所有的操作全部都在对象里面完成
var game = {
	data:[],//存放数据
	score:0,//分数
	status:1,// 定义游戏状态：可以玩的时候为状态为：1
	gameover:0,//游戏结束的状态定义为0
	gamerunning:1,//表示的是当前游戏的状态，时时刻刻检测该状态，如果这个状态等于1，表示可以继续，如果等于0，结束

	// 游戏开始
	start: function(){
		game.gamerunning = game.status;
		game.score = 0;	//游戏开始时分数清零
		game.data = [ //重新给数组进行赋值
				[0,0,0,0],
				[0,0,0,0],
				[0,0,0,0],
				[0,0,0,0]
		]
		// 生成两个随机数
		game.randomNum();
		game.randomNum();
		// 生成游戏开始时的视图
		game.dataView();
	},
	randomNum:function(){//生成随机数的方法
		//这个方法,需要用到的时候调用,不需要用到的时候不用
		//数字要随机生成2或者4;位置也要随机生成
		for(;;){//死循环，直到生成完成再停止，否则一直生成
			var r = Math.floor(Math.random()*4);//生成一个行
			var c = Math.floor(Math.random()*4);//生成一个列
			if(game.data[r][c] == 0){//只有数组这一个位置为 0 的时候才可以赋值
				var num = Math.random()>0.5?2:4; //随机生成2或者4
				game.data[r][c] = num;
				break;//退出死循环
			}
		}
	},
	dataView:function(){	//更新视图的方法
		for (var r = 0; r < 4; r++) {
			for(var c = 0; c<4;c++){
				// console.log(game.data[r][c]);
				var div = document.getElementById("c" + r + c); //获取到每一个对应的div
				if(game.data[r][c] != 0){	//如果数组里有数值
					div.innerHTML = game.data[r][c];//给单元格进行赋值
					div.className = "cell n" + game.data[r][c]; //改变样式
				}else{	//如果数组里不含有元素
					div.innerHTML = "";//数组中的元素如果为0的时候，界面中是没有值的，把内容清空
					div.className = "cell";//样式恢复
				}
			}
		}

		document.getElementById("score_01").innerText = game.score;	//找到分数的ID，更新分数

		if(game.gamerunning == game.gameover){	//如果游戏处于结束的阶段了，更新视图
			document.getElementById("gameover").style.display = "block";//在进行中 对某一状态进行直接的改变 "游戏结束时，将结束时对应写好的'框'display:显示出来'block'"
			document.getElementById("score_02").innerText = game.score;//找到结束时的分数ID，更新分数
		}else{//如果游戏处于游戏状态中
			document.getElementById("gameover").style.display = "none";
		}// 定义游戏的结束状态和游戏时的状态，根据状态来确定何时弹出对应状态的'display:block || none'
	},
	isgameover:function(){	//	判断游戏是否结束的方法
		// 那，游戏结束需要满足哪些条件呢？
		// 1.格子全部都不为0的时候 && 相邻的位置不能有相同的
		// 给函数增加一个返回值,如果false表示还可以继续,ture表示游戏结束
		for(var r = 0;r<4;r++){
			for(var c = 0;c<4;c++){
				if(game.data[r][c] == 0){	//如果有等于零的情况，则游戏继续
					return false;
				}
				if(c<3){//检测同一行之间是否有相同
					if(game.data[r][c] == game.data[r][c+1]){
						return false;
					}
				}
				if(r<3){//检测同一列之间是否有相同
					if(game.data[r][c] == game.data[r+1][c]){
						return false;
					}
				}

			}
		}
		return true;//如果条件全都不满足，表示游戏结束
	},

	//移动的方法：
	//左移
	moveLeft:function(){
		var before = String(game.data);//给移动之前的数组“拍个照”		因为数组之间不能直接比较(地址问题),所以这里需要先将其转化为字符串,然后才能用于比较
		for(var r = 0;r<4;r++){
			game.moveLeftinRow(r);
		}
		var after = String(game.data);//给移动之后的数组“拍个照”
		// 比较“拍照”前的前后
		if(before != after){	//	若是前后不相等
			game.randomNum();	//生成一个随机数
			if(game.isgameover()){
				game.gamerunning == game.gameover;		//游戏状态改变为gameover
			}
			game.dataView();//更新视图
		}
	},
	moveLeftinRow:function(r){
		for(var c = 0;c<3;c++){
			var nextc = game.moveLeftNextRows(r,c);//找数字,并依据不同的情况返回值
			if(nextc != -1){//在位置game.data[r][i]上找到了元素
				if(game.data[r][c] == 0){//如果为0,则替代
					game.data[r][c] = game.data[r][nextc];
					game.data[r][nextc] = 0;
					c--;
				}else if(game.data[r][c] == game.data[r][nextc]){
					game.data[r][c] *= 2;
					game.score += game.data[r][c];
					game.data[r][nextc] = 0;
				}
			}else{//如果没找到
				break;
			}
		}
	},
	moveLeftNextRows:function(r,c){//找位置的函数
		for (var i = c+1;i<4;i++) {//从当前位置的下一个元素开始去找,所以是 c+1(当前位置为c，下一个为c+1)
			if (game.data[r][i] != 0) {//如果不等于0，则表明位置上存在一个元素
				return i;//找到了就把这个位置直接返回出来
			}
		}
		return -1;//如果没有找到，随意取一个标识符返回回来:表示没有找到
	},
	//	左移结束
	///
	//	右移开始
	moveRight:function(){
		var before = String(game.data);
		for (var r = 0;r<4;r++) {//逐行比较
			game.moveRightinRow(r);
		}
		var after = String(game.data);
		if (before != after) {
			game.randomNum();//生成一个随机数
			if(game.isgameover()){//判断游戏是否结束
				game.gamerunning = game.gameover;
			}
			game.dataView();//更新视图
		}
	},
	moveRightinRow:function(r){
		for(var c = 3;c>0;c--){
			var nextc = game.moveRightNextRows(r,c);//找数字,并根据找数字的情况接收返回值
			if (nextc != -1) {//如果返回值不为 -1,则表示位置上找到了元素
				if(game.data[r][c] == 0){
					game.data[r][c] = game.data[r][nextc];
					game.data[r][nextc] = 0;
					c++;// 这一步,重点理解: 当位置替代发生了改变之后,下一次的比较则从下一位开始比较,需要让它回到原点的位置重新从头开始继续比较
				}else if (game.data[r][c] == game.data[r][nextc]) {
					game.data[r][c] *= 2;
					game.score += game.data[r][c];
					game.data[r][nextc] = 0;
				}
			}else{
				break;
			}
		}
	},
	moveRightNextRows:function(r,c){//找位置的函数
		for(var i = c-1;i>=0;i--){//因为从c开始,所以下一位是从 c-1 开始找
			if (game.data[r][i] != 0) {
				return i;
			}
		}
		return -1;
	},
//	右移结束
	//

	moveTop:function(){//上移的方法
		var before = String(game.data);//强制转换成字符串  移动前给数组拍一个照  //join toString()
//		移动的方法
		for(var c = 0;c<4;c++){//移动每一列
			game.moveTopinRow(c);
		}
		var after = String(game.data);//强制转换成字符串  移动以后给数组拍一个照   ?

		if(before != after){//如果两次拍照不相等，就发生了移动
			game.randomNum();//生成一个随机数
			if(game.isgameover()){//如果游戏结束
				game.gamerunning = game.gameover;//改变游戏的状态
			}
			game.dataView();//移动完成数据更新
		}

	},
	moveTopinRow:function(c){//仅仅移动一行
		for(var r = 0;r<4;r++){
			var nextr = game.moveTopNextRows(r,c);//获取到后面数字的位置   1 2 3  -1
			if(nextr != -1){//如果后面找到元素
				if(game.data[r][c] == 0){//如果为0，就替代
					game.data[r][c] = game.data[nextr][c];//
					game.data[nextr][c] = 0;
					r--;//从原地开始，继续往后
				}else if(game.data[r][c] == game.data[nextr][c]){//如果相等
					game.data[r][c] *= 2;//当前位置的值*2
					game.score += game.data[r][c];//加上分数
					game.data[nextr][c] = 0;//位置变为0
				}
			}else{//如果没有找到元素
				break;//直接退出循环
			}
		}
	},
	moveTopNextRows:function(r,c){
		for(var i = r + 1;i < 4;i++){
			//如果不为0，表示找到，就返回i，i对应的格子的几个位置
			if (game.data[i][c] != 0) {
				return i;
			}
		}
		return -1//表示的是后面都找不到元素。表示返回一个状态，这个状态自己定义，只要后面对应就OK
	},
	//

	moveDown:function(){//下移的方法
		var before = String(game.data);//强制转换成字符串  移动前给数组拍一个照  //join toString()
//		移动的方法
		for(var c = 0;c<4;c++){//移动每一列
			game.moveDowninRow(c);
		}
		var after = String(game.data);//强制转换成字符串  移动以后给数组拍一个照   ?

		if(before != after){//如果两次拍照不相等，就发生了移动
			game.randomNum();//生成一个随机数
			if(game.isgameover()){//如果游戏结束
				game.gamerunning = game.gameover;//改变游戏的状态
			}
			game.dataView();//移动完成数据更新
		}

	},
	moveDowninRow:function(c){//仅仅移动一行
		for(var r = 3;r>=0;r--){
			var nextr = game.moveDownNextRows(r,c);//获取到后面数字的位置   1 2 3  -1
			if(nextr != -1){//如果后面找到元素
				if(game.data[r][c] == 0){//如果为0，就替代
					game.data[r][c] = game.data[nextr][c];//
					game.data[nextr][c] = 0;
					r++;//从原地开始，继续往后
				}else if(game.data[r][c] == game.data[nextr][c]){//如果相等
					game.data[r][c] *= 2;//当前位置的值*2
					game.score += game.data[r][c];//加上分数
					game.data[nextr][c] = 0;//位置变为0
				}
			}else{//如果没有找到元素
				break;//直接退出循环
			}
		}
	},
	moveDownNextRows:function(r,c){
		for(var i = r - 1;i >= 0;i--){
			//如果不为0，表示找到，就返回i，i对应的格子的几个位置
			if (game.data[i][c] != 0) {
				return i;
			}
		}
		return -1//表示的是后面都找不到元素。表示返回一个状态，这个状态自己定义，只要后面对应就OK
	}
}

	game.start();
	document.onkeydown = function(e){
		var e = e || event || arguments[0];
		if(e.keyCode == 37){
			game.moveLeft();
		}else if (e.keyCode == 39) {
			game.moveRight();
		}else if (e.keyCode == 38) {
			game.moveTop();
		}else if (e.keyCode == 40) {
			game.moveDown();
		}
	}

以上，便是2048小游戏完整实现~

猫猫的小茶馆
关注
专栏目录
原生JS经典小项目-DOM练习
05-18
原生JS经典小项目-DOM练习
JavaScript——原生JS基础
2401_87196723的博客
09-19 1005
join(): 将数组中的元素，全部转换为字符串，并拼接起来。是js提供给开发者的一款内置常见数学公式的对象，所有Math对象中的方法, 都会有返回值。但函数执行结束后，形参这块内存被回收，下次函数再被调用时，重新分配给形参空间;需要写在return关键字后， 可以是一个值，也可以是一个表达式计算出来的值。数组是个不挑食的家伙，对其自身储存的数组元素并没有什么限制，无论是数量还是类型。数组是存储1个或多个数据的容器，它是一组内存空间。在调用函数的过程中，实参是具体的数据， 形参只是一块空白的内存空间；
js实现2048
∑
05-22 627
HTML： <div id="score"> 0 </div> <div id="game"> </div> <a href="javascript:history.go(0);" id="reset"> 重新开始 </a> JavaScript： $(function() { //初始化 function reset() { _start = 0; _score = 0; Garr = ..
深入解析JavaScript实现的2048游戏引擎
最新发布
weixin_42311427的博客
10-09 1020
本文还有配套的精品资源，点击获取 简介：2048是一款广受欢迎的数字拼图游戏，其背后的JavaScript实现的游戏引擎——2048-engine，揭示了编程艺术与游戏设计的融合。2048-engine通过轻量级的JavaScript脚本语言，提供实时用户交互体验，并采用精确的逻辑控制和数据结构设计，实现了游戏的核心逻辑。本教程深入解析了棋盘初始化、数字方块的生成与合并、用...
JavaScript实现2048小游戏，我终于赢了一把
2401_84092809的博客
05-12 411
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
原生js实现2048小游戏
m0_50319610的博客
12-09 2911
原生js实现2048小游戏前言一、效果图二、使用步骤1.目录2.代码部分总结 前言 本项目使用原生js技术完成2048。 一、效果图 二、使用步骤 1.目录 2.代码部分 html代码: 2048小游戏 <div class="container">`在这里插入代码`在这里插入代码片`片` <div class="main"> <div class="gameName">2048小游戏</div>
js的原生项目
樊小勇的博客
04-19 3394
JS原生项目 知识点-思维导图 JS作用 实际项目里js的应用点 1.获取数据渲染页面 2.页面上数据的处理 3.页面跳转时数据的传输 可见，JS的真正作用是处理数据 下面是我根据导图，结合项目代码进行的一些总结 项目总结 基本知识点 一、面向对象编程方式 我们把要处理的页面当一个对象比如对影片列表处理的时候 var pian = { // 对影片页面处理，我们创建一个对应的对象pi...
原生js练手小项目（1.1~1.6）
qq_41706280的博客
10-29 5101
发现了个很好的原生js练手的地方，特此开个博文作为记录 练手地址 以下是我对每个题目的解答，不标准，只是做个记录而已 1.1 <!DOCTYPE html> <html lang="en"> <head> <title>demo-1.1</title> <style> body{ ...
小兔鲜项目-原生JS实现页面注册模块
Zhang_wang_yun的博客
04-02 1947
小兔鲜项目-原生JS实现页面注册模块
（新手向js项目）小白必看的原生js实现贪吃蛇游戏
weixin_51953261的博客
10-10 1240
前端入门，用原生js开发贪吃蛇小游戏
原生js编写2048小游戏
10-20
原生JavaScript编写的2048小游戏是一个经典的网页游戏开发案例，这个游戏通过键盘上下左右的控制来合并数字块，每合并一次，数字块的数值会相加，最终目标是得到数字“2048”块。此类游戏的实现涵盖了JavaScript编程...
2048小游戏 - 原生JavaScript实现
04-18
《2048小游戏 - 原生JavaScript实现》 2048是一款风靡全球的数字拼图游戏，由19岁的意大利开发者Gabriele Cirulli在2014年创造。这款游戏的目标是通过合并相同数字的方块，最终达到2048这个数字。原生JavaScript...
基于原生JavaScript实现的扫雷小游戏.zip
10-23
基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的...
原生js实现2048（启发向）
weixin_63087450的博客
03-25 705
2048是一个不错的练手项目，因为它涵盖了不少js，css的知识，同时也包含了简单的游戏逻辑，这个项目的完成对我来说收获颇丰。他让我见见理解了游戏的构成，和一些看似简单的东西复杂的一面。我会虚心接纳各位的建议，对不足之处进行修改。
JavaScript
qq_44799103的博客
01-08 1843
学习笔记
原生JS实现2048
星云
10-24 612
按↑、→、↓、←控制所有方块移动（如果可能）。两个示数相同的方块将合并成一个方块，新方块示数等于两个方块示数之和。代码用了新语法，对浏览器版本有一定要求。
js2048
nextpeachking的博客
10-23 1710
创建一个4*4的网格 操控上下左右键进行相对应移动，相同的数字碰到一起就会相加，直到网格上的数字与相邻的数字无法再进行移动和相加，游戏结束 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>网页版2048</title> <link rel=
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值