Home > Article > Web Front-end > 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:
Use vue-cli to build the project. It may be a bit cumbersome for this project, but I am also lazy. Then build a
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
Listen to the keyboardEvents
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
Bind styles with different values
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="'n-'+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
Mainly caused by the following situations: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:
How to use vee-validate in Vuenode uses express http-proxy- across domains Detailed explanation of middleware stepsThe 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!