Screenshots
Overview
概要
百人一首100首・ことわざ・四字熟語を題材にした、和の世界観のタイピングゲームです。最大の特徴は、外部ライブラリに頼らず自前実装したタイピングエンジン。『し』をsiでもshiでも、『ちゃ』をtyaでもchaでも受け付ける複数ローマ字入力に完全対応し、促音『っ』の子音重ねや撥音『ん』の単打条件まで正確に判定します。練習・段位検定・3分腕試し・かるた式(上の句を見て下の句を打つ)の4モードを備え、KPMと正確率から十級〜十段の段位を認定します。
How to use
遊び方・使い方
トップで題材(百人一首/ことわざ/四字熟語)とモードを選んで開始します。練習はペナルティなしの10問、段位検定は20問固定でKPMと正確率から段位を判定、腕試しは3分で何問こなせるかに挑戦、かるた式は百人一首の上の句表示から下の句をかな打鍵します。入力はローマ字の複数表記を自由に使え、ヘボン式のガイドが表示されます。成績ページで段位・ベストWPM・正確率の推移・題材別統計・苦手キーを確認できます。
Tech stack
技術スタック
TypeScriptNext.js 16React 19Web Audio APITailwind CSS v4
追加のランタイム依存はなく、ローマ字入力エンジン(トークナイザ・候補生成・判定器)を自前で実装。状態管理はuseReducer、成績はlocalStorage(スキーマバージョン付き)に段位・モード別ベスト・直近履歴・キー別ミスを保存します。書体はしっぽり明朝とM PLUS Rounded 1cを併用した和の意匠です。
Highlights
工夫した点
- かな列を単位(拗音の2文字結合→促音→撥音→1文字の優先順)に分割するトークナイザと、単位ごとのローマ字候補配列を機械生成するromajiTableを自作。し=si/shi/ci、しゃ=sya/sha/sixya等の直積を展開
- 判定は複数の生存候補を同時に保持するNFA的な前方一致絞り込みで、促音は次の子音を動的に重ね、撥音は後続に応じてnn/n/xnを条件分岐。sinnyou可・konnnitiha不可などの境界ケースまで作り込み
- エンジンはDOM非依存の純TypeScriptでテスト可能に切り出し、効果音は三味線風プラック等をWebAudioで合成(音源ファイル不要)。IME有効時はisComposing検知で注意バナーを表示
To improve
改善したい点
- 苦手キー分析はミス集計ベースで、運指や連接ミスの詳細な可視化に伸びしろがある
- 題材の収録数(ことわざ・四字熟語)をさらに増やしたい
- モバイルのソフトキーボード/IME環境での操作性に課題が残る
What's next
今後の展望
- ランキングや日替わりお題など、繰り返し遊べる要素の追加
- タイピング音・エフェクトのカスタマイズ
- 百人一首の現代語訳表示など学習コンテンツとの連携