本文へ移動
仕事実践ラボ
, ,

Codexで専門用語タイピングゲームを分割実装|4ファイル708行を追加

Codexで専門用語タイピングゲームを分割実装|4ファイル708行を追加の内容を表すアイキャッチ画像

60秒で遊べるタイピングゲームを作る際、画面・見た目・処理・単語データを一つのファイルへ詰め込まないと決めました。語数や判定方法を後から直すたびに全体へ影響するためです。Codexには4ファイルへ役割を分けて実装してもらいました。

初回は708行と46語のデータが追加されました。ただし、当時はブラウザー実機確認前であり、ファイルができたことだけを完成とは扱っていません。

60秒で一周できるゲーム条件を決めた

基本は1プレイ60秒、1問につき1語、ローマ字で入力し、正しい文字だけ次へ進む形式です。画面は開始、プレイ、結果の3つに絞りました。

結果には正打数、ミス数、WPM、スコア、ランクを表示します。ランキングやログインは入れず、一人で繰り返し遊べる範囲を初回の完成条件にしました。

一つに書かず4ファイルへ役割を分けた

4ファイルの役割

  • HTML:開始・プレイ・結果の画面
  • CSS:見た目とスマートフォン表示
  • JavaScript:入力判定・時間・スコア・状態管理
  • 単語データ:表示名・読み・ローマ字・難度・分類

状態は一つのオブジェクトへまとめ、残り時間、現在の語、入力位置、正打、ミス、スコアを管理する構成です。語を増やす作業と判定ロジックの修正を分けられるようにしました。

46語から増やせる器を作り708行を追加した

初期案は30〜50語でしたが、短い語が多く、何度か遊ぶと同じ内容が目立つと感じました。機能は小さく保ちながら、候補を150語程度まで増やせるデータ構造へ変更しました。

Codexの報告では4ファイルに合計708行を追加し、初期データは46語でした。150語を入れ終えたのではなく、追加しやすい器ができた段階です。

同じ音の複数入力は初回からすべて受け付けず、1語につき一つの正解表記にしました。実際の利用者が困る場面を確認してから追加する方針です。

コード生成とブラウザー確認を分けた

Codexはブラウザーの実機確認をしていないと報告しました。そのため、開始、入力、終了、再試行の基本が安定する前に、語数追加やランキングへ進まない判断をしました。

次の検収では、タイマーの二重起動、リトライ時の初期化、外部データ読込、入力判定、時間切れ直前、IME、スマートフォン表示を分けて確認します。

公開候補にする前の動作確認

  1. 開始から結果まで60秒の一周を完走する
  2. 続けて再試行し、前回の状態が残らないか見る
  3. 正しいキーと誤入力、時間切れ直前を分けて試す
  4. IMEとスマートフォン表示を確認してから語数を増やす
前の記事
次の記事