Detailed explanation of the steps to implement 2048 mini game using vue

This time I will give you a detailed explanation of the steps 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.

git clone
npm i
npm run dev

The implementation ideas are as follows:

1. Using vue-cli to build a project may be a bit cumbersome for this project, but I am too lazy to build another one

2. The 4X4 squares are stored in a two-dimensional array. After binding, you only care about this two-dimensional array and leave other matters to vue

3. Listen to the keyboardEvent

4. The core part of 2048 is the move and merge algorithm. Because it is a 4X4 matrix, as long as the left shift algorithm is implemented, the other directions To move, you only need to rotate the matrix, move and merge it, rotate it back, and render the dom

5. Bind styles with different values

6. Score Calculate, and use 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>

The DOM of the main game part is very simple. It is rendered with a two-dimensional array and dynamically bound to the style

Shift left

It mainly consists of the following Case:

• 2 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,

1. Traverse the single row array, if there is data, record it as cell, and find the furthest empty position that the cell can move to the left

2. Determine whether the left side of farthest exists. If it does not exist, move directly to farthest

3. If it exists, determine the value of farthest - 1 and cell Are they the same

4. Same=> Merge

5. Not the same=>Move to the farthest position

6. After the move, clear the cell

7. Next round

Because in a round of movement, a number can only be merged once, so every time 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:

VeeValidate form verification use case code analysis in vue project

Addition, deletion and modification of JavaScript DOM elements Detailed explanation of steps

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