Click here for free DL of the app version that can save data.

No:679

347

←

Prev Next

→

neurasthenia
Developer User3082｜Date and time 23/6/17 11:00:02
Build time 38.976 sec｜Game capacity 2.508KB｜

Script

神経衰弱

同じカードをクリックしてペアを見つけよう！

以上が、1枚のHTMLファイルに実装された神経衰弱のプログラムです。JavaScriptを含んでいます。スマートフォンでの操作にも対応していますし、絵文字も多用しています。ゲームの概要は、「同じカードをクリックしてペアを見つけよう！」というものです。5ペア見つけたらクリアです。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>神経衰弱</title>
	<style>
		body {
			font-size: 2.5em;
			text-align: center;
			background-color: #f2f2f2;
		}
		.card {
			display: inline-block;
			border: 1px solid #ccc;
			border-radius: 5px;
			margin: 20px;
			padding: 20px;
			width: 150px;
			height: 150px;
			background-color: #fff;
			cursor: pointer;
		}
		.card.clicked {
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<h1>神経衰弱</h1>
	<p>同じカードをクリックしてペアを見つけよう！</p>
	<div id="game-board"></div>
	<button id="reset-button">リセット</button>
	
	<script>
		const CARD_VALUES = ['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐯','🦁'];
		let cardClicked = null;
		let numPairsFound = 0;
		
		const gameBoard = document.getElementById('game-board');
		const resetButton = document.getElementById('reset-button');
		
		const createCard = (value) => {
			const card = document.createElement('div');
			card.classList.add('card');
			card.dataset.value = value;
			card.textContent = '❓';
			card.addEventListener('click', () => {
				if (cardClicked) {
					if (cardClicked.dataset.value === card.dataset.value) {
						cardClicked.classList.add('clicked');
						card.classList.add('clicked');
						cardClicked = null;
						numPairsFound++;
						if (numPairsFound === 5) {
							alert('クリア！');
						}
					} else {
						setTimeout(() => {
							cardClicked.textContent = '❓';
							card.textContent = '❓';
							cardClicked = null;
						}, 1000);
					}
				} else {
					cardClicked = card;
					card.textContent = card.dataset.value;
				}
			});
			return card;
		};
		
		const resetGame = () => {
			cardClicked = null;
			numPairsFound = 0;
			gameBoard.innerHTML = '';
			const shuffledCardValues = CARD_VALUES.concat(CARD_VALUES)
				.sort(() => Math.random() - 0.5);
			shuffledCardValues.forEach((value) => {
				const card = createCard(value);
				gameBoard.appendChild(card);
			});
		};
		
		resetButton.addEventListener('click', resetGame);
		resetGame();
	</script>
</body>
</html>