jQuery实现拼图小游戏

小熊维尼拼图                                                                                    2017-07-23       21:59:48

jQuery代码实现拼图小游戏，鼠标选中拼块，用上下左右键移动拼块。

效果展示

html代码

<div id="box-div">
     <!--走不通时的提示！-->
     <div id="tips">
         <p>\(╯-╰)/ 哎呦，走不通啦!</p>
     </div>
     <div id="container">
         <div class="row">
             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_01.png" alt="photo1"/></div>
             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_02.gif" alt="photo2"/></div>
             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_03.gif" alt="photo3"/></div>
         </div>
         <div class="row">
             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_04.gif" alt="photo4"/></div>
             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_05.gif" alt="photo5"/></div>
             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_06.gif" alt="photo6"/></div>
         </div>
         <div class="row">
             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_07.gif" alt="photo7"/></div>
             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_08.gif" alt="photo8"/></div>
             <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_09.gif" alt="photo9"/></div>
         </div>
     </div>
 </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 }

jquery代码

$("#container>.row>.unit>img").each(function () {
     $(this).click(function (event) {
         event.stopPropagation();
         $(".unit").removeClass("move");
         $(this).parent(".unit").addClass("move");
     })
 });
 move(".move","#tips");
 function move(className,idName) {
     /* 提示信息 */
     function tipsAlert(idName) {
         $(idName).animate({top: "0", opacity: "1"}, 500);
         setTimeout(function () {
             $(idName).animate({top: "-50px", opacity: "0"}, 800);
         }, 1000)
     }
     /* 上下左右按键移动 */
     $(document).keydown(function (e) {
         var code = e.keyCode;
         if (code > 40 || code < 37) {
             return false;
         }
         var prev = $(className)[0].previousElementSibling;//选中元素前置位元素是否存在,以此判断元素是否还可以左右移动
         var next = $(className)[0].nextElementSibling;//选中元素后置位元素是否存在,以此判断元素是否还可以左右移动
         var paprev = $(className).parent()[0].previousElementSibling;//选中元素父级前置位元素是否存在，以此判断元素是否还可以上下移动
         var panext = $(className).parent()[0].nextElementSibling;//选中元素父级后置位元素是否存在，以此判断元素是否还可以上下移动
         var index = $(className).index();//根据选中元素的索引值，来确定上下移动时对换的位置
         var movenDiv = $(className).next()[0];//以此确定上下对换元素添加方式
         var movepDiv = $(className).prev()[0];//以此确定上下对换元素添加方式
         switch (code) {
             case 37://左
                 if (prev) {
                     $(className).insertBefore(prev);
                 } else {
                     tipsAlert(idName);
                 }
                 break;
             case 38://上
                 if (paprev) {
                     var exchangeTop = $(paprev).children()[index];
                     $(className).insertBefore(exchangeTop);
                     if (movenDiv) {
                         $(exchangeTop).insertBefore(movenDiv);
                     } else {
                         $(exchangeTop).insertAfter(movepDiv)
                     }
 
                 } else {
                     tipsAlert(idName);
                 }
                 break;
             case 39://右
                 if (next) {
                     $(className).insertAfter(next);
                 } else {
                     tipsAlert(idName)
                 }
                 break;
             case 40://下
                 if (panext) {
                     var exchangeBottom = $(panext).children()[index];
                     $(className).insertBefore(exchangeBottom);
                     if (movenDiv) {
                         $(exchangeBottom).insertBefore(movenDiv);
                     } else {
                         $(exchangeBottom).insertAfter(movepDiv)
                     }
                 } else {
                     tipsAlert(idName);
                 }
                 break;
 
         }
     });
 
 
 }

菜鸟一只，仅供参考，欢迎留言更好的代码建议，谢谢啦!