Vue.jsでウマ娘タイピングを作ってみた

2021-07-02

概要

今時のゲームで熱いといえば「ウマ娘プリティーダービー」ですね。
ゲームもさることながら、アニメの方も素晴らしく、特にモデルの馬の癖や雰囲気を如実に表しています。

さて、ウマ娘にはまっている筆者ですが、悲しいことに全てのウマ娘の名前を覚えていないんですね。
どうせ覚えるなら楽しく覚えたいじゃないですか。

なのでタイピングゲームを作成しました。
今日はこのゲームの紹介です。

プレイ動画

以下のような見た目になりました。

ローマ字を打鍵していくだけですが、間違えた時に音がなり間違えた文字が赤くなります。
制限時間制ではなく、すべてタイプし終えた時のタイムやタイピング数、正打率などを算出するようにしています。

リポジトリとゲームURL

以下にリポジトリがありますので、ご自由に参考にしていただけると幸いです。
https://github.com/k-logic24/umamusume-typing

以下からゲームを楽しめます。
https://k-logic24.github.io/umamusume-typing/

こだわった点

コード面と創作意欲の2つの面で話していきますね。

コード面

Vue3ということで、composition-apiを利用して簡単にロジックを作成することができました。

しかし、描き終わった後に「これ、中身が複雑になりかかってる」と気づきました。
例えば簡単なカウントアプリであれば、setup関数の中に直接ロジックを書いていっても問題ないでしょう。書く内容も知れていますし、理解もしやすいはずです。
ですが今回はタイピングの処理内容が膨れてしまい、若干複雑になってしまいました。

解決策として、ビューとロジックを切り離すように努めました。Providerパターンを使用しています。
providerについては以下の公式の記事が参考になります。やはり、公式です。
https://v3.ja.vuejs.org/guide/component-provide-inject.html

実は最初、状態管理としてVuexを使用してタイピングの状態管理をしていたのですが、どうもオーバースペックな感じが否めませんでした。
そこでVueのprivide機能を知り、コンポーネント間の状態共有ができることを確認できました。なるべくロジックは別ファイルに書き出し、あとはコンポーネント側で呼び出して使用するのみといった流れを意識しました。

制作意欲

なぜここまで制作しようとおもったのかですが、実は最初はノリから入りました。
「楽しみながらタイピングできないかなぁ」と。

そこで浮かんできたのがウマ娘だったわけです。
あの名馬たちを、擬人化したかわいいキャラクターを見つつタイピングして覚えられたら一石二鳥だな と思い、制作に至りました。

制作途中から楽しくなってきて、「どうやったらタイピングしていると感じるか」「ミスタイピングは音を追加したり文字を赤くしてみたらどうか」などユーザー目線から考えるようになってきたのは自分でも驚いています。
時には友人にプレイしてもらい率直な感想を聞き、機能追加として考えました。

まぁ、こんなたいそうなこと言ってますけれど、ただのタイピングゲームです。

感想

何事も楽しく制作できるようになれるといいですね。

「これくらい誰でも作成できるから作る意味ない」なんて思わないで一度本気で取り組んでみてはいかがでしょうか。
これは持論ですが、こういったなんてことないプロダクトにヒントが隠されてあったりすると思っています。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店