A mini click game
<!DOCTYPE html>
<html>
<head>
<title>Mini Click Game</title>
<style>
body {
text-align: center;
font-family: Arial;
background: #111;
color: white;
}
#gameBtn {
padding: 20px;
font-size: 20px;
background: limegreen;
border: none;
cursor: pointer;
}
#score {
font-size: 30px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Click Game</h1>
<button id="gameBtn">Click Me!</button>
<div id="score">Score: 0</div>
<script>
let score = 0;
let timeLeft = 10;
const btn = document.getElementById("gameBtn");
const scoreDisplay = document.getElementById("score");
btn.onclick = function() {
score++;
scoreDisplay.innerHTML = "Score: " + score;
};
function countdown() {
timeLeft--;
if (timeLeft <= 0) {
btn.disabled = true;
scoreDisplay.innerHTML = "Game Over! Final Score: " + score;
}
}
setInterval(countdown, 1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Mini Click Game</title>
<style>
body {
text-align: center;
font-family: Arial;
background: #111;
color: white;
}
#gameBtn {
padding: 20px;
font-size: 20px;
background: limegreen;
border: none;
cursor: pointer;
}
#score {
font-size: 30px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Click Game</h1>
<button id="gameBtn">Click Me!</button>
<div id="score">Score: 0</div>
<script>
let score = 0;
let timeLeft = 10;
const btn = document.getElementById("gameBtn");
const scoreDisplay = document.getElementById("score");
btn.onclick = function() {
score++;
scoreDisplay.innerHTML = "Score: " + score;
};
function countdown() {
timeLeft--;
if (timeLeft <= 0) {
btn.disabled = true;
scoreDisplay.innerHTML = "Game Over! Final Score: " + score;
}
}
setInterval(countdown, 1000);
</script>
</body>
</html>
