溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下基于jquery如何實現(xiàn)九宮格拼圖小游戲，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
九宮格拼圖小游戲是小時候比較常見的小游戲之一。閑著無聊就用js簡單寫了一個。
游戲的玩法很簡單。九宮格中有八個小圖片。隨機打亂之后，將八張小圖片拼接成一個完整的圖。
html代碼
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<style>
body{
border: 0;
}
.out{
width: 606px;
height: 606px;
margin: 0 auto;
border: 1px solid black;
}
.in{
width: 200px;
height: 200px;
background-color:red;
float: left;
border: 1px solid black;
}
.no_see{
width: 200px;
height: 200px;
background-color:white;
float: left;
border: 1px solid black;
}
.btn{
width: 50px;
height: 25px;
margin: 50px auto;
}
.begin{
width: 50px;
height: 25px;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>my game</title>
</head>
<body>
<div class="out">
<div class="in"><img src="1.png" alt="" /></div>
<div class="in"><img src="2.png" alt="" /></div>
<div class="in"><img src="3.png" alt="" /></div>
<div class="in"><img src="4.png" alt="" /></div>
<div class="in"><img src="5.png" alt="" /></div>
<div class="in"><img src="6.png" alt="" /></div>
<div class="in"><img src="7.png" alt="" /></div>
<div class="in"><img src="8.png" alt="" /></div>
<div class='no_see'></div>
</div>
</body>
</html>這里使用div來布局。具體實現(xiàn)就不啰嗦了。文章的重點是js的實現(xiàn)。
實現(xiàn)圖片的互換
圖片的互換其實就是html中的div互換。當點擊圖片時，和游戲中的空白圖進行交換。
$('.in').click(function(){
var t = $(this).clone(); //復(fù)制當前點擊的div
$('.no_see').before(t); //在空白div的前面插入復(fù)制的div
$(this).before($('.no_see')); //把空白div插入到點擊div的前面
t.before($(this)) //把點擊的div插入到復(fù)制div的前面
t.remove(); //移除復(fù)制的div
})這里可能會有疑問。為什么后邊要多一步 “把點擊的div插入到復(fù)制div的前面”。測試過程中，發(fā)現(xiàn)clone()不會保留js操作節(jié)點。也就是點擊的div所擁有的class，不能被繼承。所以多這一步是為了點擊過的div后面還能再繼續(xù)點擊。
保證只有相鄰才能互換
當然，只有在空白div旁邊的圖片才能與其互換。不然游戲就太簡單了。如何實現(xiàn)？下面先使用一種比較笨的方式來實現(xiàn)。
<script>
$(function(){
var menu = {
"1":["2","4"],
"2":["1","3","5"],
"3":["2","6"],
"4":["1","5","7"],
"5":["2","4","6","8"],
"6":["3","5","9"],
"7":["4","8"],
"8":["5","7","9"],
"9":["6","8"]
}
$('.in').click(function(){
var click_num = $(this).index()+1;
var no_see_num = $('.no_see').index()+1;
var arr = menu[no_see_num];
if(jQuery.inArray(String(click_num), arr)=='-1'){
//這里是無法交換位置的邏輯?？梢宰鳇c什么。
}else{
var t = $(this).clone();
$('.no_see').before(t);
$(this).before($('.no_see'));
t.before($(this))
t.remove();
}
})
})
</script>是的，這種方法很蠢，但是可以實現(xiàn)。通過數(shù)組的方式，先找到空白div，再查看空白div所在位置四周有哪些位置的圖片可以與其交換。
當然，九宮格使用這樣的方式來實現(xiàn)沒有問題，畢竟數(shù)組是可列的。但是如果變成16宮格，36宮格呢？先不說要去列數(shù)組，還要修改代碼。這樣就很費勁了。所以我需要通過別的方式，讓代碼以后擴展更容易。
通過算法保證互換條件
<script>
$(function(){
$('.in').click(function(){
var tmp = false;
var click_num = $(this).index();
var no_see_num = $('.no_see').index();
var click_x = click_num % 3;
var click_y = Math.floor(click_num / 3);
var no_see_x = no_see_num % 3;
var no_see_y = Math.floor(no_see_num / 3);
if (click_x==no_see_x) { //同一行
if (click_y==no_see_y+1||click_y==no_see_y-1) {
tmp = true; //保證相鄰
}
}else if (click_y==no_see_y) { //同一列
if (click_x==no_see_x+1||click_x==no_see_x-1) {
tmp = true; //保證相鄰
}
}
if (tmp) {
var t = $(this).clone();
t.addClass('bit');
$('.no_see').before(t);
$(this).before($('.no_see'));
t.before($(this))
t.remove();
}
})
})
</script>算法看起來會比較亂。簡單的說是通過求余和相除取最小整數(shù)的方式來計算。
畫幾個表可能就清楚了。
1.在九宮格下每個圖的順序如下。
2.在九宮格下每個位置求余后的值如下。
3.在九宮格下每個位置除法取最小整數(shù)的值如下。
現(xiàn)在看起來應(yīng)該簡單多了。當取余相等時，兩個位置在一列上。當除法取最小整數(shù)相等時，兩個位置在一行上。
但是此時還存在一個問題，在一行或者一列上也有可能中間有間隔。所以采取當取余相等時，用除法的結(jié)果+1或者-1。此時就可以判斷是否有間隔值了。
jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。
以上是“基于jquery如何實現(xiàn)九宮格拼圖小游戲”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼