基于jquery實(shí)現(xiàn)九宮格拼圖小游戲

更新時間：2021年08月16日 14:45:16 作者：春風(fēng)不及你的笑

這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)九宮格拼圖小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

九宮格拼圖小游戲是小時候比較常見的小游戲之一。閑著無聊就用js簡單寫了一個。

游戲的玩法很簡單。九宮格中有八個小圖片。隨機(jī)打亂之后，將八張小圖片拼接成一個完整的圖。

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)擊圖片時，和游戲中的空白圖進(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
})

這里可能會有疑問。為什么后邊要多一步 “把點(diǎn)擊的div插入到復(fù)制div的前面”。測試過程中，發(fā)現(xiàn)clone()不會保留js操作節(jié)點(diǎn)。也就是點(diǎn)擊的div所擁有的class，不能被繼承。所以多這一步是為了點(diǎn)擊過的div后面還能再繼續(xù)點(diǎn)擊。

保證只有相鄰才能互換

當(dāng)然，只有在空白div旁邊的圖片才能與其互換。不然游戲就太簡單了。如何實(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'){
        //這里是無法交換位置的邏輯。可以做點(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>

算法看起來會比較亂。簡單的說是通過求余和相除取最小整數(shù)的方式來計(jì)算。

畫幾個表可能就清楚了。

1.在九宮格下每個圖的順序如下。

2.在九宮格下每個位置求余后的值如下。

3.在九宮格下每個位置除法取最小整數(shù)的值如下。

現(xiàn)在看起來應(yīng)該簡單多了。當(dāng)取余相等時，兩個位置在一列上。當(dāng)除法取最小整數(shù)相等時，兩個位置在一行上。
但是此時還存在一個問題，在一行或者一列上也有可能中間有間隔。所以采取當(dāng)取余相等時，用除法的結(jié)果+1或者-1。此時就可以判斷是否有間隔值了。

最后

到這里，游戲的主體就算寫完了。當(dāng)然，如何想豐富游戲趣味，可以加入計(jì)時器、完成所用步驟等等。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: