{{ $t('samples.actions.duplicate') }}
{{ $t('samples.actions.demo') }}
記憶のペア合わせ
明快なUI、タイマー、得点を備えた定番の記憶ペア合わせゲーム。
{{ $t('samples.actions.prompt') }}
サイトの目的:明快なUI、タイマー、得点を備えた、楽しい定番の記憶ペア合わせゲームを作成します。操作は直感的でレスポンシブにします。
対象:カジュアルプレイヤー、子ども、楽しく脳のトレーニングをしたい人。
主な機能と構成
- 盤面:4×4、5×4、6×6などの裏向きカードを並べ、同じ絵のペアをランダムに配置します。
- カード操作:クリックで絵を表示します。同じ絵の二枚は表向きのままにし、不一致なら1~1.5秒などの短い待ち時間後に裏返します。
- 情報パネル:固定ヘッダーまたはサイドバーにゲームの指標を表示します。
- タイマー:最初のカードをめくると開始し、全ペアを見つけると停止します。MM:SS形式で表示します。
- 手数:カードをめくった回数、または二枚をめくる操作の回数を数えます。
- 得点・星:手数や時間に基づき、優秀は3つ星、良好は2つ星、普通は1つ星などの評価を付けます。
- 状態表示:「カードをクリック」「一致しません。もう一度」などのメッセージを表示します。
- クリア画面:最終時間と手数、「おめでとう!X手、Y秒でクリア!」などをモーダルで表示します。「もう一度遊ぶ」でリセットして新しいゲームを始めます。
初期カード
動物、果物、絵文字などの既定の画像を使います。グリッドに合わせてカード数を変え、毎回ランダムにシャッフルします。
動作要件
スマートフォンとデスクトップに対応する、整った遊びやすいグリッドにしてください。不一致の二枚を表示している間は、他のカードを押せないようにします。JavaScriptで表示中・一致済みのカード、手数、時間を管理します。
デザイン
明るく楽しい、親しみやすいフラットまたはミニマルなUIにします。鮮やかな配色と、読みやすい丸みのあるサンセリフ字体を使います。CSS transformなどで滑らかにカードをめくり、一致したときに控えめな発光や拡縮を加えます。
{{ $t('samples.actions.copied') }}