js写2048小游戏

最新推荐文章于 2024-03-29 09:18:42 发布
最新推荐文章于 2024-03-29 09:18:42 发布
阅读量384 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alice_yo/article/details/103215173
版权

首先页面布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="demo1.css">
</head>
<body>
	<div class="all">
		<div class="head">score:<span id="sco">0</span></div>
		<div class="center">
			<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="foot" id="gameover">
		<div class="end">
	      <div class="one">GAME OVER!!!</div>
	      <div class="two">SCORE:<span id ='score'></span></div>
	      <a href="demo1.html" style="text-decoration: none;"><div class="three">try again</div><a>
	    </div>
    </div>
	 <script type="text/javascript" src="demo.js"></script>
</body>
</html>

效果：

在这里插入图片描述
接下来上js：

var game = {
data:[],//定义一个数组，用来存储所有的游戏数据
score:0,//定义一个存储分数的属性
gameover:0,//定义一个游戏结束时
gamerunning:1,//定义一个游戏运行的状态
status:1,//这是目前游戏的状态，时刻跟上面的两个状态作比较，来确定游戏游戏处于运行还是结束的状态
start:function(){//将页面初始化 游戏开始时候的方法
	this.data = [];
	this.status = this.gamerunning;
	//游戏开始的时候分数清空
	this.score = 0;
	for(var i = 0; i < 4; i++){
		this.data[i] = [];//生成4行[]
		for(var j = 0; j < 4; j++){
			this.data[i][j] = 0;//生成4列[]
		}
	}
	/*console.log(this.data);//最终结果 4行4列*/
	this.randomNum();//第一个数生成时 需要调用一次随机数
	this.randomNum();//第二个数随机生成时需要再一次调用随机数
	this.dataView();
	console.log(this.data)

},


randomNum:function(){//随机数的生成,开始的时候随即生成，移动的时候随机生成
	for(;;){//死循环
		var i = Math.floor(Math.random()*4);//随机生成一个行
		var j = Math.floor(Math.random()*4);//随机生成一个列
		
		if (this.data[i][j] == 0) {
			var num = Math.random() > 0.2 ?2:4;
			this.data[i][j] = num;
			break;
		}
	}
},


dataView:function(){//将数字加载到页面中
	//把所有的元素都遍历一遍
	for(var i = 0; i < 4; i++){
		for(var j = 0; j < 4; j++){
			var ids = document.getElementById("c"+i+j);//找到对应的div 利用字符串拼接
			/*console.log(ids);*/
			if (this.data[i][j] == 0) {//如果对应的元素为0 则不显示 为空
				ids.innerHTML= "";
				ids.className = "cell";//className不变
			}else{//数组中对应的内容放到格子里
				ids.innerHTML = this.data[i][j];
				ids.className = "cell n" + this.data[i][j]
			}
		}
	}
	//更新分数
	document.getElementById("sco").innerHTML = this.score;
	//游戏没有结束的时候，弹出层时刻是隐藏的
	if(this.status == this.gamerunning){
		document.getElementById("gameover").style.display = "none";
	}else{
		document.getElementById("gameover").style.display = "block";
		document.getElementById("score").innerHTML = this.score;
	}
},

//判断游戏是否结束
isgameover:  function(){
	for(var i = 0 ; i < 4; i++){
		for(var j = 0; j < 4;j++){
			if (this.data[i][j]== 0) {//当个字格子为0时 表示还有空位置 
				return false;//此时游戏还未结束
			}
			if(j < 3){
				if(this.data[i][j+1] == this.data[i][j]){//左边的后一列与前一列来对比
						return false;
				}
			}
		}
	}

	return true;
},
//左移动的方法
LeftMove:function(){
	var before = String(this.data);//记录此时的数据 并转换成字符串 方便后面进行对比
	console.log(before);
	for(var i = 0; i < 4; i++){
			this.LeftMoveRow(i);
	}
	var after = String(this.data);//方便与之前的进行对比
	console.log(after);
	if(before != after){
		this.randomNum();	//生成随机数
		//生成的随机数可能造成游戏结束
		if(this.isgameover()){
			//改变游戏的状态
			this.status = this.gameover;//
		}
		//更新视图
		this.dataView();
	}

},
LeftMoveRow:function(i){
	for(var j= 0; j < 3; j++){//
		var nextj = this.getNextinRow(i,j);
		if (nextj != -1) {
			if (this.data[i][j]==0) {
				//等于0时直接替换
				this.data[i][j] = this.data[i][nextj];
				this.data[i][nextj] = 0;//位置恢复为0
				j--;//要让位置恢复到原位
			}else if (this.data[i][j] == this.data[i][nextj]){
				this.data[i][j] *= 2;
				this.data[i][nextj] = 0;
				this.score += this.data[i][j];//更新位置
			}
		}else{//没有找到
			break;//直接退出循环
		}
	}
},
getNextinRow:function(i,j){
	for(var newj = j + 1; newj < 4; newj++){
		if (this.data[i][newj] != 0){
			return newj; //表示已经找到位置，并且把位置返回出来
		}
	}
	return -1; //返回一个标识符
},


//右移动
RightMove:function(){
	var before = String(this.data);//记录此时的数据 并转换成字符串 方便后面进行对比
	console.log(before);


	for(var i = 0; i < 4; i++){
			this.RightMoveRow(i);
	}

	var after = String(this.data);//方便与之前的进行对比
	console.log(after);
	if(before != after){//将之前的来进行对比
		this.randomNum();	//生成的一个随机数
		//生成的随机数可能造成游戏结束
		if(this.isgameover()){
			//改变游戏的状态
			this.status = this.gameover;//
		}
		//更新视图
		this.dataView();
	}

},
RightMoveRow:function(i){
	for(var j= 4 ; j > 0; j--){//
		var nextj = this.RihtlastRow(i,j);
		if (nextj != -1) {
			if (this.data[i][j]==0) {
				//等于0时直接替换
				this.data[i][j] = this.data[i][nextj];
				this.data[i][nextj] = 0;//位置恢复为0
				j++;//要让位置恢复到原位
			}else if (this.data[i][j] == this.data[i][nextj]){
				this.data[i][j] *= 2;
				this.data[i][nextj] = 0;
				this.score += this.data[i][j];//更新位置
			}
		}else{//没有找到
			break;//直接退出循环
		}
	}
},
RihtlastRow:function(i,j){
	for(var newj = j - 1; newj >= 0; newj--){
		if (this.data[i][newj] != 0){
			return newj; //表示已经找到位置，并且把位置返回出来
		}
	}
	return -1; //返回一个标识符
},


//上移动的方法
TopMove:function(){
	var before = String(this.data);//记录此时的数据 并转换成字符串 方便后面进行对比
	console.log(before);
	for(var j = 0; j < 4; j++){
			this.TopMoveRow(j);
	}
	var after = String(this.data);//方便与之前的进行对比
	console.log(after);
	if(before != after){
		this.randomNum();	//生成随机数
		//生成的随机数可能造成游戏结束
		if(this.isgameover()){
			//改变游戏的状态
			this.status = this.gameover;//
		}
		//更新视图
		this.dataView();
	}

},
TopMoveRow:function(j){
	for(var i= 0; i < 4; i++){//
		var nexti = this.TopNextinRow(i,j);
		if (nexti != -1) {
			if (this.data[i][j]==0) {
				//等于0时直接替换
				this.data[i][j] = this.data[nexti][j];
				this.data[nexti][j] = 0;//位置恢复为0
				i--;//要让位置恢复到原位
			}else if (this.data[i][j] == this.data[nexti][j]){
				this.data[i][j] *= 2;
				this.data[nexti][j] = 0;
				this.score += this.data[i][j];//更新位置
			}
		}else{//没有找到
			break;//直接退出循环
		}
	}
},
TopNextinRow:function(i,j){
	for(var nexti = i + 1; nexti < 4; nexti++){
		if (this.data[nexti][j] != 0){
			return nexti; //表示已经找到位置，并且把位置返回出来
		}
	}
	return -1; //返回一个标识符
},


//下移动的方法
	BottomMove:function(){
	var before = String(this.data);//记录此时的数据 并转换成字符串 方便后面进行对比
	console.log(before);
	for(var j = 0; j < 4; j++){
			this.BottomMoveRow(j);
	}
	var after = String(this.data);//方便与之前的进行对比
	console.log(after);
	if(before != after){
		this.randomNum();	//生成随机数
		//生成的随机数可能造成游戏结束
		if(this.isgameover()){
			//改变游戏的状态
			this.status = this.gameover;//
		}
		//更新视图
		this.dataView();
	}

},
BottomMoveRow:function(j){
	for(var i= 3; i > 0; i--){//
		var nexti = this.BottomNextinRow(i,j);
		if (nexti != -1) {
			if (this.data[i][j]==0) {
				//等于0时直接替换
				this.data[i][j] = this.data[nexti][j];
				this.data[nexti][j] = 0;//位置恢复为0
				i--;//要让位置恢复到原位
			}else if (this.data[i][j] == this.data[nexti][j]){
				this.data[i][j] *= 2;
				this.data[nexti][j] = 0;
				this.score += this.data[i][j];//更新位置
			}
		}else{//没有找到
			break;//直接退出循环
		}
	}
},
BottomNextinRow:function(i,j){
	for(var nexti = i -1; nexti >= 0; nexti--){
		if (this.data[nexti][j] != 0){
			return nexti; //表示已经找到位置，并且把位置返回出来
		}
	}
	return -1; //返回一个标识符
},
}
game.start();
document.onkeydown = function(event){
	var event = event || e ||arguments[0];
	if (event.keyCode == 37){
		game.LeftMove();
	}else if(event.keyCode == 38){
		game.TopMove();
	}else if(event.keyCode == 39){
		game.RightMove();
	}else if(event.keyCode == 40){
		game.BottomMove();
	}
}

var startX,startY,endX,endY;
document.addEventListener('touchstart',function(){
	console.log(event);
	startX = event.touches[0].pageX;
	startY = event.touches[0].pageY;
})
document.addEventListener('touchend',function(){
	endX = event.changedTouches[0].pageX;
	endY = event.changedTouches[0].pageY;
	var X = endX - startX;
    var Y = endY - startY
    var absX = Math.abs(X) > Math.abs(Y);
    var absY = Math.abs(Y) > Math.abs(X);
    if(X > 0 && absX){
        console.log("右滑动");
        game.RightMove();
    }else if(X < 0 && absX){
        console.log("左滑动")
        game.LeftMove();
    }if(Y > 0 && absY){
        console.log("下滑动");
        game.BottomMove();
    }if(Y < 0 && absY){
        console.log("上滑动");
        game.TopMove();
    }
})

注释写的很清楚 多余的就不说了 应该看得懂
但是！！！
有一个小小bug留给自行发现哟~~

Alice_yo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js编写2048小游戏
10-20
本文主要介绍了用原生js编写2048小游戏的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
Javascript编写2048小游戏
10-23
本文给大家介绍的是去年很火的一款小游戏--2048用javascript实现的思路以及代码，有需要的小伙伴可以参考下。
JavaScript实现2048小游戏，我终于赢了一把
最新发布
2301_76348171的博客
03-29 1096
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里即可获取！！！！if(bool){bool为true才执行自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
2048小游戏js.zip
06-09
这是我跟着别人学习写的2048小游戏,仅供学习和参考里面还有一些bug,希望大家能有所收获.如果没有积分可以私信我
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（一）
weixin_41306215的博客
07-26 5751
前几天看了慕课里的制作2048小游戏课程->>> 指路：https://www.imooc.com/learn/76 这个游戏适合我这种前端入门的小白作为第一个游戏项目，做完还挺有成就感、 虽然是跟着视频做，但是还是经常出错 做完以后收获挺大，但是还有一些不太理解。现在开始复盘，把每一步都认真归纳总结 希望能通过一步一步理解透彻里面的原理，分享出来也希望能帮到你 该游戏需要有HTML、CSS、JS和JQ基础 边做边思考每一步的来由 2048小游戏（一） ...
原生JS实现2048小游戏
Blancker的博客
05-07 483
前几天玩了一款2048微信小程序，结果脑子一抽，想到了为什么不能自己用JS写一个 于是，下面这个玩意儿就诞生了。。。 实现思路大概是这样的，首先使用table表格完成页面布局，其次使用JS实现数字动态显示，然后利用color()方法动态更新单元格背景色，最后定义合并单元格算法实现相邻且值相等的单元格的合并 话不多说，直接上代码，演示地址：https://blancker.github.io ...
原生js实现2048（启发向）
weixin_63087450的博客
03-25 607
2048是一个不错的练手项目，因为它涵盖了不少js，css的知识，同时也包含了简单的游戏逻辑，这个项目的完成对我来说收获颇丰。他让我见见理解了游戏的构成，和一些看似简单的东西复杂的一面。我会虚心接纳各位的建议，对不足之处进行修改。
js实现2048小游戏
qq_35522864的博客
09-26 506
最近同学参加宣讲会，说有个公司要求是写一个2048小游戏，参考了一点网上的代码以后，自己写了一个。写的思路如下： 1.设置好HTML布局。大盒子嵌套小盒子，这块没什么可说的。 2.实现游戏初始化，生成一开始的两个小块。这里就要实现生成随机2或4，还要放入随机位置。其实从布局好了之后差不多就能想到用数组来存储数字了。这块主要用了Math.random()来生成随机数和随机X,Y来插入到数组中。然后
javascript实现2048小游戏
忘川的博客
11-20 1342
2048这种小游戏我相信大多数人都应该玩过，是一款非常经典的益智类小游戏。那么接下来，我们就来看看这款游戏是怎么实现的，如何才能写出这样的游戏。 1、分析界面构成 观察2048游戏的界面可以看出，整体是一个大盒子包裹着，在其中有4x4的小方格，每个方格还有间距，随着移动，还会出现不同的小方格，不同的数字对应的方格背景颜色也不同。当游戏结束时还会弹出一个遮罩层，阻止用户继续游戏。 基本上界面上的就这...
2048 js canvas实现2048小游戏及思路
NEWonclick的博客
11-14 830
canvas动画原理假设一个元素x轴为0，运动到x = 100这样直接绘制是没有动画的x值递增，x值改变时清除画布再次绘制，x=100时运动结束这就是动画原理。
2048小游戏实验报告、代码
12-30
该资源包含完整的实验报告，完整的代码，运行无错，简单易懂
javascript实现2048小游戏_V1.0.0
08-12
原生Js编写一款2048小游戏 涉及点： 鼠标上移、下移、左移、右移 鼠标释放之后移动方块,包括方块数字叠加 方块移动/叠加处理完成之后随机产生新的方块 判断是否没有可移动的方块了，提示游戏接受
JavaScript实现2048小游戏
02-26
JavaScript实现2048游戏源码
javascript版2048小游戏
10-24
本文给大家分享的是使用javascript制作的2048小游戏的代码，仅仅是想锻炼下自己的编程代码风格，尽量做的规范些，小伙伴们多多给些建议。
【总结篇】js编写的2048小游戏开发（下：算法实现）
SuperZZQ_的博客
12-21 2177
在上一篇展现了js编写2048小游戏的思路以及编程框架搭建，本篇将基于上篇的结构来讲解游戏关键操作方法的具体算法实现。适合已经阅读完上一篇文章https://blog.csdn.net/SuperZZQ_/article/details/82662732，这篇的文章在编辑过程中侧重于讲解如何将我们熟悉的、可见的操作通过对产生条件、触发效果、细分步骤方面进行解构，转化成编程思维，并利用前端语言写成代...
【总结篇】js编写的2048小游戏开发（上：思路）
SuperZZQ_的博客
09-13 7133
2048是大家都熟悉的一款魔性小游戏，其操作简单，却极其有效地杀时间。本篇将详细讲解如何构建这款小游戏的开发思路、如何根据玩法进一步分析设计编程结构，适合有一定html、css、js、jquery语言基础的读者阅读。   一.游戏试玩       游戏玩法大家都很熟悉，每次可以选择上下左右中的一个方向滑动一次，所有数字方块都会向滑动的方向靠拢，每次滑动后空白的地方随机出现一个数字方块2或...
原生JS实现2048
星云
10-24 523
按↑、→、↓、←控制所有方块移动（如果可能）。两个示数相同的方块将合并成一个方块，新方块示数等于两个方块示数之和。代码用了新语法，对浏览器版本有一定要求。
js2048
nextpeachking的博客
10-23 1674
创建一个4*4的网格 操控上下左右键进行相对应移动，相同的数字碰到一起就会相加，直到网格上的数字与相邻的数字无法再进行移动和相加，游戏结束 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>网页版2048</title> <link rel=
用js做2048小游戏
11-07
2048是一款非常受欢迎的数字益智游戏，可以...通过以上步骤，就可以用JavaScript来制作一个简单的2048小游戏。当然，上述的步骤只是一个基本的框架，你可以根据自己的需求和创意来添加更多功能和特效，使游戏更加有趣。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值