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

发布时间:2021-05-24 14:45:53 作者:小新
来源:亿速云 阅读:346

小编给大家分享一下基于jquery如何实现九宫格拼图小游戏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

九宫格拼图小游戏是小时候比较常见的小游戏之一。闲着无聊就用js简单写了一个。

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

游戏的玩法很简单。九宫格中有八个小图片。随机打乱之后,将八张小图片拼接成一个完整的图。

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.在九宫格下每个图的顺序如下。

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

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

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

3.在九宫格下每个位置除法取最小整数的值如下。

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

现在看起来应该简单多了。当取余相等时,两个位置在一列上。当除法取最小整数相等时,两个位置在一行上。
但是此时还存在一个问题,在一行或者一列上也有可能中间有间隔。所以采取当取余相等时,用除法的结果+1或者-1。此时就可以判断是否有间隔值了。

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

以上是“基于jquery如何实现九宫格拼图小游戏”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. OpenCV Python实现拼图小游戏
  2. python实现拼图小游戏

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery

上一篇:jQuery如何实现点击图标div循环放大缩小功能

下一篇:jQuery如何实现当拉动滚动条到底部加载数据的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》