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

No:3705

712

←

Prev Next

→

Create a game where the character stops time
Developer User3733｜Date and time 23/6/26 8:02:45
Build time 22.898 sec｜Game capacity 2.592KB｜

Script

e deve coletar moedas antes que o tempo acabe.

Collect Coins Game

Click on the player to start the game. Collect as many coins as possible before time runs out!

🦁

Time Left: 60

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

e deve coletar moedas antes que o tempo acabe.

<!DOCTYPE html>
<html>
<head>
	<title>Collect Coins</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #c8e8e8;
			font-family: sans-serif;
			text-align: center;
			margin-bottom: 30px;
		}
		#player {
			font-size: 60px;
			margin-top: 50px;
			cursor: pointer;
		}
		.coin {
			font-size: 40px;
			cursor: pointer;
			position: absolute;
		}
		#timer {
			font-size: 30px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<h1>Collect Coins Game</h1>
	<p>Click on the player to start the game. Collect as many coins as possible before time runs out!</p>
	<div id="player">🦁</div>
	<div id="timer">Time Left: 60</div>
	<script>
		var player = document.getElementById("player");
		var timer = document.getElementById("timer");
		var coins = [];
		var timeLeft = 60;
		var interval;
		var score = 0;

function startGame() {
			// remove start elements
			player.removeEventListener("click", startGame);
			timer.remove();

// start timer
			interval = setInterval(function() {
				timeLeft--;
				timer.innerHTML = "Time Left: " + timeLeft;
				if (timeLeft <= 0) {
					clearInterval(interval);
					endGame();
				}
			}, 1000);

// spawn coins every two seconds
			setInterval(spawnCoin, 2000);

// add click event to body for collecting coins
			document.body.addEventListener("click", collectCoin);

// move player randomly every 500ms
			setInterval(movePlayer, 500);
		}

function spawnCoin() {
			var coin = document.createElement("div");
			coin.innerHTML = "💰";
			coin.classList.add("coin");
			coin.style.top = Math.floor(Math.random() * (window.innerHeight - coin.clientHeight)) + "px";
			coin.style.left = Math.floor(Math.random() * (window.innerWidth - coin.clientWidth)) + "px";
			document.body.appendChild(coin);
			coins.push(coin);
		}

function collectCoin(e) {
			if (e.target.classList.contains("coin")) {
				var coin = e.target;
				coin.remove();
				coins.splice(coins.indexOf(coin), 1);
				score++;
			}
		}

function movePlayer() {
			player.style.top = Math.floor(Math.random() * (window.innerHeight - player.clientHeight)) + "px";
			player.style.left = Math.floor(Math.random() * (window.innerWidth - player.clientWidth)) + "px";
		}

function endGame() {
			document.body.removeEventListener("click", collectCoin);
			player.style.display = "none";
			alert("Time's up! Your score is " + score + ".");
			location.reload();
		}

player.addEventListener("click", startGame);
	</script>
</body>
</html>