vue 开发 2048/围住神经猫 小游戏

github  -  2048 -  围住神经猫 小游戏

前言

写之前，我觉得如果利用好vue的双向绑定，那么就只需要操纵数组就可以玩2048了。但实际操作过程中遇到坑好多。不过基本功能已经实现，可以玩额。

遇到的坑

阻止父元素原生的scroll事件，这关乎小游戏是否稳定，之前思路一直是觉得只要js就能搞定，现在发现，这个应该用css来做，但是ios手机至今想要解决办法。

touch-action: none;复制代码

方块移动的时候，需要一个动画，我用的css3，个倒是简单

vue对数组的监听，这个我用的splice，

由于dom元素是通过v-for 循环出来的，所以不得不考虑用空dom元素填充

核心代码

自然就是移动算法咯，为什么要用promise.all呢，本打算在移动完成后间隔0.1s，而后才进行相加。但是问题多多就算了算了用JavaScript的animate API。

------------------------------------------------------------------

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

围住神经猫  

前言

为啥要用vue做：好像可以蹭热度。

A*算法

网络上那些当然是看不懂了，就自己写个算了。

关于坐标

由于要判断四周是否可行，必须建立xyz坐标,

如何判断神经猫是否被围住了

为了方便，我当然是直接枚举所有可行路径，枚举不到，自然被围住了。当然这样是非常低效的，正确的姿势应该是枚举神经猫四周所有可行点，并存储于数组中，再次循环所有可行点道的四周的点，重复则跳过，直至枚举完所有节点，如果没有边界节点，那就是被围住了。

当得知神经猫被围住之后，给他添加狂暴状态动画。

关于动画

神经猫没有动画。