这个主意…
我曾经和我的孩子玩过一个很好的旧记忆游戏。 她很小的时候就学会玩这个游戏，我们拥有许多不同的纸牌。
有一次，当我们玩这个游戏时，我们引入了一条规则，该规则规定如果您猜错了，对手可以随机选择桌子上的纸牌顺序。 游戏开始变得更加有趣，因为除了记住特定卡的位置之外，您还需要注意其移动。
与孩子一起编码
我真的很喜欢和孩子一起玩，特别是在绘画，绘画，折纸等富有创造力的事情上。突然想到，为什么我们不应该尝试一起做电脑游戏。
当然我没注意教她编码。 我什至不确定孩子是否能这么早地学习编程学科。 相反，我想向她展示制作程序的过程。 如何在手机或浏览器上写东西以及查看结果。
您可以猜到，我们从白皮书开始，我们首先绘制了细节。
下一步是构建第一个版本。 我们只需要几个小时。 当然那只是MVP，但我们希望尽快看到我们想法的结果。
技术
我是JAVA的狂热爱好者，并且是使用基于JAVA的框架GWT（例如Google Web Toolkit ）构建了大量复杂产品的人。 我认为TypeScript是类似GWT的技术的逻辑继承者。
GWT的想法是使用JAVA语言及其工具编写代码，然后将其编译为可在浏览器上运行的JavaScript。 TypeScript使用其他语言功能（JavaScript缺少的功能）扩展了基本JavaScript语言，并将最终输出转换为常规JavaScript。
在TypeScript中，您可以直接使用：类型，名称空间，类，接口，lambda，泛型，访问说明符等。TypeScript是一种功能丰富的语言，可用于：OO设计，静态代码分析，重构等。使用d.ts声明（ 键入 ）文件，您可以轻松集成任何基于JS的框架。
UI和DOM操作
由于该游戏非常简单，因此我不想使用某些游戏引擎进行渲染。 我知道有很多这样的技术，但是为此，DOM远远不能令人满意。 为了使用DOM进行操作，我使用了与适当的jquery.d.ts类型声明集成在一起的jQuery 。 我想尝试保持清晰的依赖关系，这就是为什么我避免使用Vue.js或React之类的框架的原因。
动画
动画是通过CSS转换完成的。
测试中
我用茉莉花进行测试。 单元测试用TypeScript编写，然后转译回JavaScript。 这种方法的问题在于，当测试失败时，输出将指向JavaScript代码堆栈，而不是TypeScript。 如果Jasmine能够以某种方式与Source Maps集成在一起，那么您可以使用TypeScript代码进行连接失败的测试，那就太好了。
我想使依赖项列表尽可能清晰，因此我仅根据需要使用该项目的框架和库。
构建过程和部署
最终代码被Google Closure编译器所混淆，而CSS被Clean CSS最小化。
应用程序在Firebase托管上运行。
我学到的是
在第一个版本之后，我需要很多时间来完成游戏。 构建关卡，菜单，动画，UX需要花费大量额外时间。
游戏世界非常具体。 我在手机上安装了许多类似的游戏，以将“泡泡对”与那些进行配对。 有太多小的但非常重要的UX细节，我一开始就没有想到。 例如，动画点计数器或显示仅剩几步动作的通知。 我跳过了声音和音乐，这也很重要。 我真正了解到的是，游戏中的用户体验与常规应用程序非常具体且有所不同。
最好的测试者是我4岁的女儿。 甚至我也做了一些数学公式来计算级别的复杂性，她对这个问题的见识是无价的。 我从她那里得到的非常有价值的反馈是，如果玩家放松游戏，我应该显示所有剩余气泡的位置。
PWA的状态
进行PWA并不重要。 您也可以使用Lighthouse审核工具从PWA清单和性能中获取有关丢失的东西的报告。 有一些在线生成器可以帮助您构建清单文件。 Service Workers的实现很容易，但是由于Firebase提供的Varnish缓存标头，我在缓存失效方面遇到了一个问题。 在撰写本文时，IOS上的WebKit（Safari和IOS上的任何其他基于WebKit的浏览器）均不支持Service Workers，因此无法构建具有脱机功能的Web应用程序。
您需要知道，如果您构建的单页应用程序无法针对每次事件或更改完全从服务器重新加载，则无法在PWA应用程序中实施AdSence或AdMob的官方方法。 我想找到一种实现某种货币化的方法，而我使用PayPal做到了。 我实际上需要30分钟来实施。 Chrome上即将推出的Payment Request API可能会改变这件事，但现在情况并非如此。
未来计划
我这样做主要是为了娱乐和家人的欢乐，所以我对未来没有太大的计划。 但是，我有一些想法想尝试：
- WebRTC的多人模式
- Chromecast版本
- 色盲模式
- 声音和音乐
随时在https://bubblepairs.apps.in.rs/上发送反馈并享受泡泡对。
