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 dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery轮播图功能制作方法详解
Dec 03 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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
python dict乱码如何解决
2020/06/07 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
小学后勤管理制度
2014/01/14 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
小学作文评语大全
2014/04/21 职场文书
快餐公司创业计划书
2014/04/29 职场文书
安全口号大全
2014/06/21 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
Python3.10的一些新特性原理分析
2021/09/15 Python
mysql如何查询连续记录
2022/05/11 MySQL