Vue实现开心消消乐游戏算法

 

  {{_item}}
 

.square.A{
 background-color: #8D98CA;
}
.square.S{
 background-color: #A9A2F6;
}
/*其余操作相同*/

@keyframes jitter {
 from, 50%, to {
  transform: rotate(0deg);
 }
 10%, 30% {
  transform: rotate(10deg);
 }
 20% {
  transform: rotate(20deg);
 }
 60%, 80% {
  transform: rotate(-10deg);
 }
 70% {
  transform: rotate(-20deg);
 }
}
/* 只要是用户点击不动，动画就不会停止 */
.square:active{
 animation-name: jitter;
 animation-duration: 0.5s;
 animation-iteration-count: infinite;
}

clear(): void {
 const m: number = 10;
 const n: number = 10;
 while (true) {
  const del: any[] = [];
  for (let i: number = 0; i = 0 && x0 > i - 3 && this.squareData[x0][j] === this.squareData[i][j]) {
     --x0;
    }
    while (x1 = 0 && y0 > j - 3 && this.squareData[i][y0] === this.squareData[i][j]) {
     --y0;
    }
    while (y1  3 || y1 - y0 > 3) {
     del.push([i, j]);
    }
   }
  }
  if (del.length === 0) {
   break;
  }
  this.score += del.length;
  for (const square of del) {
   this.$set(this.squareData[square[0]], square[1], '0');
  }
  for (let j: number = 0; j = 0; --i) {
    if (this.squareData[i][j] !== '0') {
     [this.squareData[t][j], this.squareData[i][j]] = [this.squareData[i][j], this.squareData[t][j]];
     t -= 1;
    }
   }
  }
 }
},

if (this.score <= 0) {
  if (confirm('分数用光了哦~~')) {
   this.init();
  } else {
   this.init();
  }
 }