[游戏开发]jQuery实现拼图小游戏(实操案例)

先看初始效果图：

方法一：

???? var id = $(this).prop("id"); //得到当前点击的这个td的ID

??????????????? if (parseInt(id) + 3 < 10 && $("td[id=" + (parseInt(id) + 3) + "]").children().length == 0) { //向下移动

??????????????????? $(this).find("img").appendTo($("td[id=" + (parseInt(id) + 3) + "]"));
??????????????? }
??????????????? else if (parseInt(id) % 3 != 0 && $("td[id=" + (parseInt(id) + 1) + "]").children().length == 0) { //向右

??????????????????? $(this).find("img").appendTo($("td[id=" + (parseInt(id) + 1) + "]"));
??????????????? }
??????????????? else if (parseInt(id) % 3 != 1 && $("td[id=" + (parseInt(id) - 1) + "]").children().length == 0) { //向左
??????????????????? $(this).find("img").appendTo($("td[id=" + (parseInt(id) - 1) + "]"));
??????????????? }
??????????????? else if (parseInt(id) - 3 > 0 && $("td[id=" + (parseInt(id) - 3) + "]").children().length == 0) { //向上

??????????????????? $(this).find("img").appendTo($("td[id=" + (parseInt(id) - 3) + "]"));
??????????????? }

??????????? })；

方法二：

?<script type="text/javascript">
??????? $(function () {
??????????? var kid = 0;
??????????? //获取空元素的id
??????????? kid = $("#table1").find("td:empty").prop("id");
??????????? $("td").click(function () {
??????????????? //获取图片所在位置
??????????????? var id = parseInt($(this).prop("id"));
??????????????? var RId = parseInt(id) + 1;
??????????????? var LId = parseInt(id) - 1;
??????????????? var UId = parseInt(id) - 3;
??????????????? var DId = parseInt(id) + 3;
??????????????? if (kid == RId && (id % 3 != 0)) {
??????????????????? $(this).children().remove().appendTo("#" + RId);
??????????????????? kid = id;
??????????????? }
??????????????? if (kid == LId && id % 3 != 1) {
??????????????????? $(this).children().remove().appendTo("#" + LId);
??????????????????? kid = id;
??????????????? }
??????????????? if (kid == UId && id > 3) {
??????????????????? $(this).children().remove().appendTo("#" + UId);
??????????????????? kid = id;
??????????????? }
??????????????? if (kid == DId && id < 7) {
??????????????????? $(this).children().remove().appendTo("#" + DId);
??????????????????? kid = id;
??????????????? }
??????????? });
??????? });

??? </script>

实现类似拼图小游戏有很多种方法。没看懂的朋友们可以私聊我，

随时为你解答。