基于jquery实现九宫格拼图小游戏

2019-11-19 12:26:32

字体：大中小

来源：转载

供稿：网友

九宫格拼图小游戏是小时候比较常见的小游戏之一。闲着无聊就用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来布局。具体实现就不嗦了。文章的重点是js的实现。

实现图片的互换

图片的互换其实就是html中的div互换。当点击图片时，和游戏中的空白图进行交换。

$('.in').click(function(){  var t = $(this).clone(); //复制当前点击的div  $('.no_see').before(t); //在空白div的前面插入复制的div  $(this).before($('.no_see')); //把空白div插入到点击div的前面  t.before($(this)) //把点击的div插入到复制div的前面  t.remove(); //移除复制的div})

这里可能会有疑问。为什么后边要多一步 “把点击的div插入到复制div的前面”。测试过程中，发现clone()不会保留js操作节点。也就是点击的div所拥有的class，不能被继承。所以多这一步是为了点击过的div后面还能再继续点击。

保证只有相邻才能互换

当然，只有在空白div旁边的图片才能与其互换。不然游戏就太简单了。如何实现？下面先使用一种比较笨的方式来实现。

<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'){        //这里是无法交换位置的逻辑。可以做点什么。      }else{        var t = $(this).clone();        $('.no_see').before(t);        $(this).before($('.no_see'));        t.before($(this))        t.remove();      }    })  })</script>

是的，这种方法很蠢，但是可以实现。通过数组的方式，先找到空白div，再查看空白div所在位置四周有哪些位置的图片可以与其交换。

当然，九宫格使用这样的方式来实现没有问题，毕竟数组是可列的。但是如果变成16宫格，36宫格呢？先不说要去列数组，还要修改代码。这样就很费劲了。所以我需要通过别的方式，让代码以后扩展更容易。

通过算法保证互换条件

<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>

算法看起来会比较乱。简单的说是通过求余和相除取最小整数的方式来计算。

画几个表可能就清楚了。

1.在九宫格下每个图的顺序如下。

这里写图片描述