記憶力トレーニングゲームの作り方【デモあり】｜JavaScript・難易度調整・ハイスコア機能の実装手順

「JavaScriptでゲームを作ってみたい」「ポートフォリオに動くゲームを追加したい」「難易度調整・ハイスコア保存・アニメーションの実装方法を知りたい」——そんな方に向けた記事です。本記事では、数字を見て覚えて入力する記憶力トレーニングゲームの開発手順を、実際に遊べるデモを交えながら解説します。Vanilla JavaScript（フレームワーク不要）で実装でき、GitHub Pagesで無料公開できます。ゲーム開発を通じてJavaScriptのタイマー制御・DOM操作・localStorage・アニメーションを実践的に学べます。

このゲームで学べること

記憶力ゲームはシンプルに見えて、JavaScriptの重要な概念が凝縮されています。setTimeoutによるタイマー制御、DOM操作（表示・非表示の切り替え）、ゲーム状態管理（レベル・スコア・桁数）、localStorageによるデータ永続化、CSSアニメーションとJavaScriptの連携——これらをすべて1つのプロジェクトで実践できます。フレームワーク不要で完成するため、JavaScript入門から中級への橋渡しに最適なプロジェクトです。

実際に遊んでみる（デモ）

以下は実際に動作するデモです。「ゲームスタート」を押すと数字が表示されます。数字を記憶して、消えたら入力欄に入力して「回答する」ボタンを押してください。正解するたびにレベルが上がり、桁数と難易度が増していきます。

開発手順（10ステップ）

STEP 1：企画とゲームデザイン

コアループを「見る→記憶→入力→判定」の4ステップで設計します。難易度曲線は「3問ごとに桁数+1、5問ごとに表示時間を0.5秒短縮」がバランスよく機能します。ターゲットはスマホでサクッと遊べる1プレイ3〜5分を想定します。スコアはレベル×10点とすることで、高レベルほど得点が高くなり達成感が生まれます。最初から完璧を目指さず、コアループだけで動くMVPを先に作ってテストプレイすることが成功の鍵です。

STEP 2：技術選定とセットアップ

記憶力ゲームはVanilla JavaScript（フレームワーク不要）で十分実装できます。バックエンドも不要でスコアはlocalStorageに保存します。デプロイはGitHub PagesまたはNetlifyで無料公開できます。HTML・CSS・JavaScriptを1ファイルにまとめた構成が最もシンプルで、WordPressのカスタムHTMLブロックにそのまま貼り付けて使えます。Reactを使う場合はuseStateでゲーム状態（level・score・digits・displayTime）を管理する設計にします。

STEP 3：コア機能の実装

ゲームの心臓部は3つの関数です。まずランダムな数字を生成する関数（指定桁数分ループして0〜9の数字を文字列に連結）、次に数字を表示して指定時間後に隠す関数（setTimeoutを使用）、最後にユーザー入力と正解を比較する判定関数です。setTimeoutのIDは変数に保存しておき、ゲームリセット時にclearTimeoutで確実にキャンセルします。Enterキーで回答できるようkeypressイベントリスナーも追加します。

STEP 4：難易度調整システム

レベルアップ時に桁数と表示時間を変化させます。3レベルごとに桁数+1、5レベルごとに表示時間を500ms短縮（最低1,000msを下限に）するのが適切なバランスです。具体的な難易度パターンはレベル1〜3が3桁3秒、レベル4〜6が4桁3秒、レベル7〜9が5桁2.5秒、レベル10〜12が6桁2秒です。テストプレイして「ちょうど難しい」と感じるパラメータに調整します。Hard/Normal/Easyの難易度選択モードを追加するとリプレイ性が上がります。

STEP 5：スコアとハイスコアの保存

localStorage.setItem('highScore', score)でブラウザにスコアを保存します。ゲーム終了時に現在のスコアとlocalStorageのハイスコアを比較し、新記録なら上書き保存して「新記録！」の演出を表示します。スコア履歴は配列でJSON形式で保存し、最新10件を保持することで過去の記録を一覧表示できます。JSON.parse()とJSON.stringify()を使ってオブジェクトの読み書きを行います。

STEP 6：UIとアニメーション

数字の表示にはCSSの@keyframesでフェードイン（opacity 0→1、scale 0.85→1）を実装します。正解時は緑色・不正解時は赤色のフィードバックテキストを表示し、正解時にはscaleアニメーションを加えると達成感が生まれます。数字が消える前にカウントダウン（3…2…1…）を表示すると準備しやすくなります。プログレスバーで表示時間の残りを可視化することも効果的です。Web Audio APIで正解音・不正解音を追加するとゲーム感がさらにアップします。

STEP 7：モバイル対応

スマホでプレイできることが必須です。入力フィールドにtype="tel" inputmode="numeric" pattern="[0-9]*"を設定することでiOS・Androidともに数字キーボードを自動表示できます。CSSではclamp()を使ってフォントサイズを画面幅に応じて自動調整します。ボタンのタッチエリアはAppleのガイドライン（最低48px×48px）を守ります。横向き（landscape）表示にも対応したレイアウト調整も追加します。

STEP 8：発展機能の追加

基本機能が完成したらゲームモードを追加します。エンドレスモード（ミス3回まで継続）、タイムアタックモード（60秒で何問解けるか）、サバイバルモード（表示時間が徐々に短くなる）などです。シェア機能はwindow.open('https://twitter.com/intent/tweet?text=...')でTwitterへのシェアが実装できます。統計機能（正答率・平均スコア・プレイ回数）もlocalStorageで記録できます。

STEP 9：パフォーマンス最適化

setTimeoutのIDは必ず変数に保存し、ゲームリセット時にclearTimeoutを呼び出します。連続クリックによる多重実行防止のため、判定処理中はisProcessingフラグをtrueにして二重実行をガードします。不要になったイベントリスナーはremoveEventListenerで削除してメモリリークを防ぎます。Chrome DevToolsのPerformanceタブで処理の重い部分を特定して最適化します。

STEP 10：公開とフィードバック収集

GitHubにリポジトリを作成し、Settings → Pages → Source を「main」に設定すると数分でhttps://yourname.github.io/memory-game/に公開されます。Netlifyはフォルダをドラッグ＆ドロップするだけでデプロイでき、カスタムドメインも設定できます。SNSでの告知後にGoogle Analyticsで離脱率を分析し、フィードバックをもとに改善します。PWA化（manifest.jsonとService Worker）でオフライン動作とホーム画面への追加もできます。

難易度バランスの目安

よくある質問

ReactとVanilla JSどちらで実装すべきですか？

このゲーム規模ならVanilla JSで十分です。Reactを使うメリットは状態管理がuseStateで整理しやすくなる点ですが、ゲームループとタイマー制御はuseEffectとuseRefを組み合わせる必要があり、Vanilla JSより複雑になります。「Reactの練習として作る」場合はReactを、「シンプルにサクッと作る」場合はVanilla JSを選んでください。

WordPressのサイトに埋め込めますか？

できます。HTML・CSS・JavaScriptを1つのdivにまとめてカスタムHTMLブロックに貼り付けるだけで動作します。ただし他のプラグインやテーマのCSSと競合する可能性があるため、クラス名にユニークなプレフィックス（このデモのmemory-など）を付けておくと安全です。

全ユーザー共通のランキングを作るにはどうすればいいですか？

バックエンドが必要になります。Node.js + ExpressでスコアをPostgreSQLに保存するAPIを実装し、ランキング一覧取得APIを作ります。簡易版ならFirebaseのFirestoreを使えばバックエンド実装なしでリアルタイムのランキングが作れます。Firebaseは小規模なら無料枠内で運用できます。

まとめ

記憶力トレーニングゲームはVanilla JavaScriptのみで実装でき、setTimeout・localStorage・CSSアニメーション・DOM操作というJavaScriptの基礎技術を実践的に学べます。GitHub Pagesで無料公開でき、ポートフォリオとしても優秀な題材です。デモで確認した通り、3桁からスタートして桁数と表示時間を段階的に変化させるだけで十分に楽しいゲームになります。さらにゲームモード追加・SNSシェア・PWA化と段階的に機能を拡張できます。

開発のご相談や見積もりはお気軽にお問い合わせください。要件定義からリリースまで一貫してサポートします。