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>