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坐标,

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

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

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

关于动画

神经猫没有动画。