Ball Smash Game

3秒以内にボールをクリックして壊してください。
残り時間:
<!DOCTYPE html>
<html>
<head>
	<title>Ball Smash Game</title>
	<style type="text/css">
		body {
			text-align: center;
			font-size: 2em;
			margin-top: 20%;
		}
		#ball {
			width: 50px;
			height: 50px;
			background-color: red;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>Ball Smash Game</h1>
	<p>3秒以内にボールをクリックして壊してください。</p>
	<div id="ball" onclick="smashBall()"></div>
	<p>残り時間: <span id="time"></span></p>
	<script type="text/javascript">
		var countdown;
		var time = 3;
		var ball = document.getElementById('ball');
		var timeElem = document.getElementById('time');

		function smashBall() {
			ball.style.display = 'none';
			clearTimeout(countdown);
			alert("壊しました。");
			generateBall();
			time = 3;
			countdown = setTimeout(gameOver, 3000);
		}

		function gameOver() {
			ball.style.display = 'none';
			alert("時間切れ！もう一度チャレンジしよう！");
			timeElem.innerHTML = '3';
			generateBall();
			time = 3;
			countdown = setTimeout(gameOver, 3000);
		}

		function generateBall() {
			var x = Math.round(Math.random() * 80) + 10;
			var y = Math.round(Math.random() * 60) + 20;
			var color = '#' + Math.floor(Math.random()*16777215).toString(16);
			var size = Math.round(Math.random() * 30) + 20;
			var delay = Math.round(Math.random() * 3000) + 1000;

			setTimeout(function() {
				ball.style.width = size + 'px';
				ball.style.height = size + 'px';
				ball.style.backgroundColor = color;
				ball.style.display = 'block';
				ball.style.top = y + '%';
				ball.style.left = x + '%';
			}, delay);
		}

		generateBall();
		countdown = setTimeout(gameOver, 3000);

		var timer = setInterval(function() {
			time--;
			timeElem.innerHTML = time;
		}, 1000);
	</script>
</body>
</html>