ウェブサイトの目的:洗練されたユーザーインターフェース、タイマー、スコアカウンターを備えた、クラシックで魅力的な記憶力ゲーム(別名「コンセンテーション」)を作成すること。ゲームは直感的で、レスポンスが良好である必要があります。
対象ユーザー:カジュアルゲーマー、子供、そして楽しい脳トレを探しているすべての人。
主な機能とセクション:
ゲームボード:裏向きのカードが並んだグリッド(例:4×4、5×4、または6×6グリッド)で、シャッフルされたペアが配置されています。
カードの機能:
クリックで裏返し:カードをクリックすると、裏返って画像が表示されます。
マッチングのロジック:裏返された2枚のカードの画像が同じ場合、そのカードは表向きのままになります。
不一致時の動作:裏返された2枚のカードが一致しない場合、短い遅延(例:1~1.5秒)の後、自動的に裏向きに戻ります。
ゲーム情報パネル:主要なゲーム指標を表示する、常に表示されるヘッダーまたはサイドバー。
タイマー:最初のカードが裏返された時点で開始し、すべてのペアが見つかった時点で停止する進行中のタイマー。時間はMM:SS形式で表示します。
移動回数カウンター: プレイヤーが行ったカードのめくり回数(またはペアのめくり回数)を記録するカウンター。
スコア/星評価:手数または時間に基づく評価システム。例:星評価システム(例:優秀:3つ星、良好:2つ星、普通:1つ星)。
ゲームステータスおよび終了画面:
ゲームのステータスを表示するメッセージ領域(例:「カードをクリックしてください」、 「一致しません!もう一度試してください。」)。
ゲームに勝利した際に表示されるモーダルポップアップ。このモーダルには、最終タイム、総手数、および勝利メッセージ(例:「おめでとうございます!X手とY秒で勝利しました!」)を表示する必要があります。
モーダル内の「もう一度プレイ」ボタン。ゲームをリセットして新しいラウンドを開始します。
初期カードセット:
カードにはデフォルトの画像セット(例:動物、果物、絵文字のアイコンなど)を使用する。カードの枚数はグリッドサイズに応じて動的に変更されるものとする。
各ゲームの開始時に、カードはランダムにシャッフルされるものとする。
機能要件:
レスポンシブグリッド:カードグリッドはさまざまな画面サイズに適応し、モバイルおよびデスクトップ上で整理されたプレイ可能なレイアウトを維持する。
余計なクリックの防止:2枚のカードが裏返され表示されている間(元に戻る前)、ユーザーが他のカードをクリックできないようにします。
明確な状態管理:JavaScriptを使用して、どのカードが裏返されたか、マッチしたか、現在の手数や残り時間など、ゲームの状態を管理します。
デザインスタイル:
美学:明るく、遊び心があり、ユーザーフレンドリーであること。カードやUIにはフラットデザインまたはミニマルデザインを採用します。
カラーパレット:鮮やかで親しみやすい配色。
タイポグラフィ:テキストやカウンターには、明瞭で丸みを帯びたサンセリフフォントを使用する。
アニメーション:スムーズなカードのめくりアニメーション(例:CSS transformを使用)。ペアが一致した際の控えめなアニメーション(例:光りやわずかな拡大縮小)。