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

No:2319

3137

←

Prev Next

→

Find what youre looking for
Developer User3494｜Date and time 23/6/20 23:08:55
Build time 22.885 sec｜Game capacity 1.793KB｜

Script

探し物ゲーム

画面内にあるアイテムを探して下さい！

🧸

🚀

🍎

🍕

👑

🎧

📷

🦆

🎨

このプログラムは、画面内に表示されたアイテム（絵文字）を探すゲームです。スマホからでも操作しやすいように、アイテムはクリックで隠すことができます。全てのアイテムを見つけたら、「おめでとうございます！全部見つけました！」というメッセージが表示されます。

←

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: 24px;
			text-align: center;
		}

.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 0 auto;
			max-width: 400px;
			padding: 20px;
		}

.item {
			background-color: lightblue;
			border-radius: 50%;
			cursor: pointer;
			height: 60px;
			margin: 10px;
			width: 60px;
		}

.hidden {
			opacity: 0;
		}

.win-message {
			color: green;
			font-size: 32px;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<h1>探し物ゲーム</h1>
	<p>画面内にあるアイテムを探して下さい！</p>
	<div class="container">
		<div class="item">🧸</div>
		<div class="item">🚀</div>
		<div class="item">🍎</div>
		<div class="item">🍕</div>
		<div class="item">👑</div>
		<div class="item">🎧</div>
		<div class="item">📷</div>
		<div class="item">🦆</div>
		<div class="item">🎨</div>
	</div>
	<div class="win-message hidden">おめでとうございます！全部見つけました！</div>

items.forEach(item => {
			item.addEventListener('click', () => {
				item.classList.add('hidden');
				count++;

if (count === 9) {
					document.querySelector('.win-message').classList.remove('hidden');
				}
			});
		});
	</script>
</body>
</html>