博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue 开发 2048/围住神经猫 小游戏
阅读量:5963 次
发布时间:2019-06-19

本文共 758 字,大约阅读时间需要 2 分钟。

  -  -  小游戏

前言

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

遇到的坑

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

touch-action: none;复制代码

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

,这个我用的splice,

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

核心代码

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

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

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

围住神经猫  

前言

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

A*算法

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

关于坐标

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

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

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

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

关于动画

神经猫没有动画。

转载地址:http://cmjax.baihongyu.com/

你可能感兴趣的文章
C#语法——反射,架构师的入门基础。
查看>>
Beego Models 之 一
查看>>
代码生成工具Database2Sharp中增加视图的代码生成以及主从表界面生成功能
查看>>
Kubernetes部署的最佳安全实践
查看>>
理解C语言——从小菜到大神的晋级之路(8)——数组、指针和字符串
查看>>
Windows Shellcode学习笔记——shellcode在栈溢出中的利用与优化
查看>>
关于多线程中使用SendMessage
查看>>
【云栖大会】阿里云移动云Apsara Mobile重磅发布 推出Cloud Native App全新研发范式...
查看>>
【PMP】Head First PMP 学习笔记 第九章 人力资源管理
查看>>
2015年末必备前端工具集
查看>>
【Solidity】8. 杂项 - 深入理解Solidity
查看>>
关于在VS2005中编写DLL遇到 C4251 警告的解决办法
查看>>
Go语言大神亲述:历七劫方可成为程序员!
查看>>
CYQ.Data 轻量数据层之路 V4.5 版本发布[更好的使用体验,更优的缓存机制]
查看>>
NetApp针对其集群化方案“不值得升级”言论回击Wikibon
查看>>
QQ把游戏放进聊天框,这一点Facebook和微信都没做到
查看>>
在线匿名之父意欲终结“加密战争”
查看>>
WLAN市场销量逐步逼近有线网络
查看>>
力龙信息布局大数据领域
查看>>
大数据巧治职业差评师 生存空间锐减九成
查看>>