AI game creator

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

No:2914

1086

←

Prev Next

→

Garbage pickup game
Developer User3494｜Date and time 23/6/23 3:41:24
Build time 34.567 sec｜Game capacity 2.829KB｜

Script

SCORE: 0

←

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 {
			margin: 0;
			padding: 0;
			background-color: #4CAF50;
			color: #fff;
			font-family: Arial, sans-serif;
			overflow: hidden;
		}
		#game-board {
			position: absolute;
			top: 50px;
			left: 50%;
			transform: translateX(-50%);
			width: 90%;
			height: 90%;
			background-color: #fff;
			border-radius: 10px;
			padding: 10px;
			box-shadow: 0 0 10px #000;
			overflow: hidden;
		}
		#score-board {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 2em;
		}
		.garbage {
			position: absolute;
			cursor: pointer;
			transition: transform 0.3s ease-in-out;
			z-index: 1;
		}
		.garbage:hover {
			transform: scale(1.2);
		}
		.score {
			position: absolute;
			top: 0;
			left: 0;
			font-size: 2em;
			font-weight: bold;
			z-index: 10;
		}
	</style>
</head>
<body>
	<div id="game-board"></div>
	<div id="score-board">SCORE: <span id="score">0</span></div>
	<script>
		// ゴミの種類と画像のリスト
		const garbageList = [
			{name: "可燃ゴミ", src: "🔥"},
			{name: "不燃ゴミ", src: "🚫"},
			{name: "資源ごみ", src: "♻️"},
			{name: "粗大ごみ", src: "🚪"},
			{name: "危険ごみ", src: "☣️"}
		];
		// ゴミの出現位置とスピードのリスト
		const garbageConfig = [
			{top: 100, left: 100, speed: 2},
			{top: 200, left: 200, speed: 3},
			{top: 300, left: 300, speed: 4},
			{top: 400, left: 400, speed: 5},
			{top: 500, left: 500, speed: 6}
		];
		// スコア
		let score = 0;
		// ゴミを作る
		function createGarbage() {
			const garbageIndex = Math.floor(Math.random() * garbageList.length);
			const garbage = garbageList[garbageIndex];
			const configIndex = Math.floor(Math.random() * garbageConfig.length);
			const position = garbageConfig[configIndex];
			const garbageElement = document.createElement("div");
			garbageElement.className = "garbage";
			garbageElement.innerText = garbage.src;
			garbageElement.style.top = `${position.top}px`;
			garbageElement.style.left = `${position.left}px`;
			document.querySelector("#game-board").appendChild(garbageElement);
			// ゴミを移動する
			let x = position.left;
			let y = position.top;
			const intervalId = setInterval(() => {
				if (y > window.innerHeight + 100) {
					clearInterval(intervalId);
					garbageElement.remove();
					return;
				}
				y += position.speed;
				garbageElement.style.top = `${y}px`;
				// ゴミをクリックしたら
				garbageElement.onclick = () => {
					clearInterval(intervalId);
					garbageElement.remove();
					score += 10;
					document.querySelector("#score").innerText = score;
				};
			}, 20);
		}
		// ゲームを開始する
		setInterval(() => {
			createGarbage();
		}, 2000);
	</script>
</body>
</html>