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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 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
php allow_url_include的应用和解释
2010/04/22 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
python的常用模块之collections模块详解
2018/12/06 Python
Python 处理图片像素点的实例
2019/01/08 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
Python读写Excel表格的方法
2021/03/02 Python
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
什么是Rollback Segment
2013/04/22 面试题
上班玩手机检讨书
2014/02/17 职场文书
委托书模板
2014/04/04 职场文书
妇女工作先进事迹
2014/08/17 职场文书
加强作风建设工作总结
2014/10/23 职场文书
2015年教研员工作总结
2015/05/26 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python