jQuery实现拼图小游戏(实例讲解)
投稿：jingxian
下面小编就为大家带来一篇jQuery实现拼图小游戏(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
小熊维尼拼图
jQuery代码实现拼图小游戏，鼠标选中拼块，用上下左右键移动拼块。
html代码
div id="box-div"
!--走不通时的提示！--
div id="ti凡科抠图"
p \(╯-╰)/ 哎呦，走不通啦! /p
/div
div id="container"
div
div img src="images/weini_part_01.png" alt="photo1"/ /div
div img src="images/weini_part_02.gif" alt="photo2"/ /div
div img src="images/weini_part_03.gif" alt="photo3"/ /div
/div
div
div img src="images/weini_part_04.gif" alt="photo4"/ /div
div img src="images/weini_part_05.gif" alt="photo5"/ /div
div img src="images/weini_part_06.gif" alt="photo6"/ /div
/div
div
div img src="images/weini_part_07.gif" alt="photo7"/ /div
div img src="images/weini_part_08.gif" alt="photo8"/ /div
div img src="images/weini_part_09.gif" alt="photo9"/ /div
/div
/div
/div
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 {
ti凡科抠图Alert(idName);
break;
case 38://上
if (paprev) {
var exchangeTop = $(paprev).children()[index];
$(className).insertBefore(exchangeTop);
if (movenDiv) {
$(exchangeTop).insertBefore(movenDiv);
} else {
$(exchangeTop).insertAfter(movepDiv)
} else {
ti凡科抠图Alert(idName);
break;
case 39://右
if (next) {
$(className).insertAfter(next);
} else {
ti凡科抠图Alert(idName)
break;
case 40://下
if (panext) {
var exchangeBottom = $(panext).children()[index];
$(className).insertBefore(exchangeBottom);
if (movenDiv) {
$(exchangeBottom).insertBefore(movenDiv);
} else {
$(exchangeBottom).insertAfter(movepDiv)
} else {
ti凡科抠图Alert(idName);
break;
以上这篇jQuery实现拼图小游戏(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持凡科。
