[jquery vue 对比]jQuery+vue.js实现的九宫格拼图游戏完整实例

本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏。分享给大家供大家参考，具体如下：

  
  
  



  
    {{index}}
    
  


<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>

[jquery vue 对比]jQuery+vue.js实现的九宫格拼图游戏完整实例

http://m.bbyears.com/wangyezhizuo/137238.html

推荐访问: