基于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 相关文章推荐
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jquery自定义组件实例详解
Dec 31 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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的header和asp中的redirect比较
2006/10/09 PHP
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php 定义404页面的实现代码
2012/11/19 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
javascript document.referrer 用法
2009/04/30 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
Python中文编码那些事
2014/06/25 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
个人课题方案
2014/05/08 职场文书
大专学生求职信
2014/07/04 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
亮剑观后感600字
2015/06/05 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python
MySQL常用慢查询分析工具详解
2022/08/14 MySQL