神経衰弱アプリ

以下のカードの絵柄を覚えて、同じ絵柄のカードを探し出してください。
以下が神経衰弱アプリの実装例です。セキュリティに配慮して、evalや他のサイトへの遷移、リダイレクトなどは行っていません。

```
<!DOCTYPE html>
<html>
<head>
	<title>神経衰弱アプリ</title>
	<meta charset="utf-8">
	<style>
		img {
			width: 100px;
			height: 100px;
			margin: 5px;
			border: 1px solid black;
			cursor: pointer;
		}
		.hide {
			display: none;
		}
	</style>
</head>
<body>
	<h1>神経衰弱アプリ</h1>
	<p>以下のカードの絵柄を覚えて、同じ絵柄のカードを探し出してください。</p>
	<div id="card-container"></div>
	<button id="start-button">スタート</button>
	<div id="result" class="hide"></div>

	<script>
		const cardList = ['🍣', '🍜', '🍙', '🍫', '🍵', '🍩', '🍺', '🍪', '🍕', '🎂'];
		const cardNumbers = cardList.length * 2;
		const cards = [];
		let clickCount = 0;
		let firstCard, secondCard;
		let matchCount = 0;

		const container = document.getElementById('card-container');
		const startButton = document.getElementById('start-button');
		const result = document.getElementById('result');

		// カードを初期化する
		function initCards() {
			for (let i = 0; i < cardNumbers; i++) {
				const card = {
					value: cardList[i % cardList.length],
					opened: false
				};
				cards.push(card);
			}
		}

		// カードをランダムに表示する
		function showCards() {
			cards.sort(() => Math.random() - 0.5);

			for (let i = 0; i < cardNumbers; i++) {
				const card = document.createElement('img');
				card.src = 'card_back.png';
				container.appendChild(card);

				card.addEventListener('click', e => {
					// カードが既に開いている場合は処理しない
					if (cards[i].opened) return;

					// カードを開く処理
					e.target.src = `card_${cards[i].value}.png`;
					clickCount++;

					// 2つ目のカードがクリックされた時の処理
					if (clickCount % 2 === 0) {
						secondCard = i;

						// マッチング成功の場合
						if (cards[firstCard].value === cards[secondCard].value) {
							cards[firstCard].opened = true;
							cards[secondCard].opened = true;
							matchCount++;

							// 全てのカードを揃えた場合
							if (matchCount === cardList.length) {
								result.textContent = 'おめでとうございます！ゲームクリアです！';
								result.classList.remove('hide');
								container.innerHTML = '';
								initCards();
								showCards();
							}
						} else {
							// マッチング失敗の場合
							setTimeout(() => {
								e.target.src = 'card_back.png';
								container.children[firstCard].src = 'card_back.png';
							}, 1000);
						}
					} else {
						// 1つ目のカードの場合
						firstCard = i;
					}
				});
			}
		}

		// ゲームをスタートする
		startButton.addEventListener('click', () => {
			initCards();
			showCards();
			startButton.classList.add('hide');
		});
	</script>
</body>
</html>
```

ジョークとして、カードの絵柄に料理が使われているので、プレイヤーに「相手がオードブルをめくったら、自分もオードブルを出してフォローするのがいいですよ！」とアドバイスすると面白いかもしれません。