基于jquery實(shí)現(xiàn)九宮格拼圖小游戲
九宮格拼圖小游戲是小時(shí)候比較常見的小游戲之一。閑著無聊就用js簡(jiǎn)單寫了一個(gè)。
游戲的玩法很簡(jiǎn)單。九宮格中有八個(gè)小圖片。隨機(jī)打亂之后,將八張小圖片拼接成一個(gè)完整的圖。
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來布局。具體實(shí)現(xiàn)就不啰嗦了。文章的重點(diǎn)是js的實(shí)現(xiàn)。
實(shí)現(xiàn)圖片的互換
圖片的互換其實(shí)就是html中的div互換。當(dāng)點(diǎn)擊圖片時(shí),和游戲中的空白圖進(jìn)行交換。
$('.in').click(function(){ var t = $(this).clone(); //復(fù)制當(dāng)前點(diǎn)擊的div $('.no_see').before(t); //在空白div的前面插入復(fù)制的div $(this).before($('.no_see')); //把空白div插入到點(diǎn)擊div的前面 t.before($(this)) //把點(diǎn)擊的div插入到復(fù)制div的前面 t.remove(); //移除復(fù)制的div })
這里可能會(huì)有疑問。為什么后邊要多一步 “把點(diǎn)擊的div插入到復(fù)制div的前面”。測(cè)試過程中,發(fā)現(xiàn)clone()不會(huì)保留js操作節(jié)點(diǎn)。也就是點(diǎn)擊的div所擁有的class,不能被繼承。所以多這一步是為了點(diǎn)擊過的div后面還能再繼續(xù)點(diǎn)擊。
保證只有相鄰才能互換
當(dāng)然,只有在空白div旁邊的圖片才能與其互換。不然游戲就太簡(jiǎn)單了。如何實(shí)現(xiàn)?下面先使用一種比較笨的方式來實(shí)現(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(diǎn)什么。 }else{ var t = $(this).clone(); $('.no_see').before(t); $(this).before($('.no_see')); t.before($(this)) t.remove(); } }) }) </script>
是的,這種方法很蠢,但是可以實(shí)現(xiàn)。通過數(shù)組的方式,先找到空白div,再查看空白div所在位置四周有哪些位置的圖片可以與其交換。
當(dāng)然,九宮格使用這樣的方式來實(shí)現(xiàn)沒有問題,畢竟數(shù)組是可列的。但是如果變成16宮格,36宮格呢?先不說要去列數(shù)組,還要修改代碼。這樣就很費(fèi)勁了。所以我需要通過別的方式,讓代碼以后擴(kuò)展更容易。
通過算法保證互換條件
<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>
算法看起來會(huì)比較亂。簡(jiǎn)單的說是通過求余和相除取最小整數(shù)的方式來計(jì)算。
畫幾個(gè)表可能就清楚了。
1.在九宮格下每個(gè)圖的順序如下。
2.在九宮格下每個(gè)位置求余后的值如下。
3.在九宮格下每個(gè)位置除法取最小整數(shù)的值如下。
現(xiàn)在看起來應(yīng)該簡(jiǎn)單多了。當(dāng)取余相等時(shí),兩個(gè)位置在一列上。當(dāng)除法取最小整數(shù)相等時(shí),兩個(gè)位置在一行上。
但是此時(shí)還存在一個(gè)問題,在一行或者一列上也有可能中間有間隔。所以采取當(dāng)取余相等時(shí),用除法的結(jié)果+1或者-1。此時(shí)就可以判斷是否有間隔值了。
最后
到這里,游戲的主體就算寫完了。當(dāng)然,如何想豐富游戲趣味,可以加入計(jì)時(shí)器、完成所用步驟等等。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請(qǐng)求,返回DataSet(XML) 異步調(diào)用
Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請(qǐng)求,返回DataSet(XML) 異步調(diào)用實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-03-03JSON中key動(dòng)態(tài)設(shè)置及JSON.parse和JSON.stringify()的區(qū)別
這篇文章主要介紹了JSON中key動(dòng)態(tài)設(shè)置及JSON.parse和JSON.stringify()的區(qū)別講解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2016-12-12jquery.serialize() 函數(shù)語法及簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨query.serialize() 函數(shù)語法及簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07jQuery的時(shí)間datetime控件在AngularJs中的使用實(shí)例(分享)
下面小編就為大家?guī)硪黄猨Query的時(shí)間datetime控件在AngularJs中的使用實(shí)例(分享)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法
這篇文章主要詳細(xì)介紹了jQuery操縱DOM元素屬性 attr()和removeAtrr()方法,非常的全面細(xì)致,在這里推薦給小伙伴們。2015-01-01Jquery 組合form元素為json格式,asp.net反序列化
Jquery組合form元素為json格式,asp.net反序列化實(shí)現(xiàn)代碼,大家可以具體的看下面的說明。2009-07-07