概要

卒業研究で作成したタイピングゲーム。
3人でチーム開発を行い、私は主にロジック部分を担当した。
クレジットに本名があるので詳細は秘密。

技術スタック

• フロントエンド： React, TypeScript, Zustand, Radix UI, Lucide, Tailwind CSS, Three.js
• バックエンド： PHP, Slim Framework
• データベース： MySQL
• タイピング処理： typing-jp
• 開発： Docker, DevContainer

アプリ

本アプリは大きく分けて「Time Attack」と「Score Attack」の2つのモードがある。
さらに、4つの難易度「Easy」「Normal」「Hard」「Code」がある。
ユーザーは上位20位に入ると、記録をランキングに登録する事ができる。 また、そのランキングのゴーストと対戦する「VS Ranker」もある。

Time Attackモード

速さ重視のモードで、指定の問題数をいかに早く打ち終えるかを競うモード。
ミス数は記録に影響しないため、ミスを恐れずに打ち進めることができる。

Score Attackモード

正確さ重視のモードで、指定の時間内にどれだけの文字数を打てるかを競うモード。
ミスをしないで打ち続けるとコンボが溜まっていき、スコアの増加量がどんどん増えていく。 ミスをしてしまうとコンボが途切れてしまうため、正確に打つことが重要になる。

VS Rankerモード

ランキングに登録されているゴーストと対戦するモード。
右上にランカーの軌跡が表示されるため、それに負けないように打ち進める必要がある。
技術的には、キーのログをサーバーに記録して、それを再生する機能を実装した。

難易度

難易度によって、問題の内容や文字数が変わる。
難易度Codeはクセのあるモードで、問題の内容がプログラミングに関するものとなっている。
問題には記号が多く含まれているため、非常に高い難易度である。

感想

状態管理というのに始めて触った。コードをロジック・状態管理・UIの3層に分けて実装することで、コードの見通しが良くなり、実装も楽になった。
Three.jsを使って、リッチな3D背景を作成した。 チームメンバーが担当していたため、私はあまりThree.jsに触れなかったが、完成した背景はとても良いものになった。
メンバーが全員優秀だったため、あまり苦労することなく、スムーズに開発を進めることができた。

リンク

個人情報が含まれるため公開はしないが、直接聞いたらもしかしたら教えるかも。