我用Angular制作了一个只需点击相同表情符号的烂游戏

2 年 ago

文, 翔

1 minute

这篇文章是 Angular Advent Calendar 2018 第9天的文章。
虽然可能会有人想要在 “糞アプリ Advent Calendar” 上评论一番，在这里我想写关于 Angular 相关的内容。

我做的东西

由于已经在Firebase Hosting上部署了，您可以从“ same-emoji ”进行游戏。
（建议在PC浏览器上玩游戏时将视口设置为SP尺寸…）

这是一个简单的游戏（烂游戏），通过点击以随机方式出现并持续消除的一对表情符号来竞速时间。
屏幕设计也非常简洁，由以下的画面构成。

ゲーム結果画面

仓库
https://github.com/daikiojm/same-emoji

参加Angular MokuMoku Night这个活动时，我突然想到“对啊！来制作一个烂游戏吧”的冲动。这个活动由日本Angular用户组主办，我只参加了第一次的活动，但现在还定期地举办着。除了可以专注地进行开发之外，还有机会直接向参与作为导师的人提问，我认为这是一个非常有意义的活动。

辛苦了，今天我做了一款如此糟糕的游戏。我会很快发布一份报告。 #AngularMokuMoku pic.twitter.com/pXjkQxZCgP— Daiki (@daikiojm) 2018年7月9日

另外，在開頭提到的 Vue.js 搞笑應用程式 Advent Calendar 文章中，有一個很有趣的應用程式被介紹，這款應用程式只需點擊表情符號就可玩的爛遊戲。因為覺得很有趣，所以我想在這個時機也介紹一下我自己製作的類似「emoji」的爛應用程式，所以寫下了這篇文章。

尽管没有做过什么特别困难的事情，但由于有一些初次尝试，我会附上参考链接一同介绍。

現時点での最新版で開発

Firebase Hosting

Firebase CLI(firebase-tools)を使ってデプロイのセットアップ

Angular CLI是一个非常有效的工具，通过选择几个选项，可以快速创建应用程序的模板，因此在将这些即兴想法变成现实时非常有帮助。它是开发Angular烂游戏所必不可少的工具。同样，它也可以通过Angular CLI轻松设置，并实现用户友好的烂游戏UI，因此在开发Angular烂游戏时不可或缺。

我只是想完整地尝试一下。我使用Angular官方的i18n功能来创建资源文件，并通过游戏主页的基础路径切换来实现日语/英语的切换。资源文件的创建可以通过Angular CLI提供的以下命令来完成。

$ ng xi18n --i18n-format=xlf --out-file locale/messages.ja.xlf

通过开发糟糕的应用程序，我们能够对Angular的i18n获得以下见解。

ngx-translateを使うときのTips

为了增加游戏的感觉，在页面跳转时加入了动画效果。通过在路由器中设置元数据，可以对不同类型的页面进行动画控制。

请参阅

Angular — Supercharge your Router transitions using animations

我略微地部分地用jest写了一些测试，只是大致地。当我开始制作这个应用时，它被传得很快，所以我也想在Angular中试试。

对于设置，我认为如果按照 jest-preset-angular 的指示进行设置就不会出错。
考虑到与 Angular CLI 的设置兼容性，最好保持 karma/jasmine 的配置不做太多修改。未来，我希望能够彻底割断与 karma/jasmine 的依赖关系。

请参考

以下文章对Angular各种组件（路由器、服务、守卫、管道、组件）的测试方法进行了详细介绍，可以作为参考：

Overview • Unit Testing • Angular 5

我已经学到了一个教训，即即使是一开始的创意再好，如果不能持续不断地进行开发，最终也会失败。我打算将这个教训应用于今后的糟糕应用程序开发中…。

当需要验证功能是否适用于实际案例，并且需要验证Angular的新版本更新时，我觉得手头有一个自己构建并定期维护的项目比新建一个项目更加有用，我对这一点感到满意。

诚挚希望大家也能尝试着制作一个很棒的应用程序来学习Angular啊。
我希望明年能够在传达有益信息的同时，专注于开发优秀的应用程序。

明天是 @tatsuya-takahashi 先生。