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


Posted in jQuery onNovember 30, 2018

九宫格拼图小游戏是小时候比较常见的小游戏之一。闲着无聊就用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来布局。具体实现就不??铝恕N恼碌闹氐闶?s的实现。

实现图片的互换

图片的互换其实就是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 相关文章推荐
js和jquery中获取非行间样式
May 05 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 #jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 #jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 #jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 #jQuery
You might like
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
js showModalDialog参数的使用详解
2014/01/07 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
matplotlib实现区域颜色填充
2019/03/18 Python
python文本数据处理学习笔记详解
2019/06/17 Python
django表单的Widgets使用详解
2019/07/22 Python
Python PIL图片添加字体的例子
2019/08/22 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Notino法国:购买香水和化妆品
2019/04/15 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
别名指示符是什么
2012/10/08 面试题
安全检查验收制度
2014/01/12 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
财产保全担保书
2015/01/20 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
委托书范本格式
2019/04/18 职场文书
python pygame入门教程
2021/06/01 Python