How to use vue to implement the 2048 mini game

This time I will show you how to use vue to implement the 2048 mini game. What are the precautions for using vue to implement the 2048 mini game. The following is a practical case, let's take a look.

Usage:

git clone
npm i
npm run dev

The implementation ideas are as follows:

1. Use vue-cli to build the project. It may be a bit cumbersome for this project, but I am also lazy. Then build a

2. 4X4 square and store it in a two-dimensional array. After binding, you only care about this two-dimensional array and leave other things to vue

3. Listen to the keyboardEvents

4. The core part of 2048 is the movement merging algorithm. Because it is a 4X4 matrix, as long as To implement the left shift algorithm, moving in other directions only requires rotating the matrix, merging the moves, rotating it back, and rendering the dom

5. Bind styles with different values

6. Score calculation, and using localstorage to store the highest score

##Key implementation

DOM

<p class="box">
  <p class="row" v-for="row in list">
    <p class="col" :class="&#39;n-&#39;+col" v-for="col in row">{col}}</p>
  </p>
</p>

Shift left

• 2 2 2 => 4 4 0 0

• 4 2 2 2 => 4 4 2 0

• 0 4 2 2=> 4 4 0 0

##2 2 4 2 => 4 4 2 0
Take the example of a single row of data,

Traverse the single row array, if there is data, record it as cell, look for the cell to the left Move to the farthest empty position farthest
Determine whether the left side of farthest exists. If it does not exist, move directly to farthest
If it exists, Then judge whether the value of farthest - 1 is the same as that of cell
Same=> Merge
Not the same=>Move to farthest position
After moving, clear the cell
Next round
Because one round of movement is in progress, A number can only be merged once, so each grid must have a merged parameter to record whether it has been merged.

Main code:

_list.forEach(item => {
    let farthest = this.farthestPosition(list, item)
    let next = list[farthest - 1]
    if (next && next === item.value && !_list[farthest - 1].merged) {
      //合并
      list[farthest - 1] = next * 2
      list[item.x] = undefined
      item = {
        x: farthest - 1,
        merged: true,
        value: next * 2
      }
      this.score += next * 2
    } else {
      if (farthest != item.x) {
        list[farthest] = item.value
        list[item.x] = undefined
        item.x = farthest
      }
    }
  })

Matrix rotation Because moving up, moving down, moving left, moving right actually It's the same. You can write it 4 times, but it's easy to make mistakes, so I directly rotate the matrix and then move it.

For example, as long as the matrix is ​​rotated counterclockwise once, the upward shift becomes a left shift. After the moves are merged, as long as the matrix is ​​rotated counterclockwise 4-1 times, the matrix will be the same as a simple upward shift. Moved the same.

Counterclockwise rotation algorithm:

rotate(arr, n) {
    n = n % 4
    if (n === 0) return arr
    let tmp = Array.from(Array(this.size)).map(() => Array(this.size).fill(undefined))
    for (let i = 0; i < this.size; i++) {
      for (let j = 0; j < this.size; j++) {
        tmp[this.size - 1 - i][j] = arr[j][i]
      }
    }
    if (n > 1) tmp = this.rotate(tmp, n - 1)
    return tmp
  },

At this point, it is 80% complete. It just needs to be improved, adding points, restarting and other functions.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of How to use vue to implement the 2048 mini game. For more information, please follow other related articles on the PHP Chinese website!