Vue implementation 2048 game function ideas

Try address

How to use:

  Git ClonenPM INPM Run DEV  

  1. Use the Vue-CLI to build a project, which may be a bit cumbersome on this project, but it is too lazy and then taken again
  2. 4×4 Checkered with a two-dimensional array, only cares about this two-dimensional array, and other things are handed over to Vue
  3. listening to the keyboard event
  4. 2048 The core part is the algorithm of the mobile merge, Because it is a 4×4 matrix, as long as the left-shif algorithm is implemented, the movement of other directions only needs to rotate the matrix, move the merge, and then rotate back, rendering the DOM
  5. to bind different values ​​
  6. Score calculation, and the highest score of LocalStorage


Major game part DOM, very simple, rendered with a two-dimensional array, and dynamically bind the style
Left shift

mainly by the following cases:

2 2 2 2 2 => 4 0 0

4 2 2 2 => 4 4 2 0

    0 4 2 2 => 4 4 0 0
  • 2 4 2 => 4 4 2 0
  • According to a single line of data,
  • Traversing a single line of array, if there is data, recorded as a Cell, looking for the FARTHEST

that CELL can be moved to the left FARTHEST

    determines whether the left side of the FARTHEST exists, there is no existence to move directly to If the FARTHEST
  1. is present, it is determined whether the value of FARTHEST – 1 and the same Cell are the same
  2. .
  3. is not the same => Move to FARTHEST position
  4. After the movement, the next round of Cell

  5. Because a number of moves can only be combined once, so each grid must have a merge parameter. To record if it has been incorporated.

_List.Foreach (item => {let farthest = this.farthestPosition (list, item) let Next = list [farthest – 1] if (Next && Next === Item.Value &&! _List [FARTHEST – 1] .merged) {// Merge List [FARTHEST – 1] = Next * 2 List [item.x] = undefined item = {x : FARTHEST – 1, MERGED: TRUE, VALUE: Next * 2} this.score + = next * 2} else {ix (farthest! = item.x) {list [farthest] = item.value list [item.x] = undefined item.x = farthest}}})

   the rotation matrix 
because the up, down, left, right virtually identical, can write four times, but error-prone, so I’ll rotate rotation matrix, and then move.

move above example, as long as the matrix once rotated counterclockwise, the left-shift becomes, after moving into a combined, as long as 4-1 times and then counterclockwise rotation matrix, and a matrix on a simple shift the same.

Algorithm counterclockwise rotation:

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

1) tmp = this.rotate ( tmp, n – 1) return tmp},
  < this.size; i++) {
      for (let j = 0; j   at this time has completed to 80%, and then just about perfect, added value, restart, etc. function on it. 


The above is a small series to introduce vue 2048 Detailed game features ideas, we want to help, if you have any questions Please give me a message, Xiao Bian will promptly reply to everyone. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment