Home > Article > Web Front-end > Example sharing of the nine-square puzzle game implemented by jQuery+vue.js

Example sharing of the nine-square puzzle game implemented by jQuery+vue.js

小云云Original: 2017-12-29 09:29:362872browse

This article mainly introduces the nine-square puzzle game implemented by jQuery+vue.js, and analyzes the related operation skills of jQuery combined with vue.js for pictures in the form of a complete example. Friends who need it can refer to it. I hope it can help everyone.

<!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>
<p id="appbox" :style="{ width:width+&#39;px&#39;,height:height+&#39;px&#39; }">
  <p id="piclist">
    <p class="nitem"
       v-for="(item,index) in itemlist"
       :class="{remove : index === 0}"
       :index="index "
       v-bind:style="{
        &#39;backgroundPosition&#39;:-px(index)+&#39;px -&#39; + py(index) + &#39;px&#39;,
         width : width / rows + &#39;px&#39;,
         height : height / cols + &#39;px&#39;}">{{index}}
    </p>
  </p>
</p>
</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 = $(&#39;#piclist .nitem&#39;).eq(i);
    var jobj = $(&#39;#piclist .nitem&#39;).eq(j);
    var tobj = iobj.clone();
    jobj.after(tobj);
    iobj.replaceWith(jobj);
  }
  vm.$nextTick(function () {
    $(&#39;.remove&#39;).css({
      background: &#39;none&#39;,
      backgroundColor: &#39;green&#39;
    });
  });
  function box_rand(times) {
    for (var i = 0; i < times; i++) {
      oindex = $(&#39;.remove&#39;).index();
      oa = getBound(oindex);
      olen = oa.length;
      oi = Math.floor(Math.random() * olen);
      cindex = oa[oi];
      box_switch(cindex, oindex);
    }
    listarray.length = 0;
    $.each($(&#39;.nitem&#39;), function (i, item) {
      listarray.push($(item).attr(&#39;index&#39;));
    });
    if (listarray.join(&#39;,&#39;) == vm.itemlist.join(&#39;,&#39;)) {
      box_rand(times);
    }
  }
  $(function () {
    //打乱图片
    box_rand(20);
    $(&#39;.nitem&#39;).on(&#39;click  &#39;, function () {
      var cindex = $(this).index();
      var oindex = $(&#39;.remove&#39;).index();
      var oRound = getBound(oindex); //空盒子四周的索引
      if ($.inArray(cindex, oRound) < 0) { //不在
        return false;
      } else {
        box_switch(oindex, cindex);
        var listArray = new Array();
        $.each($(&#39;.nitem&#39;), function (i, item) {
          listArray.push($(item).attr(&#39;index&#39;));
        })
        if (listArray.join(&#39;,&#39;) == vm.itemlist.join(&#39;,&#39;)) {
          alert(&#39;success&#39;)
        } else {
          console.log(&#39;失败&#39;)
        }
      }
    });
  })
</script>
</html>

Related recommendations:

Detailed example of implementing a guessing game based on vue components

html5 tutorial on making mooncake-eating games

How to use js to develop and implement a simple snake game

The above is the detailed content of Example sharing of the nine-square puzzle game implemented by jQuery+vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed examples of how to use jquery keyboard eventsNext article：Detailed examples of how to use jquery keyboard events

See more

Example sharing of the nine-square puzzle game implemented by jQuery+vue.js

Related articles