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

2019-11-19 15:29:00

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>

附：完整实例代码点击此处本站下载。

PS：这里再为大家推荐两款相关图片类工具供大家参考：

在线美女拼图游戏：
http://tools.VeVB.COm/games/pintu

在线图片添加/解密隐藏信息(隐写术)工具：
http://tools.VeVB.COm/aideddesign/img_add_info

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：Angular 4.0学习教程之架构详解

下一篇：详解vue axios中文文档