jQuery實現拼圖小游戲

小熊維尼拼圖                                                                                    2017-07-23       21:59:48

jQuery代碼實現拼圖小游戲，滑鼠選中拼塊，用上下左右鍵移動拼塊。

 1 <div id="box-div">
 2     <!--走不通時的提示！-->
 3     <div id="tips">
 4         <p>\(╯-╰)/ 哎呦，走不通啦!</p>
 5     </div>
 6     <div id="container">
 7         <div class="row">
 8             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_01.png" alt="photo1"/></div>
 9             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_02.gif" alt="photo2"/></div>
10             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_03.gif" alt="photo3"/></div>
11         </div>
12         <div class="row">
13             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_04.gif" alt="photo4"/></div>
14             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_05.gif" alt="photo5"/></div>
15             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_06.gif" alt="photo6"/></div>
16         </div>
17         <div class="row">
18             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_07.gif" alt="photo7"/></div>
19             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_08.gif" alt="photo8"/></div>
20             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_09.gif" alt="photo9"/></div>
21         </div>
22     </div>
23 </div

 1 #box-div {
 2     position: relative;
 3     width: 508px;
 4     height: 631px;
 5     margin: 0 auto;
 6 }
 7 
 8 #container {
 9     width: 508px;
10     height: 631px;
11     margin: 0 auto;
12     -webkit-box-sizing: border-box;
13     -moz-box-sizing: border-box;
14     box-sizing: border-box;
15     border: 1px solid #d5e0e6;
16 }
17 
18 #container > .row {
19     display: -webkit-box;
20     white-space: nowrap;
21 }
22 
23 #container > .row > .unit {
24     width: 169px;
25     height: 209px;
26     display: inline-block\9;/*相容IE9/10*/
27     vertical-align: top\9;/*相容IE9/10*/
28     box-sizing: border-box;
29     border: 1px solid rgba(7, 157, 239, 0);
30 }
31 
32 #container > .row > .unit.move {
33     border: 1px solid rgba(7, 157, 239, 1);
34 }
35 
36 #tips {
37     width: 200px;
38     height: 50px;
39     background: rgb(152, 206, 50);
40     position: absolute;
41     z-index: 5;
42     top: -50px;
43     left: calc(50% - 100px);
44     opacity: 0;
45 }
46 
47 #tips > p {
48     margin: 0;
49     line-height: 50px;
50     text-align: center;
51     color: white;
52 }
53 .directions{
54     width:50%;
55     margin:0 auto;
56     text-align: center;
57     line-height: 30px;
58     color: white;
59     background-color: #a7cbf0;
60 }

 1 $("#container>.row>.unit>img").each(function () {
 2     $(this).click(function (event) {
 3         event.stopPropagation();
 4         $(".unit").removeClass("move");
 5         $(this).parent(".unit").addClass("move");
 6     })
 7 });
 8 move(".move","#tips");
 9 function move(className,idName) {
10     /* 提示信息 */
11     function tipsAlert(idName) {
12         $(idName).animate({top: "0", opacity: "1"}, 500);
13         setTimeout(function () {
14             $(idName).animate({top: "-50px", opacity: "0"}, 800);
15         }, 1000)
16     }
17     /* 上下左右按鍵移動 */
18     $(document).keydown(function (e) {
19         var code = e.keyCode;
20         if (code > 40 || code < 37) {
21             return false;
22         }
23         var prev = $(className)[0].previousElementSibling;//選中元素前置位元素是否存在,以此判斷元素是否還可以左右移動
24         var next = $(className)[0].nextElementSibling;//選中元素後置位元素是否存在,以此判斷元素是否還可以左右移動
25         var paprev = $(className).parent()[0].previousElementSibling;//選中元素父級前置位元素是否存在，以此判斷元素是否還可以上下移動
26         var panext = $(className).parent()[0].nextElementSibling;//選中元素父級後置位元素是否存在，以此判斷元素是否還可以上下移動
27         var index = $(className).index();//根據選中元素的索引值，來確定上下移動時對換的位置
28         var movenDiv = $(className).next()[0];//以此確定上下對換元素添加方式
29         var movepDiv = $(className).prev()[0];//以此確定上下對換元素添加方式
30         switch (code) {
31             case 37://左
32                 if (prev) {
33                     $(className).insertBefore(prev);
34                 } else {
35                     tipsAlert(idName);
36                 }
37                 break;
38             case 38://上
39                 if (paprev) {
40                     var exchangeTop = $(paprev).children()[index];
41                     $(className).insertBefore(exchangeTop);
42                     if (movenDiv) {
43                         $(exchangeTop).insertBefore(movenDiv);
44                     } else {
45                         $(exchangeTop).insertAfter(movepDiv)
46                     }
47 
48                 } else {
49                     tipsAlert(idName);
50                 }
51                 break;
52             case 39://右
53                 if (next) {
54                     $(className).insertAfter(next);
55                 } else {
56                     tipsAlert(idName)
57                 }
58                 break;
59             case 40://下
60                 if (panext) {
61                     var exchangeBottom = $(panext).children()[index];
62                     $(className).insertBefore(exchangeBottom);
63                     if (movenDiv) {
64                         $(exchangeBottom).insertBefore(movenDiv);
65                     } else {
66                         $(exchangeBottom).insertAfter(movepDiv)
67                     }
68                 } else {
69                     tipsAlert(idName);
70                 }
71                 break;
72 
73         }
74     });
75 
76 
77 }

菜鳥一隻，僅供參考，歡迎留言更好的代碼建議，謝謝啦!