五十音小游戏前端知识点有哪些总结？

本文共计3588个文字，预计阅读时间需要15分钟。

背景：在日语学习初期阶段，我发现自己对日语五十音的记忆并不容易，片假名的记忆尤其困难，让人感到头疼。

想法：如果有一个应用可以让我在碎片化时间学习，比如在午休或地铁上随时练习五十音，那该多好。

背景

在日语学习初期阶段，我发现日语五十音的记忆并不是很容易的，片假名的记忆尤其令人费神。这时我想如果有一个应用可以充分利用碎片时间，在午休或地铁上随时可以练习五十音该多好。于是搜索 App Store，确实有很多五十音学习的小软件，但是商店的软件不是含有内购、夹带广告、就是动辄 40M 以上，没找到一个自己满意的应用。于是打算自己写一个，主要介绍自己在开发设计该应用过程中的一些收获。

实现

在线体验地址 dragonir.github.io/kanaApp/

实现效果如下，该应用主要分为三个页面：

• 首页：包括菜单选项（平假名练习、片假名练习、混合练习）、深色模式切换按钮。
• 答题页：包括剩余机会和分数显示区、中间出题区、底部答题按钮。
• 结果页：结果分数显示和返回首页按钮。

答题逻辑规则是从给出的 4 个答案按钮中选出题目展示区的那个单词对应正确的那个选项，应用根据点击给出错对反馈并进行记分，错误 10 次后游戏结束，加载结果页。游戏逻辑实现不是本文的主要内容，因此后面不再赘述。本文后续主要内容是此次小游戏开发流程涉及到的前端知识的介绍。