JavaScript实现2048

最新推荐文章于 2024-05-01 14:00:00 发布
最新推荐文章于 2024-05-01 14:00:00 发布
阅读量216 收藏 1
点赞数
文章标签： js2048
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goulite/article/details/103432631
版权

HTML部分

<div class="shell">
		<div class="score">SCORE:<span id="score1">0</span></div>
		<div class="wrapper" id="wrapper">
			<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>
	<div class="game_over">
		<div>
			<span>GAME</span>
			<span>OVER</span>
			<br>
			<span class='sc_span'>SCORE:</span>
			<span id="score2">0</span>
			<br>
			<a href="javascript:game.start()">try again!</a>
		</div>
	</div>

CSS部分

body{
	margin: 0;
	padding: 0;
}
div,a{
	text-decoration: none;
	box-sizing: border-box;
	border-radius: 10px;
}
.shell{
	width: 500px;
	margin:100px auto;
	/*position: relative;*/
}
/*大格子*/
.wrapper{
	width: 435px;
	height: 435px;
	margin: auto; 
	background-color: #bbada0;
}
/*小格子*/
.wrapper>div{
	width: 90px;
	height: 90px;
	float: left;
	margin-left: 15px;
	margin-top: 15px;
	border-radius: 5px;
	background-color: #ccc0b3;
	color: white;
	font-weight: bold;
	line-height: 90px;
	text-align: center; 
	font-size: 40px;
}
/*分数*/
.score,#score1{
	font-size: 50px;
	font-weight: bold;
	font-family: 'Arial';
	margin-left: 30px;
}
#score1{
	color: red;
}
/*游戏结束后的弹出框*/
.game_over{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(33,33,33,0.3);
	display: none;
}
/*弹出框内的文字*/
.game_over>div{
	width: 365px;
	height: 150px;
	font-size: 30px;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -75px;
	margin-left: -182px;
	text-align: center;
	background-color: white;
	border: 1px solid black;
}
/*弹出框内的按钮*/
.game_over a{
	display: inline-block;
	width: 150px;
	height: 45px;
	background-color: #bbada0;
	text-align: center;
	line-height: 39px;
	color: white;
	font-weight: bold;
	font-size: 27px;
	margin-top: 10px;
	border-radius: 5px;
}
/*数字样式*/
.wrapper>.n2{
	background-color:#eee3da;
	color:#776e65;
}
.wrapper>.n4{
	background-color:#ede0c8;
	color:#776e65
}
.wrapper>.n8{background-color:#f2b179}
.wrapper>.n16{background-color:#f59563}
.wrapper>.n32{background-color:#f67c5f}
.wrapper>.n64{background-color:#f65e3b}
.wrapper>.n128{background-color:#edcf72}
.wrapper>.n256{background-color:#edcc61}
.wrapper>.n512{background-color:#9c0}
.wrapper>.n1024{background-color:#33b5e5;font-size:30px}
.wrapper>.n2048{background-color:#09c;font-size:30px}
.wrapper>.n4096{background-color:#a6c;font-size:30px}
.wrapper>.n8192{background-color:#93c;font-size:30px}

JS代码部分

var game = {
	// 创建data属性来存放数据
	data : [],
	// 存放分数，并赋初始值为0
	score : 0,
	// 游戏结束状态
	gameover : 0,
	// 游戏进行状态
	gamerunning : 1,
	// 游戏状态
	status : 1,
	// 游戏开始
	start : function(){
		this.status = this.gamerunning;
		this.data = [];
		this.score = 0;
		// 遍历行
		for(var r=0;r<4;r++){
			// 为每一行创建数组以便存放数据
			this.data[r] = [];
			// 遍历列
			for(var c=0;c<4;c++){
				// 为二维数组中的数据都赋初始值为0
				this.data[r][c] = 0;
			}
		}
		// 调用生成随机数的函数
		this.randNum();
		// 再次调用生成随机数的函数，为了使页面中同时出现两个数字
		this.randNum();
		// 调用时数据在页面中显示的函数
		this.displyNum();
		// console.log(this.data)
	},
	// 创建生成随机数的函数
	randNum : 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;
				// 将随机生成的2或4存放到之前的空格子中
				this.data[r][c] = num;
				break;
			}
		}
	},
	// 使数据在页面中显示的函数
	displyNum : function(){
		// 遍历二维数组
		for(var r = 0;r<4;r++){
			for(var c=0;c<4;c++){
				// 获取页面中id为n[r][c]的格子
				var div = document.getElementById('n' + r + c);
				// 如果下标为r和c的格子中没有数据，
				if(this.data[r][c] == 0){
					// 页面中不显示任何数据，并且样式不会改变
					div.innerHTML = '';
					div.className = 'cell';
				}else{//如果格子中有数据
					// 将数据在页面中显示且样式随之改变
					div.innerHTML = this.data[r][c];
					div.className = 'cell n' + this.data[r][c];
				}
			}
		}
		// 找到分数栏并将最后分数显示在页面中
		document.getElementById('score1').innerHTML = this.score;
		// 如果游戏状态为结束状态
		if(this.status == this.gameover){
			// 将最后分数显示在弹框中的分数栏
			document.getElementById('score2').innerHTML = this.score;
			// 游戏结束时的弹框在页面中显示
			document.getElementsByClassName('game_over')[0].style.display = 'block';
		}else{//否则就依旧隐藏弹框
			document.getElementsByClassName('game_over')[0].style.display = 'none';
		}
	},
	// 判断游戏是否结束
	isend : function(){
		// 遍历二维数组
		for(var r=0;r<4;r++){
			for(var c=0;c<4;c++){
				// 如果还有格子中没有数据
				if(this.data[r][c] == 0){
					// 则游戏状态为未结束
					return false;
				}
				// 如果行下标小于3
				if(r<3){
					// 判断前一个格子中的数据和后一个格子中的数据是否相等，如果相等，则游戏状态为未结束
					 if(this.data[r][c] == this.data[r+1][c]){
					 	return false;
					 }
				}
				// 如果列下标小于3
				if(c<3){
					// 判断上一个格子和下一个格子中的数据是否相等，如果相等，则游戏状态为未结束
					if(this.data[r][c] == this.data[r][c+1]){
						return false;
					}
				}
			}
		}
		// 若以上判断都不符合，则游戏状态为结束
		return true;
	},
	// 左移动
	moveLeft : function(){
		// 因为两个数组比较结果一定为false，所以将二维数字转换为字符串再进行比较
		var before = String(this.data);
		// console.log(this.data)
		// console.log(before)
		// 遍历行
		for(var r=0;r<4;r++){
			// 调用变动一行中每个数据的函数
			this.getLeftIn(r)
		}
		var after = String(this.data)
		// console.log(after)
		// console.log(this.data)
		if(before != after){
			this.randNum();
			if(this.isend()){
				this.status = this.gameover;
			}
			this.displyNum();
		}
	},
	// 变动一行中每个数据
	getLeftIn : function(r){
		// 遍历一行中的每个格子
		for(var c=0;c<3;c++){
			// 创建nextc变量接收getLeftnextIn函数的返回值
			var nextc = this.getLeftnextIn(r,c);
			// 如果nextc不等于-1
			if(nextc != -1){
				// 如果上一个格子中没有数据
				if(this.data[r][c] == 0){
					// 将下一个格子中的数据给上一个格子，即将这个格子移到前面去
					this.data[r][c] = this.data[r][nextc];
					// 清空这个格子中的数据
					this.data[r][nextc] = 0;
					// 这一步骤是为了当一行中的两个有数据的格子中间有一个空格子时，使这两个格子中
					// 的数据能直接赋值
					c--;
					// 如果上一个格子中的数据和下一个格子中的数据相等
				}else if(this.data[r][c] == this.data[r][nextc]){
					// 上一个格子中的结果为这两个格子中的数据相加
					this.data[r][c] *= 2;
					// 下一个格子中的数据清空
					this.data[r][nextc] = 0;
					// 计算总分数
					this.score += this.data[r][c];
				}
			}else{
				break;
			}
		}
	},
	// 得到一行中下一个格子的下标
	getLeftnextIn : function(r,c){
		// 遍历列，i从下标为c的下一个开始，即c+1
		for(var i=c+1;i<4;i++){
			// 如果下标为r和i的格子中数据不为0；
			if(this.data[r][i] != 0){
				// 将下标i返回
				return i;
			}
		}
		// 如果下标i不存在，返回-1
		return -1;
	},
	// 右移动
	moveRight : function(){
		var before = String(this.data);
		for(var r=0;r<4;r++){
			this.getRightIn(r);
		}
		var after = String(this.data);
		if(before != after){
			this.randNum();
			if(this.isend()){
				this.status = this.gameover;
			}
			this.displyNum();
		}
	},
	getRightIn : function(r){
		for(var c=3;c>=0;c--){
			var lastc = this.getRightlastIn(r,c);
			if(lastc != -1){
				if(this.data[r][c] == 0){
					this.data[r][c] = this.data[r][lastc];
					this.data[r][lastc] = 0;
					c++;
				}else if(this.data[r][c] == this.data[r][lastc]){
					this.data[r][c] *= 2;
					this.data[r][lastc] = 0;
					this.score += this.data[r][c];
				}
			}else{
				break;
			}
		}
	},
	getRightlastIn : 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);
		// console.log(this.data)
		// console.log(before)
		for(var c=0;c<4;c++){
			this.getUpIn(c)
		}
		var after = String(this.data)
		// console.log(after)
		// console.log(this.data)
		if(before != after){
			this.randNum();
			if(this.isend()){
				this.status = this.gameover;
			}
			this.displyNum();
		}
	},
	getUpIn : function(c){
		for(var r=0;r<3;r++){
			var nextr = this.getUpnextIn(r,c);
			if(nextr != -1){
				if(this.data[r][c] == 0){
					this.data[r][c] = this.data[nextr][c];
					this.data[nextr][c] = 0;
					r--;
				}else if(this.data[r][c] == this.data[nextr][c]){
					this.data[r][c] *= 2;
					this.data[nextr][c] = 0;
					this.score += this.data[r][c];
				}
			}else{
				break;
			}
		}
	},
	getUpnextIn : 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.getDownIn(c);
		}
		var after = String(this.data);
		if(before != after){
			this.randNum();
			if(this.isend()){
				this.status = this.gameover;
			}
			this.displyNum();
		}
	},
	getDownIn : function(c){
		for(var r=3;r>=0;r--){
			var lastr = this.getDownlastIn(r,c);
			if(lastr != -1){
				if(this.data[r][c] == 0){
					this.data[r][c] = this.data[lastr][c];
					this.data[lastr][c] = 0;
					r++;
				}else if(this.data[r][c] == this.data[lastr][c]){
					this.data[r][c] *= 2;
					this.data[lastr][c] = 0;
					this.score += this.data[r][c];
				}
			}else{
				break;
			}
		}
	},
	getDownlastIn : function(r,c){
		for(var i=r-1;i>=0;i--){
			if(this.data[i][c] != 0){
				return i;
			}
		}
		return -1;
	}

}
game.start()
// 键盘上下左右
document.onkeydown = function(event){
	var event = event || e || arguments[0];
	if(event.keyCode == 37){
		game.moveLeft();
	}else if(event.keyCode == 39){
		game.moveRight();
	}else if(event.keyCode == 38){
		game.moveUp();
	}else if(event.keyCode == 40){
		game.moveDown();
	}

}
搬砖使人头秃
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[ 逻辑锻炼] 用 JavaScript 做一个小游戏 ——2048 （详解版）
weixin_34090562的博客
01-20 399
前言 这次使用了 vue 来编写 2048，主要目的是温习一下 vue。 但是好像没有用到太多 vue 的东西，==！ 估计可能习惯了不用框架吧 之前由于时间关系没有对实现过程详细讲解，本次会详细讲解下比较绕的函数 由于篇幅问题简单的函数就不做详解了 代码地址： https://github.com/yhtx1997/S... 实现...
使用js写一个2048
qq_56460466的博客
05-15 1090
为什么标题叫使用js写一个2048呢？因为我不会页面美化（在这里给div加外边距和内边距已经是我做页面美化的极限了）！！！！本来打算导入SemanticUI来美化页面的，结果发现SemanticUI的弹出层需要jqeruy支持。那我用原生js写不是显得很呆？那就不对页面做美化了，能看就行，消息提示也使用尊贵的alert()来完成吧。 首先我们创建一个html文件，在body标签体内写我们需要的东西 <!DOCTYPE html> <html> <...
超简洁 100行Javascript代码实现2048游戏，浏览器可玩
最新发布
ruzhila的博客
05-01 449
100行代码能做什么事情呢，但是可以用js写一个完整的2048，快来看看吧
javascript实现2048小游戏
热门推荐
funwj的博客
08-01 3万+
最近打算系统的学习一下javascript，想做点项目练手，就选择用javascript实现我比较喜欢玩的2048游戏，大体完成以后还是蛮有成就感的。 游戏相关截图：
【javascript】2048小游戏
qq_63806300的博客
06-27 1853
2048是一款风靡全球的小游戏，具体的玩法就不多说了，最早于2014年Gabriele Cirulli在github发表的版本。不过此项目依赖于GULP。本文就用javascript写出一个较为完整的2048游戏。以下是本文实现的游戏界面：2048的实现可以分为3个部分：游戏界面绘制、分数逻辑和方向控制逻辑。
2023-04-14 使用纯JS实现一个2048小游戏
GAARA
04-14 1798
一.实现思路 1.2048的逻辑 2.移动操作的过程中会有三种情况 二.代码部分:分为初始化部分和移动部分 1.初始化部分 1.1.生成第一个方块: 1.2.生成第二个方块: 2.移动过程部分: 三.实现代码 1.HTML部分 2.CSS部分 3.JS部分 3.1.game对象的属性 3.2.game对象的start方法 3.3.game对象的randomNum方法 3.4.game对象的dataView方法 3.5.game对象的isGameOver方法 3.6.game对象中设置移动的方法(以左移动为例
JavaScript 实现 2048 小游戏
11-30
本项目为使用JavaScript实现2048小游戏。游戏玩法：在 4*4 的16宫格中，您可以选择上、下、左、右四个方向进行操作，数字会按方向移动，相邻的两个数字相同就会合并，组成更大的数字，每次移动或合并后会自动增加一...
javascript实现2048游戏示例
10-25
主要介绍了javascript实现2048游戏示例,需要的朋友可以参考下
JavaScript实现2048小游戏
02-26
JavaScript实现的2048小游戏是一款基于数字合并的益智游戏，由Gabriele Cirulli在2014年开发。在这个游戏中，玩家需要在4x4的棋盘上滑动数字方块，每移动一步，棋盘上会随机出现一个2或4的数字方块，相同数字的方块...
2048 js canvas实现2048小游戏及思路
NEWonclick的博客
11-14 904
canvas动画原理假设一个元素x轴为0，运动到x = 100这样直接绘制是没有动画的x值递增，x值改变时清除画布再次绘制，x=100时运动结束这就是动画原理。
JavaScript之2048 JS css
diaodaya5842的博客
09-16 172
/*game2048*/ //事件处理对象 varEventUtil={ //添加事件 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,ha...
javascript实现2048小游戏_V1.0.0
08-12
原生Js编写一款2048小游戏 涉及点： 鼠标上移、下移、左移、右移 鼠标释放之后移动方块,包括方块数字叠加 方块移动/叠加处理完成之后随机产生新的方块 判断是否没有可移动的方块了，提示游戏接受
Javascript实现的2048游戏
12-16
2048的JS版，能够实现2048的全部功能，可以根据自己需要做更改
Javascript小游戏2048
12-14
JavaScript小游戏，网页版2048，支持键盘事件和鼠标事件。
JavaScript实现2048小游戏，我终于赢了一把
编程界明世隐的博客
09-15 1万+
作者简介 作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 效果图 实现思路 编写页面和画布代码。 绘制背景。 绘制好全部卡片。 随机生成一个卡片（
用javascript实现简版2048小游戏
bs775926015的博客
04-05 1792
** 1、2048小游戏玩法和规则 ** 2048是一款休闲小游戏。 2048界面有16宫格，可以用键盘方向键选择上下左右四个方向进行操作，如果有相邻的两个数字相同就会合并，相加组成新数字，并且每次移动或合并后界面会自动增加一个数字。 当16宫格中没有空格子，且四个方向都无法操作时，游戏会结束。目的是合并出2048这个数字，获得更高分数。 2、游戏界面截图 3、2048游戏实现原理 1、游戏界面由16宫格组成，可以看成是矩阵的形式。 2、在HTML中给每个格子添加类名以及属性，来记录每个格子的位置。 3、
Javascript-小游戏2048 超详细教学说明
qq_41045128的博客
06-16 1983
最近在学前端，趁热找几个小游戏练练手，这里主要用到了html，css，JavaScript
JavaScript实现2048小游戏，我终于赢了一把(1)
m0_60452134的博客
04-03 794
效果图实现思路编写页面和画布代码。绘制背景。绘制好全部卡片。随机生成一个卡片（2或者4）。键盘事件监听（上、下、左、右键监听）。根据键盘的方向，处理数字的移动合并。加入成功、失败判定。处理其他收尾工作。代码实现编写页面代码重开添加画布在2048.js编写代码//渲染数组//游戏标记//初始化数组i < 4;j++) {//初始化if(!el) return;this.el=el;//创建画布//设置宽度//设置高度。
js-基础-简易版2048小游戏
sjyssn的博客
09-08 545
**html+css** &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt;
javascript2048小游戏实现
06-28
JavaScript2048小游戏的实现是通过使用JavaScript编写代码来创建一个2048游戏的网页应用程序。该游戏的核心逻辑是通过将相同数字的方块合并来达到2048的目标。在实现过程中，需要使用HTML和CSS来创建游戏的界面，并...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值