Github – 2048 – Surround nerve cat mini game



preface

Before writing, I felt that if I took advantage of vue’s bidirectional binding, I would only need to manipulate arrays to play 2048. But the actual operation process encountered a lot of pits. But the basic function has been realized, you can play.

In the pit of

Prevent the parent element of the original Scroll event, which is related to the stability of the small game, before the idea has always been that js can be done, now found that this should be done with CSS, but ios phones want to solve the problem so far.

touch-action: none;Copy the code

Block movement, the need for an animation, I use CSS3, is simple

Vue listening on arrays, which I use splice,

Because dom elements are looped out through a V-for loop, you have to consider filling them with empty DOM elements

The core code

The promise. All algorithm was supposed to wait 0.1s after the move before adding. The animate API of JavaScript will animate you.






——————————————————————


= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

Enveloped neurocat





preface

Why vUE is used: It seems to soak up heat.

A * algorithm

Those on the network of course is to see do not understand, write oneself calculate.








About the coordinate

Since the xyz coordinates have to be established to determine whether the perimeter is feasible,



How do you tell if a neurocat is surrounded

For convenience, OF course, I enumerate all possible paths directly, not enumerate, naturally surrounded. Of course, this is very inefficient, the correct position should be enumerating all feasible points around the neural cat, and store in the array, loop all feasible points around the path again, repeat then skip, until enumerating all nodes, if there is no boundary node, that is surrounded.

When you know neuro cat is surrounded, animate him in his berserk state.

About the animation

Neurocat has no animation.