2048-jquery版

最新推荐文章于 2021-06-24 13:15:09 发布
最新推荐文章于 2021-06-24 13:15:09 发布
阅读量1k 收藏
点赞数
分类专栏： 个人 文章标签： 2048 网页版
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuxuan_csd/article/details/25567901
版权

两个晚上做了一个2048，还不是很完善，核心功能做出来了，代码写的不是很简洁
期间遇到一个问题，关于jquery的animate阻塞的问题，比如
$("#div").animate({top:'-=70px'});
$("#div").css({"opacity":"0"});
这样写的话慢慢上移的效果压根就不出现，但是在for循环里面又不会能用animate的回调函数，所以最后animate没有加进来，后果就是没有移动的效果，代码里面没有注释（so sorry），改天加上可怜
上代码 
<!DOCTYPE html>
	<html>
	  <head>
	    <title>GF.html</title>	
	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	    <meta http-equiv="description" content="this is my page">
	    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	 	 <link rel="stylesheet" href="css/style.css" type="text/css" />
	 	 <script type="text/javascript" src="css/jquery-1.5.2.min.js"></script>
	  </head>
	 <script>
	 $(document).ready(function() {
	 	var sum=0;
		
		//初始化一个二维数组
		var qp=new Array();
		for(var i=0;i<4;i++){
			qp[i]=new Array();
			for(var j=0;j<4;j++){
				qp[i][j]=0;
			}
		}
		//随机生成一个方块
		function sandFK(){
			if(sum==16)
			{
				alert("Game over!!");
				return;
			}
			var rand=Math.floor(Math.random()*16)+1;	//生成0-15的随机数
			var randCp=rand;
			var i=0,j=0;
			for(;i<4;i++){					//遍历二维数组，决定在哪个点出方格
				if(rand==0)
					break;
				for(j=0;j<4;j++){
					if(qp[i][j]==0)
						rand--;
					if(i==3&&j==3&&rand!=0)
						i=-1;
					if(rand==0)
						break;
				}
			}
			
			qp[i-1][j]=1;					//将这个点设为有方格
			sum++;
			var name="GF0"+((i-1)*4+j+1);			//找到这个div的id
			var left=110*j+28+"px";
			var top=110*(i-1)+28+"px";
			$("#"+name).css({
			  	"top":top,
	    		"left":left
			 });
			if(randCp>10)					//如果rand大于10则出现4
				$("#"+name).html("4");
			else						//否则出现2
				$("#"+name).html("2");
			$("#"+name).animate({opacity:'1'},100);		//出现
		}
		sandFK();	
		sandFK();
		function btnClick(obj){					//这个是按上下左右的的时候出现的效果，直接略过
			$(obj).animate({
				top:'-=3px',
				left:'-=3px',
	   			height:'+=6px',
	   			width:'+=6px'},50,function(){
	   			 	$(obj).animate({
						top:'+=3px',
						left:'+=3px',
			   			 height:'-=6px',
			   			 width:'-=6px'},50);
	   			 });
		}
		$("#up").stop().click(function(){			//核心代码
			btnClick(this);				
			//上移，去空格，div复位
			var isChange=0;	
			var markX=0,isBlack=0;
			for(var y=0;y<4;y++){				//这个for是在上移过程中去掉所有上移过程中的方格之间的空格
				for(var x=0;x<4;x++){
					if(qp[x][y]==0&&isBlack==0){
						isBlack=1;
						markX=x;
					}
					else if(qp[x][y]!=0&&isBlack==1){
						for(var upX=x;upX<4;upX++){
							if(qp[upX][y]!=0){
								var name1="GF0"+(upX*4+y+1);
								var nameReal="GF0"+((markX+upX-x)*4+y+1);
								var left=110*y+28+"px";
								var top=110*(markX+upX-x)+28+"px";
								$("#"+nameReal).css({"top":top,"left":left});
								$("#"+nameReal).css({"opacity":"1"});
								$("#"+nameReal).html($("#"+name1).html());
								qp[upX][y]=0;
								qp[markX+upX-x][y]=1;
								$("#"+name1).css({"opacity":"0"});
								$("#"+name1).html("");
								isChange=1;
							}
						}
						isBlack=0;
					}
				}
				markX=0;
				isBlack=0;
			}
			
			for(var y=0;y<4;y++){							//这个for是用来判断相邻的两个方格是不是相等的，是相等就合并
				for(var x=0;x<3;x++){
					if(qp[x][y]==0)
						break;
					var name="GF0"+(x*4+y+1);
					var name2="GF0"+((x+1)*4+y+1);
					if($("#"+name).html()==$("#"+name2).html()){					
						$("#"+name).html(parseInt($("#"+name).html())*2);
						$("#"+name2).css({"opacity":"0"});
						isChange=1;
						$("#"+name2).html("");
						qp[x+1][y]=0;
						sum--;
						for(var upX=x+2;upX<4;upX++){
							if(qp[upX][y]!=0){
								var name1="GF0"+(upX*4+y+1);
								var nameReal="GF0"+((upX-1)*4+y+1);
								var left=110*y+28+"px";
								var top=110*(upX-1)+28+"px";
								$("#"+nameReal).css({"top":top,"left":left});
								$("#"+nameReal).css({"opacity":"1"});
								$("#"+nameReal).html($("#"+name1).html());
								qp[upX][y]=0;
								qp[upX-1][y]=1;
								$("#"+name1).css({"opacity":"0"});
								$("#"+name1).html("");
							}
							else
								break;
						}
					}
				}
			}
			if(isChange==1)
				sandFK();
		});
		$("#down").click(function(){
			btnClick(this);
			var isChange=0;
			var markX=0,isBlack=0;
			for(var y=0;y<4;y++){
				for(var x=3;x>=0;x--){
					if(qp[x][y]==0&&isBlack==0){
						isBlack=1;
						markX=x;
					}
					else if(qp[x][y]!=0&&isBlack==1){
						for(var upX=x;upX>=0;upX--){
							if(qp[upX][y]!=0){
								var name1="GF0"+(upX*4+y+1);
								var nameReal="GF0"+((markX+upX-x)*4+y+1);
								var left=110*y+28+"px";
								var top=110*(markX+upX-x)+28+"px";
								$("#"+nameReal).css({"top":top,"left":left});
								$("#"+nameReal).css({"opacity":"1"});
								$("#"+nameReal).html($("#"+name1).html());
								qp[upX][y]=0;
								qp[markX+upX-x][y]=1;
								$("#"+name1).css({"opacity":"0"});
								$("#"+name1).html("");
								isChange=1;
							}
						}
						isBlack=0;
					}
				}
				markX=0;
				isBlack=0;
			}
			
			/*******************************************************************/
			for(var y=0;y<4;y++){
				for(var x=3;x>0;x--){
					if(qp[x][y]==0)
						break;
					var name="GF0"+(x*4+y+1);
					var name2="GF0"+((x-1)*4+y+1);
					if($("#"+name).html()==$("#"+name2).html()){					
						$("#"+name).html(parseInt($("#"+name).html())*2);
						$("#"+name2).css({"opacity":"0"});
						$("#"+name2).html("");
						isChange=1;
						qp[x-1][y]=0;
						sum--;
						for(var upX=x-2;upX>=0;upX--){
							if(qp[upX][y]!=0){
								var name1="GF0"+(upX*4+y+1);
								var nameReal="GF0"+((upX+1)*4+y+1);
								var left=110*y+28+"px";
								var top=110*(upX+1)+28+"px";
								$("#"+nameReal).css({"top":top,"left":left});
								$("#"+nameReal).css({"opacity":"1"});
								$("#"+nameReal).html($("#"+name1).html());
								qp[upX][y]=0;
								qp[upX+1][y]=1;
								$("#"+name1).css({"opacity":"0"});
								$("#"+name1).html("");
							}
							else
								break;
						}
					}
				}
			}
			if(isChange==1)
				sandFK();
		});
		$("#left").click(function(){
			btnClick(this);
			var isChange=0;
			var markY=0,isBlack=0;
			for(var x=0;x<4;x++){
				for(var y=0;y<4;y++){
					if(qp[x][y]==0&&isBlack==0){
						isBlack=1;
						markY=y;
					}
					else if(qp[x][y]!=0&&isBlack==1){
						for(var upY=y;upY<4;upY++){
							if(qp[x][upY]!=0){
								var name1="GF0"+(x*4+upY+1);
								var nameReal="GF0"+(x*4+(markY+upY-y)+1);
								var left=110*(markY+upY-y)+28+"px";
								var top=110*x+28+"px";
								$("#"+nameReal).css({"top":top,"left":left});
								$("#"+nameReal).css({"opacity":"1"});
								$("#"+nameReal).html($("#"+name1).html());
								qp[x][upY]=0;
								qp[x][markY+upY-y]=1;
								$("#"+name1).css({"opacity":"0"});
								$("#"+name1).html("");
								isChange=1;
							}
						}
						isBlack=0;
					}
				}
				markY=0;
				isBlack=0;
			}
			
			/*******************************************************************/
			
			for(var x=0;x<4;x++){
				for(var y=0;y<3;y++){
					if(qp[x][y]==0)
						break;
					var name="GF0"+(x*4+y+1);
					var name2="GF0"+(x*4+y+1+1);
					if($("#"+name).html()==$("#"+name2).html()){					
						$("#"+name).html(parseInt($("#"+name).html())*2);
						$("#"+name2).css({"opacity":"0"});
						$("#"+name2).html("");
						isChange=1;
						qp[x][y+1]=0;
						sum--;
						for(var upY=y+2;upY<4;upY++){
							if(qp[x][upY]!=0){
								var name1="GF0"+(x*4+upY+1);
								var nameReal="GF0"+(x*4+upY-1+1);
								var left=110*(upY-1)+28+"px";
								var top=110*x+28+"px";
								$("#"+nameReal).css({"top":top,"left":left});
								$("#"+nameReal).css({"opacity":"1"});
								$("#"+nameReal).html($("#"+name1).html());
								qp[x][upY]=0;
								qp[x][upY-1]=1;
								$("#"+name1).css({"opacity":"0"});
								$("#"+name1).html("");
							}
							else
								break;
						}
					}
				}
			}
			if(isChange==1)
				sandFK();
		});
		$("#right").click(function(){
			btnClick(this);
			var isChange=0;
			var markY=0,isBlack=0;
			for(var x=0;x<4;x++){
				for(var y=3;y>=0;y--){
					if(qp[x][y]==0&&isBlack==0){
						isBlack=1;
						markY=y;
					}
					else if(qp[x][y]!=0&&isBlack==1){
						for(var upY=y;upY>=0;upY--){
							if(qp[x][upY]!=0){
								var name1="GF0"+(x*4+upY+1);
								var nameReal="GF0"+(x*4+(markY+upY-y)+1);
								var left=110*(markY+upY-y)+28+"px";
								var top=110*x+28+"px";
								$("#"+nameReal).css({"top":top,"left":left});
								$("#"+nameReal).css({"opacity":"1"});
								$("#"+nameReal).html($("#"+name1).html());
								qp[x][upY]=0;
								qp[x][markY+upY-y]=1;
								$("#"+name1).css({"opacity":"0"});
								$("#"+name1).html("");
								isChange=1;
							}
						}
						isBlack=0;
					}
				}
				markY=0;
				isBlack=0;
			}
			
			/*******************************************************************/
			
			for(var x=0;x<4;x++){
				for(var y=3;y>0;y--){
					if(qp[x][y]==0)
						break;
					var name="GF0"+(x*4+y+1);
					var name2="GF0"+(x*4+y-1+1);
					if($("#"+name).html()==$("#"+name2).html()){					
						$("#"+name).html(parseInt($("#"+name).html())*2);
						$("#"+name2).css({"opacity":"0"});
						$("#"+name2).html("");
						isChange=1;
						qp[x][y-1]=0;
						sum--;
						for(var upY=y-2;upY>=0;upY--){
							if(qp[x][upY]!=0){
								var name1="GF0"+(x*4+upY+1);
								var nameReal="GF0"+(x*4+upY+1+1);
								var left=110*(upY+1)+28+"px";
								var top=110*x+28+"px";
								$("#"+nameReal).css({"top":top,"left":left});
								$("#"+nameReal).css({"opacity":"1"});
								$("#"+nameReal).html($("#"+name1).html());
								qp[x][upY]=0;
								qp[x][upY+1]=1;
								$("#"+name1).css({"opacity":"0"});
								$("#"+name1).html("");
							}
							else
								break;
						}
					}
				}
			}
			if(isChange==1)
				sandFK();
		});
	});
	</script>
	  <body>
	   	<div id="QP2048">
	   		<div id="GF01" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF02" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF03" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF04" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF05" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF06" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF07" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF08" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF09" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF010" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF011" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF012" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF013" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF014" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF015" class="GFILU" style="opacity:0;"></div>
	   		<div id="GF016" class="GFILU" style="opacity:0;"></div>
	   	</div>
	   	<div id="up" class="GF_FX">上</div>
	   	<div id="down" class="GF_FX">下</div>
	   	<div id="left" class="GF_FX">左</div>
	   	<div id="right" class="GF_FX">右</div>
	  </body>
	</html>


其实上下左右的代码是一样的，大家能给点意见吗，感激不尽

能够的运行的代码在这个这个地方下载

http://download.csdn.net/detail/xuxuan_csd/7332939

AntonyXux
关注
专栏目录
jq-2048小游戏
weixin_44892520的博客
10-01 284
```javascript <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=400,maximum-scale=3.0,minimum-scale=0.5,user-scal...
qt做的一个动态实时监控项目
xuxuan_csd的专栏
04-07 6670
做了一个摄像头监控的项目 环境：qtcreator-2.5.2+Qt4.7.3+MinGW+openCV2.1（装在c盘根目录下，在项目中引入的时候有用） 功能介绍：监控笔记本摄像头，通过opencv的函数打开摄像头，用帧差分算法判断监控的区域有没有发生变化，也就是有没有物体进入监控区域，当监控的区域发生变化时，将这一帧发送给服务器端 之前环境不允许，一直用一台电脑既当服务器又当客户端，挺成
JQuery实现游戏2048
04-16
支持浏览器：ie9+/chrome/FF
基于jQuery的2048游戏
我叫JerryC
07-12 1503
前言：受网上看到的一个2048视频游戏制作的启发，做了一个网页版的，很多细节参照了一下别人的。暂时还没有分数统计功能，找时间再做好。先上一个demo版。 截图： 程序架构： 演示地址：http://jerryc8080.github.io/My2048/ 程序地址：https://github.com/JerryC8080/My2048 代码：太多了就不贴了，
用jquery制作2048小游戏（超详细）
azsx582的博客
01-13 3051
先放个效果图吧 首先，先把html结构搭好。新建一个html文件，设置好标题2048，按钮New Game以及score:0，这里按钮是用a标签来将javascript中的newgame函数给传进来，score后面的分数由于是动态的，所以给它添加一个span标签，并加上一个id，代码如下 <header> <h1>2048</h1> <a href="javascript:newgame();" id="newgamebutton">New
jQuery制作《2048》
Hello_yihao的博客
12-01 1398
《2048》是比较流行的一款数字游戏，在初始的16个方格中会随机出现基础数字2和4，使用上下左右四个快捷键来移动数字块，相同的数字会叠加在一起，直到游戏出现[2048]数字即为游戏的通关。今天为大家奉上使用‘面向过程’写的《2048》小游戏。 游戏源码：2048游戏源码 1.构建页面 创建一个html文件用于编写静态页面，分别设置游戏的标题，开始游戏按钮，分数和16个小方格。 2.初始化
视频教程-基于jQuery的2048游戏实战视频教程-jQuery
weixin_31440155的博客
05-28 155
基于jQuery的2048游戏实战视频教程 全栈工程师，从事软件开发及软件教...
jQuery案例demo--2048游戏
fengzhen8023
07-17 478
整体思路： 1. 基础设置：游戏的背景是一个4*4的格子背景， 游戏中分别有2、4、8、16等不同的色块，每种色块的颜色由js脚本来控制。 2. 游戏开始： 游戏开始的时候，进行初始化操作。在4*4的格子上面，随机生成2个色块，色块的里面的数字是2或4。这里应当注意的是格子和色块不是同一个元素，即整个页面中有16个格子元素和若干个色块元素。这里要注意一下格子元素和色块元素的CSS样式布局。...
2048网页版html项目报告,jQuery编写网页版2048小游戏
weixin_39633976的博客
06-24 2198
大致介绍看了一个实现网页版2048小游戏的视频，觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试，真正的验证了这句话-不要以为你以为的就是你以为的，看视频时觉得看懂了，会写了，但是自己实现起来会遇到各种问题。比如，在最后判断游戏是否结束的时候，我写的语句语法是对的，但就是不执行。最后通过对视频源码的分析对比，发现原作者写的一个setTimeout定时器有额外的意思，本来我以为它就是简单的一...
2048-jQuery版
09-04
在这个2048-jQuery版中，我们可以看到jQuery的强大功能和易用性。 首先，游戏的核心逻辑主要体现在对二维数组的操作上。在jQuery实现中，通常会创建一个表示游戏面板的二维数组，用于存储每个格子的数字。每当用户...
2048:jQuery2048游戏
06-15
在2048游戏中，jQuery将帮助我们高效地操作DOM元素，响应用户输入，以及创建平滑的动画效果。 1. **HTML结构**：游戏界面通常由一个网格布局构成，每个格子代表一个可以放置数字的单元。使用HTML，我们可以创建一个...
jQuery编写网页版2048小游戏
10-20
jQuery编写网页版2048小游戏 知识点: 1. jQuery：jQuery是一种轻量级的JavaScript库，它通过使用CSS选择器简化了JavaScript编程，使得开发更加方便快捷。jQuery在游戏开发中可用于简化DOM操作，处理事件和动态内容...
jquery-2048:只是另一个基于JavaScript和jQuery的2048游戏
05-23
《jQuery-2048：JavaScript游戏开发解析》 在当今的互联网世界中，JavaScript作为最流行的客户端编程语言，被广泛应用于网页动态效果、交互设计以及游戏开发等多个领域。"jQuery-2048"正是这样一个利用JavaScript和...
jQuery编写网页版2048小游戏共7页.pdf.zip
10-30
【jQuery编写网页版2048小游戏】是一个利用JavaScript库jQuery实现的互动游戏，它基于意大利开发者Gabriele Cirulli的原版2048游戏。2048游戏是一个数字合并的游戏，玩家通过上下左右滑动屏幕，使得相同数字的方块...
关于openCV图片裁剪和图片合并的问题
xuxuan_csd的专栏
06-07 2643
最近做了一个可以视频的聊天程序
从今天起开始写博客
xuxuan_csd的专栏
03-29 399
从今天起开始记录每一天，每天都不知道在干啥，记录下来
一个简单的java游戏.zip
最新发布
11-16
《一个简单的Java游戏.zip》是一个专为学习目的设计的Java小游戏资源包。它包含了完整的源代码和必要的资源文件，适合初学者通过实战练习提升编程技能。该项目展示了如何使用Java的图形用户界面（GUI）库创建游戏窗口，并实现基本的游戏逻辑和交互功能。该游戏项目结构清晰，包括了多个类和文件，每个部分都有详细的注释，帮助理解代码的功能和逻辑。例如，Block类用于定义游戏中的基本元素，如玩家和障碍物；CreateGame类则是游戏的主要控制类，负责初始化游戏窗口、处理用户输入以及更新游戏状态等。此外，该资源包还演示了如何绘制游戏元素、处理事件驱动编程以及多线程的应用，这些都是游戏开发中的重要概念。通过运行和修改这个小游戏，用户可以深入了解Java编程的基础知识，并培养解决实际问题的能力。总之，《一个简单的Java游戏.zip》是一个理想的学习工具，无论是对于初学者还是有一定经验的开发者来说，都可以通过这个项目获得宝贵的实践经验。
基于SSM的智慧中医诊所管理系统（前后端代码）
11-16
基于SSM的智慧中医诊所管理系统（前后端代码）
原生JavaScript与Jquery打造网页版2048游戏教程
资源摘要信息:"使用原生JavaScript与Jquery开发网页版2048游戏的知识点" 1. JavaScript基础知识 JavaScript是实现网页动态功能的核心脚本语言，它提供了丰富的API来操纵DOM（文档对象模型），处理事件，实现用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值