概要

• タイトル
  • Typing Lyrics
• 対応楽曲
  • king妃jack躍
  • 生きること
  • 唱明者
  • ネオンライトの海を往く
  • ミュウテイション
  • Entrust via 39

楽曲の歌詞を、そのフレーズが歌唱中にタイピングしきることを目標にするタイピングゲームを作りました。

私たちが歌詞をタイピングすることでパワーを送信し、その力でミクさん達ヒーローが前進できるという世界観で作りました。ミクさんは楽曲のテンポに合わせて走りますが、ミスタイプすると転倒してしまいます。また、最終スコアが一定値(楽曲ごとに異なります)を超えたかどうかで楽曲終了後の演出が変化します。

スクリーンショット

選曲画面

再生する楽曲を選択します。マウスホバーされている楽曲は文字色が変わります。また、右下の設定ボタンから、ローマ字表記の方式(ヘボン式か訓令式か)を選んで設定できます。トロフィーのボタンからは個人成績画面に遷移できます。

個人成績画面

楽曲ごとの自分のハイスコアが表示されます。未プレイの楽曲は-で表示されます。

楽曲再生中

通常時

ミクさんが楽曲のテンポに合わせて走ります。歌詞と共にローマ字のガイドが表示され、タイプ済みの文字は色が変わります。

ミスタイプ時

ミスタイプするとミクさんは転倒してしまいます。

楽曲終了後

ハイスコアを更新した場合は、右上に表示されるスコアの下にHigh Score!の表示が出ます。また、中央右下のボタンをクリックするとSNSで結果をシェアできるテキストがコピーできます。

スコアが一定値を超えた時

スコアが一定値を超えなかった時

歌唱キャラクターの違いによる登場キャラクターの変化

『唱明者』を選曲すると、ミクさんではなくKAITOさんが登場します。

デモ

サイトで実際に試す: https://rozelin-dc.github.io/magicalmirai2023-procon/

ポイント

演出面

• 誰でも楽しめるよう、アクセシビリティへの配慮をしました
  • 使っている文字色は、背景と十分にコントラスト比があるようにしました
• どこかのコンピュータールームからミクさん達にパワーを送信しているという世界観に合わせたデザインを心掛けました
• サビになるとミクさんの後ろにスピード感と盛り上がりを表現する光の演出があらわれます
• 好みに合わせて、ヘボン式・訓令式どちらのローマ字表記法でも遊べます
  • 一度設定を変更するとローカルストレージに保存されるので、次回以降の設定変更の操作が不要になります
• ローカルストレージに楽曲ごとのハイスコアが保存されるため、過去の自分と競うことができます
  • 成功演出を見た後も、過去の自分のスコアを更新する楽しみがあります
• 楽曲ごとの難易度が揃うように、成功演出が見られるスコアの割合を楽曲単位で調節しました
• 右下のボタンから全画面にすることができ、よりゲームに集中することが出来ます

実装面

• 一部関数にユニットテストを導入し、コードの正当性を保証するようにしました
• 読みやすいコードになるよう心がけました
  • 処理の単位ごとに適切にコンポーネントに分割したほか、コメントの充実や変数への切り出しに努めました
  • コミットメッセージも開発の履歴や変更意図が分かりやすいようにしました
• TypeScriptの型情報を有効活用して安全なコードになるようにしました
• エラーハンドリングをしっかり行い、未定義動作をしないように、また、ユーザーがエラーの発生を把握できるようにしました

使用技術

• TextAliveAppAPI
• React(TypeScript)
  • React Icons
  • React Hot Toast
• Sass
• Vite(ビルドツール)
• Vitest(ユニットテストツール)

実行方法

モジュールインストール

node v16, npm v8を想定して開発しています。

npm i

開発用サーバー起動

http://localhost:2323 で起動します。

npm run dev

ビルド

./docsにビルド成果物が配置されます。

npm run build

テスト

ユニットテストが実行されます。

npm run test

ディレクトリ構造

├── docs: ビルド成果物置き場
├── public: favicon置き場
├── screenshots: このMDで示したスクリーンショット置き場
├── src: 実装部分のコード置き場
│   ├── assets: ロゴ・イラスト置き場
│   ├── components: 共通コンポーネントの実装
│   ├── utils: 共通のデータやロジックの実装
│   ├── Game: 選曲後に必要な画面の要素やロジックの実装
│   │   └── GamePlaying: 楽曲再生中に固有な画面の要素やロジックの実装
│   ├── App.tsx: メインの画面の実装
│   ├── IndividualScore.tsx: 個人成績表示画面の実装
│   ├── RightButtons.tsx: 右側のボタン群の実装
│   └── SongSelect.tsx: 楽曲選択画面の実装
└── README.md: このファイル

動作環境

PCでの動作を前提としています。

• Windows
  • Chrome, Firefox, Edge で動作確認しています
• Mac
  • 所持していない為動作確認できていません
  • 万が一正常に動作しない場合はお手数ですがWindows環境での利用をお願いします
  • iPadと外部キーボードを利用した疑似的なMac環境では、Safari, Chrome で動作確認しています