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

No:1999

4384

←

Prev Next

→

Games to separate garbage
Developer もちきなこ｜Date and time 23/6/19 17:50:16
Build time 35.945 sec｜Game capacity 2.704KB｜

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 type="text/css">
		body {
			text-align: center;
			background-color: #8BC34A;
			color: white;
		}
		#question {
			font-size: 30px;
			margin-top: 20px;
		}
		#emoji-container {
			margin-top: 50px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.gomi {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 10px;
			padding: 10px;
			width: 100px;
			height: 100px;
			background-color: white;
			border-radius: 50%;
			cursor: pointer;
			transition: transform 0.2s linear;
		}
		.gomi:hover {
			transform: scale(1.2);
		}
	</style>
	<script>
		const gomiList = [
			{ emoji: "🗑️", type: "もえるゴミ" },
			{ emoji: "🚗", type: "不燃ゴミ" },
			{ emoji: "🍎", type: "資源ゴミ" },
			{ emoji: "💊", type: "有害ゴミ" },
			{ emoji: "🐟", type: "資源ゴミ" },
			{ emoji: "🍔", type: "もえるゴミ" },
			{ emoji: "👟", type: "資源ゴミ" },
			{ emoji: "🔋", type: "有害ゴミ" },
			{ emoji: "🧼", type: "資源ゴミ" },
			{ emoji: "🍶", type: "空き瓶" }
		];
		
		let questionIndex = 0;
		let score = 0;
		
		function shuffle(array) {
			for (let i = array.length - 1; i > 0; i--) {
				const j = Math.floor(Math.random() * (i + 1));
				[array[i], array[j]] = [array[j], array[i]];
			}
			return array;
		}
		
		function displayQuestion() {
			const question = document.getElementById("question");
			question.textContent = gomiList[questionIndex].emoji;
		}
		
		function displayGomiList() {
			const emojiContainer = document.getElementById("emoji-container");
			emojiContainer.innerHTML = "";
			shuffle(gomiList).forEach(gomi => {
				const div = document.createElement("span");
				div.className = "gomi";
				div.textContent = gomi.emoji;
				div.addEventListener("click", () => checkAnswer(gomi.type));
				emojiContainer.appendChild(div);
			});
		}
		
		function checkAnswer(answer) {
			if (answer === gomiList[questionIndex].type) {
				score++;
				alert("正解！");
			} else {
				alert("残念！");
			}
			questionIndex++;
			if (questionIndex < gomiList.length) {
				displayQuestion();
				displayGomiList();
			} else {
				alert(`ゲーム終了！スコアは${score}点でした！`);
				location.reload();
			}
		}
		
		function startGame() {
			displayQuestion();
			displayGomiList();
		}
		
		window.onload = startGame;
	</script>
</head>
<body>
	<h1>ゴミ分別ゲーム</h1>
	<p id="question"></p>
	<div id="emoji-container"></div>
</body>
</html>