神経衰弱アプリ

クリックしてカードをめくってください。
以下はJavaScriptを使った神経衰弱アプリです。セキュリティに関しては、evalや他のサイトへの遷移やリダイレクトは使用せず、alertも使わずに実装しています。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>神経衰弱アプリ</title>
	<style>
		.card {
			width: 100px;
			height: 150px;
			margin: 10px;
			border: solid 1px black;
			background-color: white;
			display: inline-block;
			position: relative;
			overflow: hidden;
		}
		.card img {
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			backface-visibility: hidden;
			transition: transform 1s;
			transform-style: preserve-3d;
		}
		.card .front {
			transform: rotateY(0);
			z-index: 1;
		}
		.card .back {
			transform: rotateY(180deg);
			z-index: 0;
		}
		.card.selected {
			background-color: orange;
		}
	</style>
</head>
<body>
	<h1>神経衰弱アプリ</h1>
	<p>クリックしてカードをめくってください。</p>
	<div id="game"></div>
	<script>
		var cards = [
			{ front: 'img/1.png', back: 'img/card-back.png' },
			{ front: 'img/2.png', back: 'img/card-back.png' },
			{ front: 'img/3.png', back: 'img/card-back.png' },
			{ front: 'img/4.png', back: 'img/card-back.png' },
			{ front: 'img/5.png', back: 'img/card-back.png' },
			{ front: 'img/6.png', back: 'img/card-back.png' },
			{ front: 'img/7.png', back: 'img/card-back.png' },
			{ front: 'img/8.png', back: 'img/card-back.png' }
		];

		var game = document.getElementById('game');
		var firstCard = null;
		var secondCard = null;
		var pairs = 0;

		function cardClick(event) {
			var card = event.target.closest('.card');
			if (!card.classList.contains('selected')) {
				if (firstCard == null) {
					firstCard = card;
					firstCard.classList.add('selected');
					firstCard.querySelector('.front').style.transform = 'rotateY(180deg)';
				} else if (secondCard == null) {
					secondCard = card;
					secondCard.classList.add('selected');
					secondCard.querySelector('.front').style.transform = 'rotateY(180deg)';
					if (firstCard.querySelector('.front').src == secondCard.querySelector('.front').src) {
						pairs++;
						if (pairs == 4) {
							alert('神経衰弱クリア！');
						}
						firstCard = null;
						secondCard = null;
					} else {
						setTimeout(function() {
							firstCard.classList.remove('selected');
							secondCard.classList.remove('selected');
							firstCard.querySelector('.front').style.transform = 'rotateY(0)';
							secondCard.querySelector('.front').style.transform = 'rotateY(0)';
							firstCard = null;
							secondCard = null;
						}, 1000);
					}
				}
			}
		}

		function shuffle(array) {
			for (var i = array.length - 1; i > 0; i--) {
				var j = Math.floor(Math.random() * (i + 1));
				var temp = array[i];
				array[i] = array[j];
				array[j] = temp;
			}
		}

		shuffle(cards);

		for (var i = 0; i < cards.length; i++) {
			var card = document.createElement('div');
			card.classList.add('card');
			card.innerHTML = '<img class="front" src="' + cards[i].front + '"><img class="back" src="' + cards[i].back + '">';
			card.addEventListener('click', cardClick);
			game.appendChild(card);
		}
	</script>
</body>
</html>
```

ジョークとしては、クリア時に「神経再生！」というメッセージを表示するというものを考えました。