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插件之validation插件
Mar 29 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现评论模块
Aug 19 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
html中两种获取标签内的值的方法
Jun 16 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日历[测试通过]
2008/03/27 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
php实现session共享的实例方法
2019/09/19 PHP
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
python实现五子棋小游戏
2020/03/25 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
thinkphp5 路由分发原理
2021/03/18 PHP
CSS3 分类菜单效果
2019/05/27 HTML / CSS
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
11月红领巾广播稿
2014/01/17 职场文书
体育教师求职信
2014/06/30 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL