「プログラミングって難しそう…」「ゲームを作ってみたいけど、何から始めればいいかわからない」
——そんなふうに感じていませんか？
安心してください！
今回紹介するのは、HTMLとJavaScriptだけで作れる『記憶力テストゲーム』。
特別なソフトのインストールも、難しい設定も必要ありません。
ファイルを1つ作ってコードをコピペするだけで、あなたのパソコン上で“本当に動くゲーム”が完成します。
このゲームでは、6色のパネルがランダムに点滅します。
その順番を記憶して、同じようにタップ（またはクリック）して再現できたらレベルアップ！
間違えると全パネルが赤く光り、緊張感のある「脳トレ」体験ができます。
しかも、ベストスコアは自動で保存されるので、遊ぶたびに記録更新のワクワクが味わえます。
このゲームは、難しい数式や特別なライブラリを使っていません。
ほんの少しのHTMLとJavaScriptで動くんです。
“作って動かす楽しさ”を、ぜひ体験してみてください！
ほーく
どんなゲームを作るの？（完成イメージ）
今回作るのは、「記憶力テストゲーム」です。
画面には6つのカラフルなパネル（赤・青・緑・黄・紫・オレンジ）が並び、
それらがランダムな順番で光ります。
あなたのミッションは、光った順番を正確に覚えて、同じ順番でクリックまたはタップすること！
見た目はシンプルですが、ステージが進むごとに記憶するパターンが増えていくので、
集中力と記憶力が試される“頭のトレーニングゲーム”です。
ゲームの流れ（ステップ解説）
- ゲーム開始！
「スタート」を押すと、6色のパネルの中からランダムな1つが光ります。
その順番をしっかり覚えましょう。 - 次のラウンドへ
正しく押せたら、今度は前回のパターン＋1色が追加されます。
たとえば「赤 → 青」だったのが、「赤 → 青 → 緑」と少しずつ長くなっていきます。 - 失敗するとゲームオーバー
間違ったパネルを押したり、制限時間（5秒）以内に入力できなかった場合、
すべてのパネルが赤く点滅してゲームオーバーです。 - スコア表示＆ハイスコア更新
成功した回数（＝レベル）がスコアとして表示され、
最高記録（ハイスコア）は自動的に保存されます。
次に遊んだときも記録が残るので、繰り返し挑戦したくなります！
【実際の記憶力テストゲームの動作を試してみたい方はこちらからどうぞ】▼
コピペでOK！記憶力テストゲームのソースコード全文
「記憶力テストゲームを作るのは難しそう…」と思っていませんか？
安心してください。このゲームは たった1つのHTMLファイル にすべてのコードをまとめており、
コピーして保存するだけで、すぐに遊べる完全版です！
手順はたったの3ステップ！
STEP 1： 下のソースコードをすべてコピーします。
STEP 2： パソコンのテキストエディタ（VS Codeやメモ帳など）に貼り付けます。
STEP 3： ファイル名を index.html として保存し、ダブルクリックで開くだけ！
たったこれだけで、ブラウザ上で動く本格的な「記憶力テストゲーム」が完成します。
コードの中身について少しだけ説明
このソースコードは以下の3つの要素で構成されています。
| 役割 | 使用技術 | 内容 |
|---|---|---|
| ページの構造 | HTML | ゲームのパネル・スコア表示・ボタンを配置 |
| デザイン | CSS | パネルの色、光るアニメーション、スマホ対応レイアウト |
| ゲームの動き | JavaScript | パネルの点灯順の制御、ユーザー入力判定、ハイスコア保存 |
この3つが組み合わさることで、ブラウザだけで遊べる記憶力ゲームが完成します。
特別なソフトやサーバーは一切不要です。
では、実際のコードを見てみましょう！
下記のコードをそのままコピーして、あなたのPCで実行してみてください。
「点滅する6色のパネル」と「レベルアップ演出」がすぐに体験できます！
ソースコード全文
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>記憶力テストゲーム (6色・ハイスコア対応)</title> <style> /* --- 1. 全体デザイン & リセット --- */ body { font-family: 'Arial', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90vh; margin: 0; background-color: #1a1a2e; /* 背景を暗くしてパネルを際立たせる */ color: #e0e0e0; padding: 10px; /* スマホで端に寄りすぎないように */ } .container { width: 95%; /* スマホ対応: 幅を画面いっぱいに */ max-width: 500px; /* 最大幅を制限 */ padding: 20px; border-radius: 15px; background-color: #2c2c4b; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); text-align: center; } h1 { color: #8aa9ff; font-size: 1.8em; /* スマホ対応 */ margin-bottom: 20px; } /* --- 2. 情報表示エリア (3分割) --- */ .info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; height: 60px; border: 2px solid #555; border-radius: 8px; background-color: #3b3b64; padding: 0 10px; font-size: 0.9em; /* スマホ対応 */ } #message { font-weight: bold; color: #ffe082; flex-grow: 1; /* 中央のメッセージを広げる */ font-size: 1.1em; } #scoreDisplay, #highScoreDisplay { font-weight: bold; text-align: center; width: 80px; color: #a7ffeb; } /* --- 3. ゲームパネル --- */ .game-panel { display: grid; grid-template-columns: repeat(3, 1fr); /* 3列に配置 */ gap: 10px; /* 隙間を少し狭くしてコンパクトに */ width: 100%; /* max-heightとaspect-ratioでパネルエリアを正方形に近づける */ max-width: 450px; margin: 0 auto 20px; } .panel { width: 100%; padding-bottom: 100%; /* 高さ=幅（正方形にするためのハック） */ height: 0; /* padding-bottomを使うため高さを0にする */ border-radius: 5px; opacity: 0.2; /* 通常時は非常に暗くして明暗差を強調 */ cursor: pointer; transition: opacity 0.2s, box-shadow 0.2s; border: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } /* パネルの色定義（通常時:暗い） */ #red { background-color: #5b0000; } #blue { background-color: #00005b; } #green { background-color: #005b00; } #yellow { background-color: #5b5b00; } #purple { background-color: #5b005b; } #orange { background-color: #5b3600; } /* パネルの色定義（点灯時:非常に明るい） */ .panel.active { opacity: 1.0; /* 点灯時に少し浮き上がるようなエフェクト */ transform: scale(1.05); transition: opacity 0.1s, transform 0.1s; } #red.active { background-color: #ff0000; box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.8); } #blue.active { background-color: #0000ff; box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0.8); } #green.active { background-color: #00ff00; box-shadow: 0 0 30px 5px rgba(0, 255, 0, 0.8); } #yellow.active { background-color: #ffff00; box-shadow: 0 0 30px 5px rgba(255, 255, 0, 0.8); } #purple.active { background-color: #ff00ff; box-shadow: 0 0 30px 5px rgba(255, 0, 255, 0.8); } #orange.active { background-color: #ff8c00; box-shadow: 0 0 30px 5px rgba(255, 140, 0, 0.8); } /* ゲームオーバー時の赤点滅用 */ .panel.game-over { background-color: #ff0000 !important; opacity: 1.0 !important; } /* --- 4. ボタン --- */ #startButton { padding: 12px 25px; font-size: 1.2em; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 25px; transition: background-color 0.2s; } #startButton:hover:not(:disabled) { background-color: #45a049; } </style> </head> <body> <div class="container"> <h1>記憶力テストゲーム</h1> <div class="info"> <div id="highScoreDisplay">ベストレベル: 0</div> <div id="message">スタートボタンを押してください</div> <div id="scoreDisplay">レベル: 0</div> </div> <div class="game-panel"> <button class="panel" id="green" data-color="green"></button> <button class="panel" id="red" data-color="red"></button> <button class="panel" id="blue" data-color="blue"></button> <button class="panel" id="yellow" data-color="yellow"></button> <button class="panel" id="purple" data-color="purple"></button> <button class="panel" id="orange" data-color="orange"></button> </div> <button id="startButton">ゲームスタート</button> </div> <script> // --- 1. 定数とDOM要素の定義 --- const colors = ['green', 'red', 'blue', 'yellow', 'purple', 'orange']; // 6色 const panels = document.querySelectorAll('.panel'); const startButton = document.getElementById('startButton'); const scoreDisplay = document.getElementById('scoreDisplay'); const highScoreDisplay = document.getElementById('highScoreDisplay'); // NEW const messageDisplay = document.getElementById('message'); const HIGHSCORE_KEY = 'simonHighScore'; // LocalStorageのキー // --- 2. ゲームの状態変数 --- let pattern = []; let playerInput = []; let level = 0; let isPlayerTurn = false; let gameActive = false; let timer = null; const TIME_LIMIT = 5; // --- 3. ユーティリティ関数 --- // LocalStorageからハイスコアをロードする function loadHighScore() { const savedScore = localStorage.getItem(HIGHSCORE_KEY); return savedScore ? parseInt(savedScore, 10) : 0; } // パネルを光らせる処理 function activatePanel(color) { const panel = document.getElementById(color); panel.classList.add('active'); // 200ms後に元の暗さに戻す (点滅時間短縮でテンポアップ) setTimeout(() => { panel.classList.remove('active'); }, 200); } // --- 4. ゲームロジック --- // 初期設定とゲーム開始 function initializeGame() { highScoreDisplay.textContent = `ベストレベル: ${loadHighScore()}`; messageDisplay.textContent = "スタートボタンを押してください"; startButton.addEventListener('click', startGame); } function startGame() { if (timer) clearInterval(timer); gameActive = true; level = 0; pattern = []; scoreDisplay.textContent = `レベル: ${level}`; messageDisplay.textContent = "パターンを生成中..."; startButton.disabled = true; panels.forEach(panel => { panel.removeEventListener('click', handlePanelClick); panel.addEventListener('click', handlePanelClick); }); nextRound(); } function nextRound() { level++; scoreDisplay.textContent = `レベル: ${level}`; playerInput = []; isPlayerTurn = false; // 新しいパターンを1つ追加 const randomColor = colors[Math.floor(Math.random() * colors.length)]; pattern.push(randomColor); displayPattern(pattern); } function displayPattern(pattern) { messageDisplay.textContent = "パターンをよく見てください..."; let i = 0; const intervalId = setInterval(() => { // パネル点灯 activatePanel(pattern[i]); i++; if (i >= pattern.length) { clearInterval(intervalId); // 1秒後にプレイヤーのターンへ移行 setTimeout(playerTurn, 1000); } }, 400); // 200ms点灯 + 200ms待機 = 400ms間隔 (テンポアップ) } function playerTurn() { isPlayerTurn = true; let timeLeft = TIME_LIMIT; // 制限時間タイマーをリセットして開始 if (timer) clearInterval(timer); timer = setInterval(() => { messageDisplay.textContent = `あなたのターン！ (残り${timeLeft}秒)`; timeLeft--; if (timeLeft < 0) { clearInterval(timer); gameOver(); } }, 1000); messageDisplay.textContent = `あなたのターン！ (残り${timeLeft}秒)`; } function handlePanelClick(event) { if (!isPlayerTurn || !gameActive) return; // クリック時にタイマーを停止 (新しいタイマーをすぐに再スタートするため) if (timer) clearInterval(timer); const clickedColor = event.target.dataset.color; playerInput.push(clickedColor); activatePanel(clickedColor); const currentIndex = playerInput.length - 1; // 1. パターンと一致するかチェック (不正解) if (playerInput[currentIndex] !== pattern[currentIndex]) { gameOver(); } // 2. パターンが最後まで入力されたかチェック (成功) else if (playerInput.length === pattern.length) { isPlayerTurn = false; messageDisplay.textContent = "正解！次のレベルへ..."; setTimeout(nextRound, 1500); } // 3. 入力途中 (タイマー再スタート) else { playerTurn(); } } function gameOver() { gameActive = false; isPlayerTurn = false; if (timer) clearInterval(timer); panels.forEach(panel => { panel.removeEventListener('click', handlePanelClick); }); // --- ハイスコアの判定と保存 --- (NEW LOGIC) const currentHighScore = loadHighScore(); if (level > currentHighScore) { localStorage.setItem(HIGHSCORE_KEY, level); highScoreDisplay.textContent = `ベストレベル: ${level}`; messageDisplay.textContent = `新記録達成！最終レベル: ${level}`; } else { messageDisplay.textContent = `ゲームオーバー！最終レベル: ${level}`; } // 失敗アニメーション panels.forEach(panel => panel.classList.add('game-over')); setTimeout(() => { panels.forEach(panel => panel.classList.remove('game-over')); startButton.disabled = false; }, 1000); } // ページロード時に実行 window.onload = initializeGame; </script> </body> </html> |
記憶力テストゲームが動く仕組みをやさしく解説！
ソースコードを動かしてみると、まるで魔法のように「パネルが光って」「記憶を試される」ゲームが動きますよね。
でも実は、この仕組みは たった3つの要素（HTML・CSS・JavaScript） の連携で動いているんです。
ここでは、それぞれの役割と動きの流れを、図解するようにわかりやすく説明します。
HTML：ゲームの“骨組み”を作る
HTMLは「このページには何があるのか」を定義するものです。
記憶力ゲームでは、次のような“箱”がHTMLで作られています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="container"> <h1>記憶力テストゲーム</h1> <div class="info"> <div id="highScoreDisplay">ベストレベル: 0</div> <div id="message">スタートボタンを押してください</div> <div id="scoreDisplay">レベル: 0</div> </div> <div class="game-panel"> <button class="panel" id="green" data-color="green"></button> <button class="panel" id="red" data-color="red"></button> <button class="panel" id="blue" data-color="blue"></button> <button class="panel" id="yellow" data-color="yellow"></button> <button class="panel" id="purple" data-color="purple"></button> <button class="panel" id="orange" data-color="orange"></button> </div> <button id="startButton">ゲームスタート</button> </div> |
これで、6つのパネル、スコア表示、スタートボタンの入れ物ができました。
CSS：見た目と演出をデザインする
CSSは、ゲームの「見た目」や「光る演出」を担当します。
たとえば、パネルが光るときの明るさの変化や配置のバランスはCSSで制御しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.panel { width: 100%; padding-bottom: 100%; /* 高さ=幅（正方形にするためのハック） */ height: 0; /* padding-bottomを使うため高さを0にする */ border-radius: 5px; opacity: 0.2; /* 通常時は非常に暗くして明暗差を強調 */ cursor: pointer; transition: opacity 0.2s, box-shadow 0.2s; border: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } /* パネルの色定義（通常時:暗い） */ #red { background-color: #5b0000; } #blue { background-color: #00005b; } #green { background-color: #005b00; } #yellow { background-color: #5b5b00; } #purple { background-color: #5b005b; } #orange { background-color: #5b3600; } /* パネルの色定義（点灯時:非常に明るい） */ .panel.active { opacity: 1.0; /* 点灯時に少し浮き上がるようなエフェクト */ transform: scale(1.05); transition: opacity 0.1s, transform 0.1s; } #red.active { background-color: #ff0000; box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.8); } #blue.active { background-color: #0000ff; box-shadow: 0 0 30px 5px rgba(0, 0, 255, 0.8); } #green.active { background-color: #00ff00; box-shadow: 0 0 30px 5px rgba(0, 255, 0, 0.8); } #yellow.active { background-color: #ffff00; box-shadow: 0 0 30px 5px rgba(255, 255, 0, 0.8); } #purple.active { background-color: #ff00ff; box-shadow: 0 0 30px 5px rgba(255, 0, 255, 0.8); } #orange.active { background-color: #ff8c00; box-shadow: 0 0 30px 5px rgba(255, 140, 0, 0.8); } |
ポイント解説：
.panelはすべてのパネルの共通デザイン.activeクラスが付くと明るく光るtransitionによって点灯がふわっと切り替わる
CSSの transition を使うと、“点灯している”という感覚が自然になります。
ほーく
JavaScript：ゲームの“頭脳”をつかさどる
そして、このゲームの動きを支えているのが JavaScript。
ユーザーの操作、パネルの順番、スコアの記録など、すべてここで管理しています。
ランダムなパターンを作る部分
|
1 2 3 |
// 新しいパターンを1つ追加 const randomColor = colors[Math.floor(Math.random() * colors.length)]; pattern.push(randomColor); |
Math.random() を使ってランダムにパターンを生成しています。
Math.random() は“くじ引き”のようなもの。毎回違う順番が出るから、飽きない仕組みになるんです。
ほーく
パネルを光らせる処理
|
1 2 3 4 5 6 7 8 9 10 |
// パネルを光らせる処理 function activatePanel(color) { const panel = document.getElementById(color); panel.classList.add('active'); // 200ms後に元の暗さに戻す (点滅時間短縮でテンポアップ) setTimeout(() => { panel.classList.remove('active'); }, 200); } |
この関数は、パネルを一瞬だけ光らせる処理です。setTimeout() を使って「200ミリ秒後に元の暗さに戻す」ことで、点滅させています。
制限時間と入力判定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const TIME_LIMIT = 5; function playerTurn() { isPlayerTurn = true; let timeLeft = TIME_LIMIT; // 制限時間タイマーをリセットして開始 if (timer) clearInterval(timer); timer = setInterval(() => { messageDisplay.textContent = `あなたのターン！ (残り${timeLeft}秒)`; timeLeft--; if (timeLeft < 0) { clearInterval(timer); gameOver(); } }, 1000); messageDisplay.textContent = `あなたのターン！ (残り${timeLeft}秒)`; } |
プレイヤーの番になったら、5秒以内に入力しなければゲームオーバー。
クリックが遅れたときには、自動的に gameOver() が呼ばれます。
クリックしたときには次のように正誤判定が行われます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const currentIndex = playerInput.length - 1; // 1. パターンと一致するかチェック (不正解) if (playerInput[currentIndex] !== pattern[currentIndex]) { gameOver(); } // 2. パターンが最後まで入力されたかチェック (成功) else if (playerInput.length === pattern.length) { isPlayerTurn = false; messageDisplay.textContent = "正解！次のレベルへ..."; setTimeout(nextRound, 1500); } // 3. 入力途中 (タイマー再スタート) else { playerTurn(); } |
ハイスコアの保存
|
1 2 3 4 5 6 7 8 9 |
// --- ハイスコアの判定と保存 --- const currentHighScore = loadHighScore(); if (level > currentHighScore) { localStorage.setItem(HIGHSCORE_KEY, level); highScoreDisplay.textContent = `ベストレベル: ${level}`; messageDisplay.textContent = `新記録達成！最終レベル: ${level}`; } else { messageDisplay.textContent = `ゲームオーバー！最終レベル: ${level}`; } |
ハイスコア（最高レベル）は localStorage に保存されます。
これはブラウザにデータを保存できる仕組みで、ページを閉じても記録が残ります。
ゲームのテンポや演出も、JavaScriptだけで実現できます。
“光るタイミングを変える”“パネルの色を増やす”といった調整も、
数行のコードで簡単にできるんですよ。
ほーく
カスタマイズで遊びの幅を広げよう！
せっかく作った記憶力テストゲーム、どうせなら“自分だけのオリジナルバージョン”に進化させてみませんか？
コードを少し書き換えるだけで、難易度や演出を自由に調整できます。
ここでは、初心者でも簡単にできる 3つのカスタマイズ方法 を紹介します。
カスタマイズ①：パネルの数を増やして難易度アップ！
現在のゲームは「6色（3×2のグリッド）」ですが、これを8色や9色にすると一気に上級者向けに。
HTML部分のパネルとJavaScript内にある const colors = [...] の配列を編集すると、
出題に使うパネルの色を増減できます。
カスタマイズ②：制限時間を変更する
今の仕様では「入力制限5秒」ですが、スピード重視やじっくり派など、好みに合わせて調整できます。
|
1 |
const TIME_LIMIT = 5; |
点灯時間を短くすればスリルが増し、長くすれば初心者向けになります。
カスタマイズ③：レベルごとに変化をつける
現在の仕組みでは pattern.push(randomColor) で毎回1つ増えます。
もっと高度にするなら、「2ステージごとに光る速度を上げる」「5ステージごとに色を追加する」などの工夫も可能です。
このように、JavaScriptのわずかな変更で「あなたオリジナルの記憶力ゲーム」が簡単に作れます。
次は、こうしたアレンジを加えた上でスコアランキング機能などを作るのも面白いですよ。
まずは“数字を変える”“1行追加する”ところから。
プログラミングは“実験の連続”です。少しずついじることで、自分だけの作品が生まれます。
ほーく
おすすめの学習リソース｜もっとスキルを伸ばしたいあなたへ
「記憶力テストゲーム」を完成させたことで、あなたはすでに HTML・CSS・JavaScriptの基礎 に触れました。ここからさらにステップアップするために役立つ学習リソースを紹介します。
おすすめ書籍
『ゲームで学ぶJavaScript入門 増補改訂版 ～ブラウザゲームづくりでHTML＆CSSも身につく！』
- ゲームを作りながら学べるので、退屈せずにJavaScriptの基礎が身につく
- HTML・CSS・JavaScriptの基本を一冊で網羅、Web制作の土台が自然に理解できる
- 13本のサンプルゲームを実際に動かせるから「作れる喜び」が味わえる
- 初心者・中高生にもやさしい解説で、初めてのゲームプログラミングに最適
『スラスラわかるHTML＆CSSのきほん』（SBクリエイティブ）
- Web制作初心者に最適な入門書。HTMLとCSSの仕組みをやさしく解説。
- これからWebページを作ってみたい方にぴったり。
- レイアウトの基本やスタイルの調整方法など、実践的に学べます。
オンライン講座編
Udemy｜世界最大級のオンライン学習プラットフォーム
世界中で利用されるオンライン学習サイト。
HTML、CSS、JavaScriptの入門から応用まで、高評価の講座が数百種類揃っています。
初心者でも動画を見ながら手を動かせるので、挫折しにくいのが魅力です。
まとめ：自分の手で作る「脳トレゲーム」は最高の学習体験！
ここまでお疲れさまでした！
あなたは、HTML・CSS・JavaScriptだけで記憶力テストゲームを作り上げることができました。
このプロジェクトを通して得られたのは、単なるコードの理解だけではありません。
「パターンを記録して再生する」「入力を比較して判定する」といった、ゲームの基礎ロジックを自分の手で実装したことが大きなステップアップになります。
今回の学びのポイント
- JavaScriptで「配列」や「イベント処理」を活用し、記憶パターンを管理できた
- DOM操作で「色の点灯・消灯」などの視覚効果を作れるようになった
- localStorageを使って「ハイスコアを保存」する仕組みを理解できた
「遊びながら学ぶ」ことこそ、プログラミング上達の近道です。
あなたの作った記憶力テストゲームが、誰かの記憶力を鍛えるきっかけになるかもしれません。
これからも、自由な発想でどんどん作品を増やしていきましょう！
関連記事
【実際に遊べる記憶力テストゲームはこちら。ベストスコア更新を目指して挑戦してみよう！】▼
【作り方記事】タイピングゲームの作り方｜記憶力ゲームと同じくHTMLとJavaScriptだけで開発！▼
【作り方記事】反射神経ゲームの作り方｜記憶力ゲームと同じくHTMLとJavaScriptだけで開発！▼
