4.5 神経衰弱ゲームを作る

# 神経衰弱ゲーム

# 目標
プレイヤーは、裏向きに並べられた52枚のトランプから2枚ずつカードをめくり、同じランクのペアを見つける。記憶を頼りに、できるだけ少ない手数と短い経過時間ですべてのカードを揃える。

# プログラム・ファイル名
memoryGame.html

# プロジェクト・フォルダ作成
- プログラム・ファイル名の拡張子を除いた主ファイル名と同じ名前のサブフォルダ「memoryGame」を作成し、以降の作業はサブフォルダで行う。
- すでにサブフォルダがあれば、そのサブフォルダに移動して以降の作業を進める。
- ユーザーが作成した既存ファイルや変更内容を、許可なく削除または上書きしない。
- サブフォルダを作成したらユーザーに知らせる。ユーザーは、トランプの画像データをサブフォルダ下の image フォルダに配置する。配置できたら作業を再開する。

# ゲーム・ルール
## 基本条件
- プレイヤーは1人とする。
- ジョーカーを除くトランプ52枚を使用する。
- カードは4スート（スペード、ハート、ダイヤ、クラブ）×13ランク（A、2〜10、J、Q、K）で構成する。
- スートが異なってもランクが同じであればペア成立とする。
- 例として、ハートの7とスペードの7はペアとして扱う。
- 同一ランクは4枚あるため、各ランクにつき2組、全体で26組のペアが成立する。
- 対戦相手、得点、制限時間、ライフ、ヒント、特殊カード、アイテムは設けない。

## ゲーム開始
- ゲーム開始画面には、過去の成績を表示する。成績が31件以上ある場合でも、利用者の操作で全件を閲覧できるようにする。
- 「ゲーム開始」ボタンを押すと52枚をランダムにシャッフルする。
- シャッフルしたカードをすべて裏向きで盤面に配置する。
- 毎回のゲーム開始時および再プレイ時に、カードの配置を再シャッフルする。
- 最初のカードを選択した時点で経過時間の計測を開始する。

## カード選択とペア判定
1）プレイヤーが未成立の裏向きカードを1枚選ぶと、そのカードを表向きにする。
2）続けて別の未成立の裏向きカードを1枚選び、表向きにする。
3）2枚目を表向きにした時点で手数を1増やし、2枚のランクを比較する。
4）ランクが同じ場合はペア成立とし、2枚を表向きのまま固定して選択不能にする。
5）ランクが異なる場合は、プレイヤーがカードを確認できるよう約1秒間表示した後、2枚とも裏向きへ戻す。
6）判定と表示処理が完了した後、次のカードを選択できるようにする。

## 入力制御
- 同じカードを2回選択できないようにする。
- すでに表向きのカード、ペア成立済みのカードは選択できないようにする。
- 一度に表向きにできる未成立カードは2枚までとする。
- 2枚目を開いてからペア判定が完了するまで、ほかのカードへの入力を受け付けない。
- カードを素早く連続クリックまたは連続タップしても、3枚以上が同時に表向きにならないようにする。
- ゲーム開始前、ゲーム終了後、一時停止中はカードを選択できないようにする。

## クリア条件
- 26組すべてのペアが成立した時点でゲームクリアとする。
- 最後のペアが成立した時点で経過時間の計測を停止する。
- ゲームオーバー条件および制限時間は設けない。
- プレイヤーが中断しない限り、クリアするまでゲームを続けられるようにする。

# 手数と経過時間
## 手数
- 2枚目のカードを開くたびに1手として数える。
- ペアの成立、不成立にかかわらず手数を1増やす。
- 1枚だけ開いた状態では手数を増やさない。
- 現在の手数をゲーム中、常に画面へ表示する。

## 経過時間
- 制限時間は設けず、ゲーム開始後の経過時間を記録する。
- 最初のカードを選択するまでは「00:00」と表示する。
- 最初のカードを選択した時点から計測を開始する。
- 「分:秒」の形式で表示し、1時間以上の場合は「時:分:秒」の形式にする。
- 一時停止中は経過時間を増やさない。
- ブラウザの処理間隔に依存して時間がずれないよう、開始日時と一時停止時間を基準に算出する。
- ゲームクリア時の経過時間を成績として保存する。

# カード画像
- ユーザーが用意したジョーカーを除く52枚のカード画像を使用する。
- 実装前に画像ファイルの保存場所、ファイル名、拡張子、各画像とスート・ランクの対応を確認する。
- 対応関係をファイル名から安全に判定できない場合は推測せず、ユーザーに確認する。
- 画像ファイル自体は、ユーザーの許可なく加工、改名、移動、削除、上書きしない。
- カード画像の縦横比を維持し、カード枠内に全体が収まるように表示する。
- 52枚すべてに、プログラム内部で一意のID、スート、ランク、画像パスを割り当てる。
- 裏面はCSSで独自に描画するか、ユーザーが裏面画像を用意している場合はその画像を使用する。
- 表面画像が読み込めない場合は、代替表示としてスートとランクを文字で表示し、エラー内容を画面へ通知する。
- 画像はプロジェクトフォルダ内の相対パスで参照し、インターネット上の画像へアクセスしない。
- 配布時に必要なカード画像を漏れなく同梱する。

# 操作方法
## マウス
- 裏向きカードをクリック：カードを表向きにする。
- 「一時停止」ボタン：ゲームを一時停止または再開する。
- 「最初から」ボタン：確認後、現在のゲームを破棄して新しい配置で開始する。

## キーボード
- Tabキー：カードまたは操作ボタンへフォーカスを移動する。
- EnterキーまたはSpaceキー：フォーカス中のカードまたはボタンを選択する。
- EscキーまたはPキー：一時停止／再開する。
- キーボードだけでもすべてのカードを選択し、ゲームを完了できるようにする。
- キーボード操作時は、フォーカス中のカードが明確に分かる表示を行う。

## 画面タッチ
- 裏向きカードをタップ：カードを表向きにする。
- タップ可能領域を十分な大きさにし、隣のカードを誤って選びにくくする。
- タッチ操作中にブラウザ画面が意図せず拡大、選択、スクロールしないよう、必要な範囲だけ適切に制御する。

# 一時停止とリスタート
- ゲーム中に「一時停止」ボタンを表示する。
- 一時停止中はカード盤面を隠し、カードの位置を見続けられないようにする。
- 一時停止中は経過時間を増やさず、カード選択を受け付けない。
- 再開すると、一時停止前のカード状態から継続する。
- 「最初から」ボタンを押した場合は、現在のゲームを破棄するか確認する。
- リスタート時はカードを再シャッフルし、手数、経過時間、成立ペア数を初期化する。
- リスタートによって中断したゲームはクリア成績として保存しない。
- リスタート時は、裏返し待ちのタイマーおよび経過時間のタイマーを必ず取り消してから開始する。

# 画面構成要素
## ゲーム盤
- 52枚のカードを画面中央へ規則的に並べる。
- PCの標準配置は4行×13列を基本とする。
- 画面幅900ピクセル以下では8列、560ピクセル以下では6列に切り替える。
- カード同士が重ならず、表面の内容を識別できる大きさを確保する。
- 画面の縦横比やカード枚数によって1画面に収まらない場合は、安全に縦スクロールできるようにする。

## カード表示
- 裏向き、選択されて表向き、ペア成立済みの3状態を視覚的に区別する。
- カードをめくる際は短い反転アニメーションを表示する。
- ペア成立時は枠色や軽い強調表示で成功を伝える。
- ペア不成立時は、2枚を約1秒表示してから裏向きへ戻す。
- アニメーションを無効にするOS設定がある場合は、その設定を尊重する。

## ステータス表示
- 成立ペア数を「0 / 26」の形式で表示する。
- 現在の手数を表示する。
- 現在の経過時間を表示する。
- 一時停止中であることを明確に表示する。
- 画面をスクロールしてもステータス表示が見えるようにする。

# 画面構成
- 画面上部：タイトル、バージョン、著作権者、ライセンス。
- 画面上部または盤面上：成立ペア数、手数、経過時間。
- 画面中央：52枚のカードを配置したゲーム盤。
- 盤面周辺：「一時停止」「最初から」ボタン。
- 画面下部：マウス、キーボード、タッチの操作方法。
- ゲーム開始前に、ゲームの目的、ペア成立条件、手数の数え方を表示する。
- ゲーム開始前に「ゲーム開始」ボタンを表示する。
- ゲームクリア画面には、今回の手数、経過時間を表示する。
- ゲームクリア画面には「もう一度遊ぶ」「終了する」ボタンを表示する。
- 「終了する」ボタンでは、安全にゲームを停止して開始画面へ戻る。
- ブラウザのウィンドウやタブをプログラムから強制的に閉じない。
- PCとスマートフォンの両方で利用できるレスポンシブ構成にする。

# アクセシビリティ
- カードおよび操作部分は、キーボードで到達および操作できる要素として実装する。
- カードには読み上げ用の説明を付け、裏向きのときは内容が分からない文言、表向きのときはスートとランクが分かる文言にする。
- ペア成立、不成立、エラーなどの状況変化を、読み上げ環境へ通知する領域に表示する。
- 装飾目的の要素は読み上げ対象から除外する。
- キーボード操作時のフォーカス位置を、明確な枠線などで表示する。

# データの記録
- ゲームクリア時の成績をブラウザのlocalStorageへ保存する。
- 成績には年月日時分、手数、経過時間を含める。
- 保存および表示する成績は直近30回分とする。
- 31回目以降は最も古い記録から削除する。
- 最少手数と最短時間を確認できるようにする。
- 手数と時間のどちらを優先するかは決めず、それぞれを独立したベスト記録として表示する。
- 保存先の名前には形式の版番号を付ける。
- 読み込んだ内容が想定した形式でない場合は、破棄して初期状態として扱う。
- localStorageを利用できない場合でもゲーム本体は続行できるようにし、保存できない理由を画面へ表示する。
- 外部サーバーへ成績を送信しない。
- 個人情報を記録しない。

# エラー処理
- JavaScript実行中にシステムエラーが発生した場合は、タイマーとアニメーションを停止し、ゲームを安全に終了する。
- 未処理のエラー（error）および未処理の非同期エラー（unhandledrejection）の両方を受け取る。
- エラー内容をプレイヤーが確認できる形で画面に表示する。
- 無効な入力やゲーム状態に合わない入力は受け付けない。
- 同じタイマーや判定処理が重複して実行されないようにする。
- カード画像の重複、欠落、スート・ランクの不正をゲーム開始前に検証する。
- 52枚すべてのカードIDが一意であることを検証する。
- 各ランクが4枚ずつ存在することを検証する。
- 検証に失敗した場合は「ゲーム開始」ボタンを押せない状態にし、理由を画面へ表示する。
- localStorageの読み書きで例外が発生しても、安全にゲームを継続する。

# テスト観点・合格条件
- HTMLファイルをブラウザで直接開き、サーバーなしで動作すること。
- ジョーカーを除く52枚のカードが重複や欠落なく表示されること。
- 4スート×13ランクが正しく画像へ対応していること。
- ゲーム開始ごとにカードがシャッフルされること。
- 同じランクでスートの異なる2枚を選ぶとペアが成立すること。
- 異なるランクの2枚を選ぶと約1秒後に裏向きへ戻ること。
- 同じカードを2回選べないこと。
- ペア成立済みのカードを再選択できないこと。
- 判定中の連続入力でも3枚以上が表向きにならないこと。
- 2枚目を開くたびに、成立、不成立を問わず手数が1増えること。
- 1枚だけ開いた状態では手数が増えないこと。
- 最初のカードを開くまで経過時間が進まないこと。
- 一時停止中に時間が進まず、盤面が隠されること。
- 判定待ちの状態で「最初から」を押しても、古いタイマーによる誤作動が起きないこと。
- 26組すべてが成立するとゲームクリアになること。
- ゲームクリア時にタイマーが停止すること。
- 「もう一度遊ぶ」で盤面、手数、経過時間、成立ペア数が初期化されること。
- 成績がlocalStorageへ保存され、直近30回分だけ表示されること。
- マウス、キーボード、画面タッチで操作できること。
- キーボードだけで26組すべてを揃えられること。
- PCとスマートフォン相当の画面幅でカードや操作部分が重ならないこと。
- カード画像を読み込めない場合に代替表示とエラー通知が行われること。
- JavaScriptの構文エラーや未処理の例外がないこと。
- インターネット通信が発生しないこと。
- Codexが可能な範囲でテスト用の内部状態またはデバッグ機能を利用し、通常のペア成立、不成立、連続入力、一時停止、ゲームクリアを含むプレイテストを行うこと。
- テスト用のデバッグ機能は配布版では無効化または削除すること。
- 実際に確認できなかった項目を「合格」と推測して報告しないこと。
- テスト結果を、実施内容、期待結果、実際の結果、合否が分かる形式で報告すること。

# 前提条件
- タイトルは「神経衰弱ゲーム」とする。
- バージョン番号、著作権者、MIT Licenseであることを画面に表示する。
- 仕様で分からないことがあり、その違いが実装結果へ大きく影響する場合はユーザーに質問する。
- 安全かつ合理的に判断できる軽微な事項は、判断内容を明記して作業を進める。
- HTML、CSS、JavaScriptを1つのHTMLファイルに記述する。
- カード画像は別ファイルとしてプロジェクトフォルダ内に配置してよい。
- クライアントPCのブラウザで動作し、スマートフォンでも利用できること。
- HTTPサーバーやNode.jsなどのサーバー技術は使用せず、ブラウザの機能だけで完結すること。
- Canvas APIまたはHTML要素を利用してゲーム画面を描画すること。
- 画面へ流し込む文字列は、プログラム内に定義した固定値および内部で計算した数値だけとする。
- コーディングは「Airbnb JavaScript Style Guide」に可能な限り準拠すること。
- プログラムファイルのコメントに、名称、バージョン、目的、動作環境、著作権表示および使用条件、インストール方法、お問い合わせを記載すること。
- ゲーム名、画面デザイン、説明文は独自のものとし、ユーザー提供素材を除き、第三者の画像、音声、コードを無断使用しないこと。

# 制約条件
- インターネットとのデータ送受信は行わないこと。
- CDNを含む外部ライブラリを使用せず、標準のHTML、CSS、JavaScriptだけで実装すること。
- ユーザー提供のカード画像を除き、外部画像、外部フォント、外部音声、アクセス解析、広告、Cookieを使用しないこと。
- プログラムがMIT Licenseおよび第三者の権利に違反していないこと。
- ユーザー提供のカード画像を利用・配布できる権利があることを前提とする。確認できない場合は配布前にユーザーへ確認すること。
- ユーザーの許可なくプロジェクトフォルダ外のファイルを変更しないこと。
- ユーザーの許可なく既存ファイルを削除しないこと。
- Gitの履歴を破壊する操作を行わないこと。

# 合格判定
- すべての実装とテストが完了したら、テスト結果を一覧で表示する。
- 合格項目、不合格項目、未確認項目を明確に区別する。
- 不合格項目がある場合は原因と修正方針を表示する。
- 未確認項目がある場合は未確認の理由とユーザーによる確認方法を表示する。
- テスト結果を表示した後、合格としてよいかユーザーに質問する。
- ユーザーが合格と回答するまでは、Gitへの最終コミットと配布用ZIPファイルの作成を行わない。
- ユーザーが不合格と回答した場合は、指摘内容を修正して再テストする。

# 簡易取扱説明書の作成
1）HTMLファイルと同じ場所に、簡易取扱説明書「README.txt」を作成する。
2）説明書には、各項目を「# 項目名」と表記して次を含める。
- プログラムの名称
- バージョン
- 目的
- ゲーム・ルール
- 動作環境
- 著作権表示および使用条件
- インストール方法
- 使い方
- 操作方法
- 成績の保存
- 既知の制限
- 変更履歴
- お問い合わせ
3）インストール方法には、ZIPファイルを展開し、memoryGame.htmlをブラウザで直接開く手順を記載する。
4）使い方には、ゲーム開始、一時停止、再開、再プレイ、終了の手順を記載する。
5）マウス、キーボード、画面タッチの操作方法を記載する。

# 著作権表示および使用条件
このプログラムは OpenAI社の Codex によって作成し、作者が動作を確認しました。
このプログラムは外部とのデータ通信を行いません。

本アプリケーションはMIT Licenseです。
商用を含む無償利用が可能です。自由に改造できます。
再配布の際は、下記の著作権表記、URLおよび本使用条件を必ず明記してください。

Copyright by (c)studio pahoo
https://www.pahoo.org/

MITライセンスについては、下記のリンク先を参考にしてください。
http://ja.wikipedia.org/wiki/MIT_License
http://www.opensource.org/licenses/mit-license.php

なお、本アプリケーションの利用または改造によって生じた得失については一切関知いたしません。また、二次利用先の組織・企業・団体の目的・内容・活動については一切関知いたしません。

# お問い合わせ
ぱふぅ家のホームページ
https://www.pahoo.org/

- サイト案内
  - お問い合わせ

# プロジェクト・プロンプトの保存
- このプロンプトを、プロジェクトフォルダ内の「PROMPT.md」に保存する。
- 実装中にユーザーと合意して仕様を変更した場合は、PROMPT.mdにも変更内容を反映する。
- PROMPT.mdに記載されたバージョン番号と、プログラムおよびREADME.txtのバージョン番号を一致させる。

# リソース管理
1）作業開始前に、今回の作業が次のどれに該当するかユーザーに質問する。
- 新規作成（評価用）
- 新規作成（配布用）
- メジャーバージョンアップ
- マイナーバージョンアップ
- 不具合修正
2）回答に従い、バージョン番号を次のルールで決定する。
- 新規作成（評価用）：バージョン0.1.0
- 新規作成（配布用）：バージョン1.0.0
- メジャーバージョンアップ：現在のバージョン番号の整数部分を1増やし、小数部分を0にする。
- マイナーバージョンアップ：現在のバージョン番号の小数第1位を1増やし、それより下の桁を0にする。
- 不具合修正：現在のバージョン番号の小数第2位を1増やす。
3）バージョンアップの場合は、既存のバージョン番号をプログラムファイル、README.txt、PROMPT.mdまたはGit履歴から確認する。
4）既存のバージョン番号を確認できない場合は、推測せずユーザーに質問する。
5）決定したバージョン番号を、memoryGame.html、README.txt、PROMPT.md、ゲーム画面、配布用ZIPファイル名のすべてに反映する。
6）ユーザーがテスト結果を合格と判定した後、memoryGame.html、README.txt、PROMPT.md、および必要なカード画像をGitへコミットする。
7）Gitリポジトリが存在しない場合やコミットできない場合は、勝手に新規リポジトリを作成せず、理由をユーザーに報告して指示を求める。
8）コミットメッセージには、プログラム名、バージョン番号、変更区分が分かる内容を使用する。

# 配布ファイルの作成
1）ユーザーがテスト結果を合格と判定した後、次の内容を1つのZIPファイルに圧縮する。
- memoryGame.html
- README.txt
- PROMPT.md
- ゲームで使用するカード画像一式
2）ZIPファイル名は「memoryGame_バージョン番号.zip」とする。
例：
```text
memoryGame_0.1.0.zip
memoryGame_1.0.0.zip
```
3）ZIP内でもHTMLからカード画像を相対パスで正しく参照できる構成を維持する。
4）ZIPファイル内に一時ファイル、テスト用ファイル、Git管理ファイル、デバッグ専用ファイルを含めない。
5）ZIPファイル作成後、52枚の画像を含む内容物とファイル名が正しいことを確認する。
6）完了後、作成したZIPファイルの絶対パスをユーザーに伝える。