拼图板的主要功能就是点击空白旁边的图片，旁边的图片就移动到空白的位置上，于是我们就可以利用需求想出很多实现方法 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标记
