jQuery实现拼图板效果

最新推荐文章于 2021-06-22 21:07:37 发布

粥蛋

最新推荐文章于 2021-06-22 21:07:37 发布

阅读量1.8k

点赞数 2

分类专栏：个人代码分享文章标签： jQuery css HTML

本文链接：https://blog.csdn.net/zhoudanonce/article/details/90442167

版权

个人代码分享专栏收录该内容

5 篇文章 1 订阅

订阅专栏

jQuery实现拼图板效果

界面展示

在这里插入图片描述

需求解析

拼图板的主要功能就是点击空白旁边的图片，旁边的图片就移动到空白的位置上，于是我们就可以利用需求想出很多实现方法
1.使用img标记或者background-image属性来设置h5页面
2.运用jQuery遍历判断点击部位周围的图片空缺状况
3.使用jQuery方法移动标记或者添加删除属性

算法实现

话不读说，h5页面走起

<body>
	<header>
		<div id="gameOptions">
			<input type="button" value="开始游戏" id="starGame">
			<input type="button" value="暂停游戏" id="pauseGame">
		</div>
		<div id="gameRecord">
			<div>你的点击次数：<span id="clickTimesText"></span></div>
		</div>
		<table>
			<tr>
				<td id="p1"><div class="img" style="background-image:url(p1.png)"></div></td>
				<td id="p2"><div class="img" style="background-image:url(p2.png)"></div></td>
				<td id="p3"></td>
			</tr>
			<tr>
				<td id="p4"><div class="img" style="background-image:url(p4.png)"></div></td>
				<td id="p5"><div class="img" style="background-image:url(p5.png)"></div></td>
				<td id="p6"><div class="img" style="background-image:url(p6.png)"></div></td>
			</tr>
			<tr>
				<td id="p7"><div class="img" style="background-image:url(p7.png)"></div></td>
				<td id="p8"><div class="img" style="background-image:url(p8.png)"></div></td>
				<td id="p9"><div class="img" style="background-image:url(p9.png)"></div></td>
			</tr>
		</table>
	</header>
</body>

在这里，我才用table标记的方式，在里面插入div标记，并设置background-image属性
jQuery代码：

	<script type="text/javascript">
		$(document).ready(function(e) {
			//实现图片交换的关键数据
			var switchNumber = [
				[2,4,0,0], //p1
				[1,3,5,0], //p2
				[2,6,0,0], //p3
				[1,5,7,0], //p4
				[2,4,6,8], //p5
				[3,5,9,0], //p6
				[4,8,0,0], //p7
				[5,7,9,0], //p8
				[6,8,0,0], //p9
			];
			//记录点击次数
			var clickTimes = 0;
			$("table").click(function (){
				++clickTimes;
				$("#clickTimesText").text(clickTimes);
			});
			//关键之关键交换代码
			$("td").click(function (){
				if($(this).html()!=""){
					var indexOne = parseInt($(this).attr('id').charAt(1))-1;
					for (var i = 0; i <= 3; i++) {
						if(switchNumber[indexOne][i]==0)
							break;
						if($("#p"+switchNumber[indexOne][i]).html()==""){							
							$($(this).html()).prependTo("#p"+switchNumber[indexOne][i]);
							$(this).html("");
						}
					}
				}
			});
		});
	</script>

cs代码我写的不是很好：

<style type="text/css">
	div{
		margin: 0;
		padding: 0;
	}
	table{
		margin: 0 auto;
		border-collapse:collapse;
	}
	.img{
		height: 190px;
		width: 190px;
	}
	td{
		border: 2px solid white;
		text-align: center;
	}
	#gameOptions{
		float: left;
		width: 290px;
		height: 570px;
		border: 5px solid rgb(148,221,251);
		border-radius: 8px;
		background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
		text-align: center;
	}

	#gameOptions>input[type=button]{
		margin: 20px 18px 20px 18px;
		display:block;
		background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
		color: black;
		padding: 15px 32px;
		text-align: center;
		font-size:45px;
		border: 5px solid white;
		border-radius: 10px;
	}
	#gameRecord{
		float: right;
		width: 300px;
		border: 1px solid black;
	}
	header{
		width: 1220px;
		margin: 0 auto;
		padding: 0 10px 0 10px;
	}
</style>

代码解释

在我的jQuery代码中，我运用了一个数组来把交换的关键数据存了进去，拿数组的第一行来说

	[2,4,0,0]

表示，点击P1时，告诉计算机查找P2、P4是否有空白，因为P1的周围是P2和P4，如果有空白，就交换，如果我们数组中的数据等于0，我停止查找，以此类推。
之所以用数组的方法，就是因为反复地遍历查找太过于浪费内存，使查找效率变低，一方面数据本身就很少，另一方面每个点击图片块的规律都是固定的。
我们可以看到，我运用的是prependTo()方法移动td中的div标记

粥蛋

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery实现拼图板效果

jQuery实现拼图板效果界面展示需求解析拼图板的主要功能就是点击空白旁边的图片，旁边的图片就移动到空白的位置上，于是我们就可以利用需求想出很多实现方法1.使用img标记或者background-image属性来设置h5页面2.运用jQuery遍历判断点击部位周围的图片空缺状况3.使用jQuery方法移动标记或者添加删除属性#算法实现话不读说，h5页面走起<body&g...
复制链接

扫一扫