jQuery实现拼图板效果

最新推荐文章于 2021-08-11 13:04:01 发布

粥蛋

最新推荐文章于 2021-08-11 13:04:01 发布

阅读量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标记