ボタン押すゲーム
ボタンをできるだけ早く押してください。
<!DOCTYPE html>
<html>
<head>
<title>ボタン押すゲーム</title>
</head>
<body>
<h1>ボタン押すゲーム</h1>
<p>ボタンをできるだけ早く押してください。</p>
<button id="startBtn">スタート</button>
<button id="resetBtn" style="display:none;">リセット</button>
<p id="timer"></p>
<p id="score"></p>
<script>
let startTime;
let endTime;
let score;
let timerInterval;
const TIMER_LENGTH = 5000;
const startGame = () => {
startTime = Date.now();
score = 0;
document.getElementById("score").innerText = `Score: ${score}`;
document.getElementById("timer").innerText = `Time left: ${TIMER_LENGTH/1000} seconds`;
document.getElementById("startBtn").style.display = "none";
document.getElementById("resetBtn").style.display = "inline";
timerInterval = setInterval(countdown, 1000);
};
const countdown = () => {
let timerText = `Time left: ${(TIMER_LENGTH - (Date.now() - startTime))/1000} seconds`;
document.getElementById("timer").innerText = timerText;
if (Date.now() - startTime >= TIMER_LENGTH) {
endGame();
}
};
const endGame = () => {
clearInterval(timerInterval);
endTime = Date.now();
let gameTime = (endTime - startTime) / 1000;
let scoreText = `Your score is ${score} in ${gameTime} seconds.`;
document.getElementById("score").innerText = scoreText;
document.getElementById("resetBtn").style.display = "none";
document.getElementById("startBtn").style.display = "inline";
};
document.getElementById("startBtn").addEventListener("click", startGame);
document.addEventListener("keydown", (event) => {
if (event.code === "Space" && timerInterval) {
score++;
document.getElementById("score").innerText = `Score: ${score}`;
}
});
document.getElementById("resetBtn").addEventListener("click", endGame);
</script>
</body>
</html>
ジョーク:「ボタンを押すのはいいけど、何か重大なことでも起こるんじゃないかとドキドキしてしまう…」