Exemple de partage du jeu de puzzle à neuf carrés implémenté par jQuery+vue.js-js tutoriel-php.cn

Exemple de partage du jeu de puzzle à neuf carrés implémenté par jQuery+vue.js

小云云

Libérer： 2017-12-29 09:29:36

original

2950 Les gens l'ont consulté

Cet article présente principalement le jeu de puzzle à grille de neuf carrés implémenté par jQuery+vue.js et analyse les compétences opérationnelles associées de jQuery combinées avec vue.js pour les images sous la forme d'un exemple complet. Les amis qui en ont besoin peuvent le faire. référez-vous-y. J'espère que cela pourra aider tout le monde.

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

Copier après la connexion

Recommandations associées :

Exemple détaillé d'implémentation d'un jeu de devinettes basé sur des composants vue

Tutoriel HTML5 pour créer un jeu de mangeur de gâteau de lune

Comment utiliser js pour développer et implémenter un jeu de serpent simple

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!