こんにちは、「ぷろぐらの森」です🌲
これまでランニングゲームや迷路ゲームなど、キャラクターを動かす「アクション系」のゲームを作ってきましたね。
今回はガラッと趣向を変えて、頭を使うパズルゲーム「神経衰弱（メモリーゲーム）」を作ってみましょう！ 裏返しのカードをめくって、同じマーク（または数字）を当てるあの定番トランプゲームです。
💡 現役サーバーエンジニアの裏話
「アクションゲームとトランプゲーム、どっちが作るの難しいの？」とよく聞かれます。
実際の現場でも、トランプや麻雀のような「テーブルゲーム」の方が、裏側のプログラム（状態管理やルールの判定）を作るのが圧倒的に難しかったりします。 私も新人の頃、カードゲームの処理を作っていて「あれ？今どのカードが場に出てるんだっけ？」とプログラムの迷子になり、先輩に泣きついた苦い記憶があります（笑）。
今回はそんな「状態管理」の基礎が学べる、最高にやりがいのあるテーマです！
1. 今回作る「神経衰弱」の仕組み
今回作るのは、12枚（6ペア）のカードを使ったシンプルな神経衰弱ゲームです。
このゲームを作ることで、JavaScriptの「とても重要な3つの力」が身につきます。
- 配列のシャッフル（ランダム化）： カードを毎回バラバラに混ぜる技術。
- 状態の記憶： 「今めくったのは1枚目か？2枚目か？」をプログラムに覚えさせる技術。
- タイマー処理（遅延）： 違うカードを引いた時、一瞬だけ見せてから「1秒後に裏返す」技術
（setTimeoutを使います）。
2. 完成映像
3. 作成（HTML / CSS / JavaScript）
今回は、特別な画像などは使いません。
HTML、CSS、JavaScriptの3つのファイルを準備して、
以下のコードをコピペするだけでブラウザ上で遊べるようになりますよ！
🔹 HTML：ゲームの盤面を作ろう
まずは、カードを並べるための「枠（ボード）」を準備します。
中身のカードはJavaScriptが自動で並べてくれるので、HTMLはとてもシンプルです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>神経衰弱ゲーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>神経衰弱ゲーム</h1>
<p>同じ絵文字を揃えよう！</p>
<div id="game-board" class="board"></div>
<p id="message"></p>
<button id="restart-btn" style="display:none;" onclick="initGame()">もう一度遊ぶ</button>
<script src="script.js"></script>
</body>
</html>
🔹 CSS：カードのデザインを整えよう
次に、カードの見た目を作ります。「裏返っている時」と「めくられた時（.open）」で見た目が変わるのがポイントです。
CSS
body {
text-align: center;
font-family: sans-serif;
background-color: #f0f8ff;
}
.board {
display: grid;
grid-template-columns: repeat(4, 80px); /* 4列に並べる */
gap: 10px;
justify-content: center;
margin: 20px auto;
}
.card {
width: 80px;
height: 80px;
background-color: #2e8b57; /* 裏面の緑色 */
color: transparent; /* 文字は隠す */
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
user-select: none;
}
/* カードがめくられた時、または揃った時のスタイル */
.card.open, .card.matched {
background-color: #fff; /* 表面は白色 */
color: #333; /* 絵文字を表示 */
border: 2px solid #333;
cursor: default;
}
🔹 JavaScript：ゲームのルールをプログラミングしよう！
ここが心臓部です。「カードを混ぜる」「クリックされた時の判定」「揃った時の処理」を書いていきます。
カラカラ🎮 ガチャとシャッフルの密接な関係
コードの中にあるMath.random()という命令は、コンピューターに「でたらめな数字（乱数）」を出させる魔法です。 現役のサーバーエンジニアである私が普段扱っている「ソシャゲのガチャ（何が出るかわからないシステム）」も、根本的な仕組みはこのMath.random()と全く同じなんですよ！
JavaScript
const emojis = ['🍎', '🍎', '🍇', '🍇', '🍉', '🍉', '🍌', '🍌', '🍓', '🍓', '🍒', '🍒'];
let firstCard = null; // 1枚目にめくったカード
let secondCard = null; // 2枚目にめくったカード
let lockBoard = false; // 判定中にクリックできないようにする鍵
let matchedCount = 0; // 揃ったペアの数
const board = document.getElementById('game-board');
const message = document.getElementById('message');
const restartBtn = document.getElementById('restart-btn');
// ゲームを初期化してスタートする関数
function initGame() {
board.innerHTML = '';
message.textContent = '';
restartBtn.style.display = 'none';
matchedCount = 0;
firstCard = null;
secondCard = null;
lockBoard = false;
// カードをシャッフル（混ぜる）
const shuffledEmojis = emojis.sort(() => 0.5 - Math.random());
// カードを画面に配置
shuffledEmojis.forEach(emoji => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.emoji = emoji; // 裏側に絵文字のデータを隠し持つ
cardElement.textContent = emoji;
// クリックした時の処理を追加
cardElement.addEventListener('click', flipCard);
board.appendChild(cardElement);
});
}
// カードをめくる処理
function flipCard() {
// すでにめくられているカードや、判定中はクリック無効
if (lockBoard) return;
if (this === firstCard) return;
if (this.classList.contains('matched')) return;
// カードを表にする
this.classList.add('open');
// 1枚目の場合
if (!firstCard) {
firstCard = this;
return;
}
// 2枚目の場合
secondCard = this;
checkForMatch();
}
// 絵柄が揃ったかチェックする処理
function checkForMatch() {
const isMatch = firstCard.dataset.emoji === secondCard.dataset.emoji;
if (isMatch) {
// 揃った場合
firstCard.classList.add('matched');
secondCard.classList.add('matched');
matchedCount += 2;
resetCards();
// 全部揃ったらクリア！
if (matchedCount === emojis.length) {
message.textContent = '🎉 全問正解！クリア！ 🎉';
restartBtn.style.display = 'inline-block';
}
} else {
// 外れた場合（1秒後に裏返す）
lockBoard = true; // 裏返るまで他のカードを触れなくする
setTimeout(() => {
firstCard.classList.remove('open');
secondCard.classList.remove('open');
resetCards();
}, 1000);
}
}
// 記憶をリセットして次のターンへ
function resetCards() {
firstCard = null;
secondCard = null;
lockBoard = false;
}
// ページが開かれたらゲームスタート！
initGame();
4. まとめ
今回はJavaScriptを使って、神経衰弱ゲームを作成しました。
カードがめくられた状態を firstCard という変数に一時的に記憶させたり、
外れた時に setTimeout で1秒待ってから裏返すなど、「状態の変化」と「時間」をコントロールするプログラミングの面白さが体感できたのではないでしょうか？
絵文字を「どうぶつ」や「乗り物」に変えたり、カードの枚数を20枚に増やしたりと、簡単に自分だけのオリジナルゲームに改造できます。ぜひ色々なマークで遊んでみてくださいね！
5. 次回予告（解説編への誘導）
「コピペで動いたけど、JavaScriptのコードが長くてよくわからなかった…」という方もご安心ください！
次回は、この神経衰弱のコードの中から「配列のシャッフルはどうやっているの？」「カスタムデータ属性（dataset）ってなに？」といった、少し難しかった技術的なポイントを、初心者向けに図解入りで徹底解説します。 お楽しみに！🌲
コメント