Teach you to write a happy Vue Diminshing music

Done before a problem algorithm, the algorithm is required to write a logical algorithm Diminshing happy music, it was also considered a period of time to do it. Later I thought, since core algorithms have, and can not achieve a happy Diminshing fun little game of it, so it took two days to do a little game out.

Show results

Here in the first place to achieve the effect of a final, still a relatively junior version, you have any ideas welcome comments oh

game rules:

Initially will give players a very initial points per drag once by one point, to eliminate a box on each plus a point, until the end of the final score for the game 0
Any two squares can drag

interface design

The page layout is simple, grid data is in the form of a two-dimensional array, at this point we should have learned how to do the interface.

<div
  v-for="(item, index) in squareData"
  :key="index"
  class="row">
  <div
    v-for="(_item, _index) in item"
    :key="_index"
    class="square"
    :class="_item"
    @mousedown="dragStart(index, _index)"
    @mouseup="dragEnd">
    {{_item}}
  </div>
</div>

We should note that the :class="_item"wording, dynamically named class, so that each type of block colors are different, can follow the same color to eliminate the last play on-line operation.

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

While the player clicks on the box when the box will swing around to indicate that this box is checked, you can also enhance the Smart of the game. About implementation of HTML animation there are many, here we use CSS animation operation, as follows:

@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;
}

The core algorithm

Elimination algorithm

I mentioned above is done before a question is to determine a two-dimensional array of elements there is no cancellation, anything is how many.

Here, we can think, most traversing an entire two-dimensional array, each define a X- ₀ , X- _{. 1} , the Y ₀ , the Y _{. 1} , and its vertical and horizontal position of each block is calculated continuously the same, in this process to Note that the border issue, and then we recorded these four variables, as long as | the X- ₀ -X ₁ +1 |> or = 3 | the Y- ₀ -Y ₁ +1 |> = 3, we can be added to the coordinates of the box delarray.

After completion of traversing an entire two-dimensional array, we can be delan array corresponding to the coordinate position of the box content becomes '0', because we do not define the style of 0, so no execution whereabouts algorithm before the block becomes 0 is white.

Whereabouts algorithm

After we appropriate box white box should drop its top, where my thinking is like this.

Column two-dimensional array in accordance with the traversal, t define a pointer, pointing to the last position of the block is not 0, the event is not a block is a block of the grid will be 0 with t meaning the exchange line, and so a simplified diagram below:

So that we can move to the empty top level, and do not disrupt the order, then we fill empty squares on top of it at random. After we finished filling cancellation algorithm to do it again, until the dellength of the array is empty so far, the reason we should be able to think.

code show as below

clear(): void {
  const m: number = 10;
  const n: number = 10;
  while (true) {
    const del: any[] = [];
    for (let i: number = 0; i < m; i++) {
      for (let j: number = 0; j < n; j++) {
        if (this.squareData[i][j] === '0') {
          continue;
        }
        let x0: number = i;
        let x1: number = i;
        let y0: number = j;
        let y1: number = j;
        while (x0 >= 0 && x0 > i - 3 && this.squareData[x0][j] === this.squareData[i][j]) {
          --x0;
        }
        while (x1 < m && x1 < i + 3 && this.squareData[x1][j] === this.squareData[i][j]) {
          ++x1;
        }
        while (y0 >= 0 && y0 > j - 3 && this.squareData[i][y0] === this.squareData[i][j]) {
          --y0;
        }
        while (y1 < n && y1 < j + 3 && this.squareData[i][y1] === this.squareData[i][j]) {
          ++y1;
        }
        if (x1 - x0 > 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 < n; ++j) {
      let t: number = m - 1;
      for (let i: number = m - 1; i >= 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;
        }
      }
    }
  }
},

game over

A score of 0 when the game is over, this time in the initialization function to perform again, to regenerate a happy Diminshing music plaid, the score is initialized to 10.

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

Project source code

Currently the project is hosted on github, welcome PR! Click here to jump