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

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

效果展示

html代码

1 <div>

2 <!--走不通时的提示！-->

3 <div>

4 <p>\(╯-╰)/ 哎呦，走不通啦!</p>

5 </div>

6 <div>

7 <div>

8 <div><img src="http://www.h5cn.com/upload8/allimg/170801/13111392G_1.png" alt="photo1"/></div>

9 <div><img src="http://www.h5cn.com/upload8/allimg/170801/130935I42_1.gif" alt="photo2"/></div>

10 <div><img src="http://www.h5cn.com/upload8/allimg/170801/13100X2M_0.gif" alt="photo3"/></div>

11 </div>

12 <div>

13 <div><img src="http://www.h5cn.com/upload8/allimg/170801/13100X2M_1.gif" alt="photo4"/></div>

14 <div><img src="http://www.h5cn.com/upload8/allimg/170801/130Z52D0_1.gif" alt="photo5"/></div>

15 <div><img src="http://www.h5cn.com/upload8/allimg/170801/130935I42_0.gif" alt="photo6"/></div>

16 </div>

17 <div>

18 <div><img src="http://www.h5cn.com/upload8/allimg/170801/130Z52D0_0.gif" alt="photo7"/></div>

19 <div><img src="http://www.h5cn.com/upload8/allimg/170801/130TQW8_0.gif" alt="photo8"/></div>

20 <div><img src="http://www.h5cn.com/upload8/allimg/170801/130TQW8_1.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 }

jquery代码

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 }

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