您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)jQuery如何實(shí)現(xiàn)拼圖小游戲的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
小熊維尼拼圖
jQuery代碼實(shí)現(xiàn)拼圖小游戲,鼠標(biāo)選中拼塊,用上下左右鍵移動拼塊。
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
#box-div { position: relative; width: 508px; height: 631px; margin: 0 auto; } #container { width: 508px; height: 631px; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #d5e0e6; } #container > .row { display: -webkit-box; white-space: nowrap; } #container > .row > .unit { width: 169px; height: 209px; display: inline-block\9;/*兼容IE9/10*/ vertical-align: top\9;/*兼容IE9/10*/ box-sizing: border-box; border: 1px solid rgba(7, 157, 239, 0); } #container > .row > .unit.move { border: 1px solid rgba(7, 157, 239, 1); } #tips { width: 200px; height: 50px; background: rgb(152, 206, 50); position: absolute; z-index: 5; top: -50px; left: calc(50% - 100px); opacity: 0; } #tips > p { margin: 0; line-height: 50px; text-align: center; color: white; } .directions{ width:50%; margin:0 auto; text-align: center; line-height: 30px; color: white; background-color: #a7cbf0; }
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();//根據(jù)選中元素的索引值,來確定上下移動時對換的位置 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; } }); }
感謝各位的閱讀!關(guān)于“jQuery如何實(shí)現(xiàn)拼圖小游戲”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。