フルーツマッチングゲーム

このゲームは、フルーツの画像が表示されている8つのカードから、同じ絵柄のカードを2枚選択し、得点を獲得するゲームです。カードをクリックすると、カードが"active"クラスで表示されます。2枚目のカードをクリックすると、選択したカードが一致すれば得点を獲得し、カードが非表示になります。一致しなければ"active"クラスが解除され、カードの選択が解除されます。得点は、一致した場合に10点加算されます。スマホの操作にも対応しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

は「フルーツマッチングゲーム」です。

以下が実際のプログラムです。

<!DOCTYPE html>
<html>
<head>
	<title>フルーツマッチングゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #ffe5b4;
			font-size: 24px;
			text-align: center;
		}
		
		.game-area {
			margin-top: 50px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		
		.game-item {
			width: calc(20% - 10px);
			margin: 5px;
			height: 0;
			padding-bottom: 20%;
			background-color: white;
			border-radius: 50%;
			cursor: pointer;
			transition: all 0.2s ease-in-out;
		}
		
		.game-item img {
			width: 80%;
			margin-top: 10%;
		}
		
		.game-item.active {
			background-color: pink;
			transform: scale(1.2);
		}
		
		.score {
			margin-top: 30px;
			font-size: 32px;
			font-weight: bold;
		}
		
		@media screen and (max-width: 767px) {
			.game-item {
				width: calc(33.33% - 10px);
				padding-bottom: 33.33%;
			}
		}
		
		@media screen and (max-width: 503px) {
			.game-item {
				width: calc(50% - 10px);
				padding-bottom: 50%;
			}
		}
	</style>
</head>
<body>
	<h1>フルーツマッチングゲーム</h1>
	<div class="game-area">
		<div class="game-item"><img src="apple.png"></div>
		<div class="game-item"><img src="banana.png"></div>
		<div class="game-item"><img src="cherry.png"></div>
		<div class="game-item"><img src="grape.png"></div>
		<div class="game-item"><img src="lemon.png"></div>
		<div class="game-item"><img src="orange.png"></div>
		<div class="game-item"><img src="peach.png"></div>
		<div class="game-item"><img src="watermelon.png"></div>
	</div>
	<div class="score">0</div>
	<script>
		let score = 0;
		let activeCount = 0;
		
		// 要素の取得
		const gameItems = document.querySelectorAll('.game-item');
		const scoreElement = document.querySelector('.score');
		
		// クリック時の処理
		gameItems.forEach((item) => {
			item.addEventListener('click', () => {
				// activeなカードが2枚以上ある場合はreturn
				if (activeCount >= 2) {
					return;
				}
				// activeなカードが1枚の場合
				if (activeCount === 1) {
					activeCount++;
					item.classList.add('active');
					// カードが一致する場合
					if (document.querySelectorAll('.game-item.active img')[0].src === item.children[0].src) {
						score += 10;
						scoreElement.textContent = score;
						// カードを非表示にする
						setTimeout(() => {
							document.querySelectorAll('.game-item.active').forEach((activeItem) => {
								activeItem.style.display = 'none';
							});
						}, 500);
					} else {
						// カードが不一致の場合、クラスを外す
						setTimeout(() => {
							document.querySelectorAll('.game-item.active').forEach((activeItem) => {
								activeItem.classList.remove('active');
							});
							activeCount = 0;
						}, 500);
					}
				} else {
					// activeなカードが0枚の場合
					activeCount++;
					item.classList.add('active');
				}
			});
		});
	</script>
</body>
</html>