jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】


Posted in jQuery onSeptember 12, 2017

本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    /*#piclist {
      width: 600px;
      height: 600px;
      background-color: green;
    }*/
    .nitem {
      /*width: 200px;*/
      /*height: 200px;*/
      float: left;
      background: url(img/meinv.jpg) 0px 0px no-repeat;
      -webkit-background-size: 600px 600px;
      background-size: 600px 600px;
      font-size: 33px;
      color: red;
      font-weight: bold;
      cursor: pointer;
    }
    /*.nitem:nth-child(2){
      background-position: -200px 0;
    }
    .nitem:nth-child(3){
      background-position: -400px 0;
    }
    .nitem:nth-child(4){
      background-position: 0px -200px;
    }
    .nitem:nth-child(5){
      background-position: -200px -200px;
    }
    .nitem:nth-child(6){
      background-position: -400px -200px;
    }
    .nitem:nth-child(7){
      background-position: 0px -400px;
    }
    .nitem:nth-child(8){
      background-position: -200px -400px;
    }
    .nitem:nth-child(9){
      background-position: -400px -400px;
    }*/
    .fn-clear {
      clear: both;
      height: 0;
      line-height: 0px;
      font-size: 0px;
    }
  </style>
</head>
<body>
<div id="appbox" :style="{ width:width+'px',height:height+'px' }">
  <div id="piclist">
    <div class="nitem"
       v-for="(item,index) in itemlist"
       :class="{remove : index === 0}"
       :index="index "
       v-bind:style="{
        'backgroundPosition':-px(index)+'px -' + py(index) + 'px',
         width : width / rows + 'px',
         height : height / cols + 'px'}">{{index}}
    </div>
  </div>
</div>
</body>
<script src=js/jquery-1.9.1.min.js></script>
<script src=js/vue.min.js></script>
<script>
  var olen = 0, oi = 0, cindex = 0, oa = new Array(), oindex = 0, listarray = new Array();
  var vm = new Vue({
    el: "#appbox",
    data: {
      itemlist: [],
      rows: 3,
      cols: 3,
      width: 600,
      height: 600,
    },
    methods: {
      px(index){
        return (index % this.rows) * (this.width / this.rows)
      },
      py (index){
        return parseInt((index / this.cols)) * (this.height / this.cols);
      }
    }
  });
  for (var i = 0; i < vm.rows * vm.cols; i++) {
    vm.itemlist.push(i);
  }
  function getrow(index) {
    return parseInt(index / vm.cols);
  }
  function getcols(index) {
    return index % vm.rows;
  }
  function getBound(index) {
    var left = index - 1;
    var right = index + 1;
    var top = index - vm.rows;
    var bottom = index + vm.rows;
    var len = vm.itemlist.length; //总长度
    var currentRow = getrow(index);
    var currentCol = getcols(index);
    var roundArr = new Array();
    if (left >= 0 && left < len && getrow(left) == currentRow) {
      roundArr.push(left);
    }
    if (right >= 0 && right < len && getrow(right) == currentRow) {
      roundArr.push(right);
    }
    if (top >= 0 && top < len && getcols(top) == currentCol) {
      roundArr.push(top);
    }
    if (bottom >= 0 && bottom < len && getcols(bottom) == currentCol) {
      roundArr.push(bottom);
    }
    return roundArr;
  }
  function box_switch(i, j) {
    var iobj = $('#piclist .nitem').eq(i);
    var jobj = $('#piclist .nitem').eq(j);
    var tobj = iobj.clone();
    jobj.after(tobj);
    iobj.replaceWith(jobj);
  }
  vm.$nextTick(function () {
    $('.remove').css({
      background: 'none',
      backgroundColor: 'green'
    });
  });
  function box_rand(times) {
    for (var i = 0; i < times; i++) {
      oindex = $('.remove').index();
      oa = getBound(oindex);
      olen = oa.length;
      oi = Math.floor(Math.random() * olen);
      cindex = oa[oi];
      box_switch(cindex, oindex);
    }
    listarray.length = 0;
    $.each($('.nitem'), function (i, item) {
      listarray.push($(item).attr('index'));
    });
    if (listarray.join(',') == vm.itemlist.join(',')) {
      box_rand(times);
    }
  }
  $(function () {
    //打乱图片
    box_rand(20);
    $('.nitem').on('click  ', function () {
      var cindex = $(this).index();
      var oindex = $('.remove').index();
      var oRound = getBound(oindex); //空盒子四周的索引
      if ($.inArray(cindex, oRound) < 0) { //不在
        return false;
      } else {
        box_switch(oindex, cindex);
        var listArray = new Array();
        $.each($('.nitem'), function (i, item) {
          listArray.push($(item).attr('index'));
        })
        if (listArray.join(',') == vm.itemlist.join(',')) {
          alert('success')
        } else {
          console.log('失败')
        }
      }
    });
  })
</script>
</html>
jQuery 相关文章推荐
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
如何编写jquery插件
Mar 29 jQuery
jquery实现图片轮播器
May 23 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 #jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 #jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 #jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 #jQuery
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
You might like
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
python3实现多线程聊天室
2018/12/12 Python
python将字符串转换成json的方法小结
2019/07/09 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
Python如何给你的程序做性能测试
2020/07/29 Python
python源文件的字符编码知识点详解
2021/03/04 Python
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
计算机专业优秀大学生自我总结
2014/01/21 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
中学生评语大全
2014/04/18 职场文书
高中生学习计划书
2014/09/15 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
交通事故协议书范文
2014/10/23 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
家属联谊会致辞
2015/07/31 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
Moment的feature导致线上bug解决分析
2022/09/23 Javascript