欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-09-08 11:40:44
本文实例讲述了jquery+vue.js实现的九宫格拼图游戏。分享给大家供大家参考，具体如下：

本文实例讲述了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：这里再为大家推荐两款相关图片类工具供大家参考：

在线美女拼图游戏：

在线图片添加/解密隐藏信息(隐写术)工具：

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

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

上一篇： js字符限制(字符截取) 一个中文汉字算两个字符

下一篇： 详解react-native-fs插件的使用以及遇到的坑

推荐阅读