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

No:18

328

←

Prev Next

→

Idle game 4
Developer User1006｜Date and time 23/4/20 21:06:17
Build time 1 sec｜Game capacity 3.241KB｜

Script

idle game

Tap the red circle for 30 seconds to earn score! However, the maximum number of circles displayed at the same time is 10. When you’re ready, tap ”START”!

Time left: 30s

Score: 0

←

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 {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			background-color: #eee;
		}
		#container {
			text-align: center;
		}
		h1 {
			font-size: 2em;
			font-weight: bold;
			color: #333;
			margin: 0.5em 0;
		}
		p {
			font-size: 1.2em;
			color: #666;
			margin: 0.5em 0;
		}
		button {
			font-size: 1.2em;
			background-color: #fff;
			border: none;
			padding: 0.5em 1em;
			color: #333;
			border-radius: 0.3em;
			cursor: pointer;
		}
		button:hover {
			background-color: #eee;
		}
		#game-container {
			display: none;
		}
		#timer {
			font-size: 2em;
			color: #333;
			margin: 1em 0;
		}
		#score {
			font-size: 2em;
			color: #333;
			margin: 1em 0;
		}
		.circle {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: #f00;
			border-radius: 50%;
			transition: top 2s ease, left 2s ease;
			cursor: pointer;
		}
	</style>
	<script>
		window.addEventListener('load', function() {
			var container = document.getElementById('container');
			var playBtn = document.getElementById('play-btn');
			var gameContainer = document.getElementById('game-container');
			var timer = document.getElementById('timer');
			var score = document.getElementById('score');
			var circles = document.getElementsByClassName('circle');
			var timeLeft = 30;
			var scoreCount = 0;
			var timerIntervalId;
			var circleTimeoutIds = [];
			var maxCircles = 10;
			
			playBtn.addEventListener('click', function() {
				container.style.display = 'none';
				gameContainer.style.display = 'block';
				startGame();
			});
			
			function startGame() {
				timerIntervalId = setInterval(function() {
					if (timeLeft > 0) {
						timeLeft--;
						timer.innerText = 'Time left: ' + timeLeft + 's';
						if (Math.random() < 0.5 && circles.length < maxCircles) {
							createCircle();
						}
					} else {
						clearInterval(timerIntervalId);
						for (var i=0; i<circleTimeoutIds.length; i++) {
							clearTimeout(circleTimeoutIds[i]);
						}
						alert('Time over! Your score is ' + scoreCount);
						location.reload();
					}
				}, 1000);
			}
			
			function createCircle() {
				var circle = document.createElement('div');
				circle.className = 'circle';
				circle.style.top = Math.random()*80 + 10 + '%';
				circle.style.left = Math.random()*80 + 10 + '%';
				circle.addEventListener('click', function() {
					circle.remove();
					scoreCount++;
					score.innerText = 'Score: ' + scoreCount;
				});
				gameContainer.appendChild(circle);
				var timeoutId = setTimeout(function() {
					circle.remove();
				}, 2000);
				circleTimeoutIds.push(timeoutId);
			}
		});
	</script>
</head>
<body>
	<div id="container">
		<h1>放置ゲーム</h1>
		<p>30秒間、赤い円をタップしてスコアを稼ごう！ただし、同時に表示される円の数は最大で10個までだ。準備ができたら、「START」をタップしよう！</p>
		<button id="play-btn">START</button>
	</div>
	<div id="game-container">
		<div id="timer">Time left: 30s</div>
		<div id="score">Score: 0</div>
	</div>
</body>
</html>