<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speed Click Challenge</title>
<style>
*{
box-sizing:border-box;
}
body{
margin:0;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
font-family:Arial,sans-serif;
background:#070b18;
color:white;
}
.game{
width:92%;
max-width:450px;
padding:30px 20px;
text-align:center;
border-radius:25px;
background:#111a30;
box-shadow:0 0 35px #00eaff55;
}
h1{
color:#00eaff;
margin-bottom:5px;
}
.subtitle{
color:#aaa;
margin-bottom:25px;
}
.stats{
display:flex;
justify-content:space-around;
margin-bottom:25px;
}
.stat{
padding:12px 18px;
border-radius:12px;
background:#192541;
}
.stat span{
display:block;
margin-top:5px;
color:#00eaff;
font-size:24px;
font-weight:bold;
}
#clickButton{
width:220px;
height:220px;
border:none;
border-radius:50%;
background:#00eaff;
color:#061018;
font-size:24px;
font-weight:bold;
cursor:pointer;
box-shadow:0 0 40px #00eaff66;
transition:0.1s;
}
#clickButton:active{
transform:scale(0.92);
}
#clickButton:disabled{
opacity:0.5;
cursor:not-allowed;
}
#startButton{
margin-top:25px;
padding:13px 28px;
border:none;
border-radius:25px;
background:#ff2d75;
color:white;
font-size:16px;
font-weight:bold;
cursor:pointer;
}
.message{
margin-top:20px;
min-height:24px;
color:#ddd;
}
</style>
</head>
<body>
<div class="game">
<h1>⚡ SPEED CLICK</h1>
<p class="subtitle">
Click as fast as you can in 10 seconds!
</p>
<div class="stats">
<div class="stat">
CLICKS
<span id="score">0</span>
</div>
<div class="stat">
TIME
<span id="time">10</span>
</div>
<div class="stat">
BEST
<span id="best">0</span>
</div>
</div>
<button id="clickButton" disabled>
START FIRST
</button>
<br>
<button id="startButton">
🚀 START GAME
</button>
<div id="message" class="message">
Ready for the challenge?
</div>
</div>
<script>
const clickButton =
document.getElementById("clickButton");
const startButton =
document.getElementById("startButton");
const scoreDisplay =
document.getElementById("score");
const timeDisplay =
document.getElementById("time");
const bestDisplay =
document.getElementById("best");
const message =
document.getElementById("message");
let score = 0;
let time = 10;
let playing = false;
let timer = null;
let best =
Number(localStorage.getItem("speedBest")) || 0;
bestDisplay.textContent = best;
startButton.addEventListener("click", startGame);
clickButton.addEventListener("click", () => {
if(!playing) return;
score++;
scoreDisplay.textContent = score;
});
function startGame(){
clearInterval(timer);
score = 0;
time = 10;
playing = true;
scoreDisplay.textContent = score;
timeDisplay.textContent = time;
clickButton.disabled = false;
clickButton.textContent = "CLICK!";
startButton.disabled = true;
message.textContent =
"🔥 GO! Click as fast as possible!";
timer = setInterval(() => {
time--;
timeDisplay.textContent = time;
if(time <= 0){
endGame();
}
},1000);
}
function endGame(){
clearInterval(timer);
playing = false;
clickButton.disabled = true;
clickButton.textContent = "TIME UP!";
startButton.disabled = false;
if(score > best){
best = score;
localStorage.setItem(
"speedBest",
best
);
bestDisplay.textContent = best;
message.textContent =
"🏆 NEW HIGH SCORE! " + score + " CLICKS!";
}
else{
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speed Click Challenge</title>
<style>
*{
box-sizing:border-box;
}
body{
margin:0;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
font-family:Arial,sans-serif;
background:#070b18;
color:white;
}
.game{
width:92%;
max-width:450px;
padding:30px 20px;
text-align:center;
border-radius:25px;
background:#111a30;
box-shadow:0 0 35px #00eaff55;
}
h1{
color:#00eaff;
margin-bottom:5px;
}
.subtitle{
color:#aaa;
margin-bottom:25px;
}
.stats{
display:flex;
justify-content:space-around;
margin-bottom:25px;
}
.stat{
padding:12px 18px;
border-radius:12px;
background:#192541;
}
.stat span{
display:block;
margin-top:5px;
color:#00eaff;
font-size:24px;
font-weight:bold;
}
#clickButton{
width:220px;
height:220px;
border:none;
border-radius:50%;
background:#00eaff;
color:#061018;
font-size:24px;
font-weight:bold;
cursor:pointer;
box-shadow:0 0 40px #00eaff66;
transition:0.1s;
}
#clickButton:active{
transform:scale(0.92);
}
#clickButton:disabled{
opacity:0.5;
cursor:not-allowed;
}
#startButton{
margin-top:25px;
padding:13px 28px;
border:none;
border-radius:25px;
background:#ff2d75;
color:white;
font-size:16px;
font-weight:bold;
cursor:pointer;
}
.message{
margin-top:20px;
min-height:24px;
color:#ddd;
}
</style>
</head>
<body>
<div class="game">
<h1>⚡ SPEED CLICK</h1>
<p class="subtitle">
Click as fast as you can in 10 seconds!
</p>
<div class="stats">
<div class="stat">
CLICKS
<span id="score">0</span>
</div>
<div class="stat">
TIME
<span id="time">10</span>
</div>
<div class="stat">
BEST
<span id="best">0</span>
</div>
</div>
<button id="clickButton" disabled>
START FIRST
</button>
<br>
<button id="startButton">
🚀 START GAME
</button>
<div id="message" class="message">
Ready for the challenge?
</div>
</div>
<script>
const clickButton =
document.getElementById("clickButton");
const startButton =
document.getElementById("startButton");
const scoreDisplay =
document.getElementById("score");
const timeDisplay =
document.getElementById("time");
const bestDisplay =
document.getElementById("best");
const message =
document.getElementById("message");
let score = 0;
let time = 10;
let playing = false;
let timer = null;
let best =
Number(localStorage.getItem("speedBest")) || 0;
bestDisplay.textContent = best;
startButton.addEventListener("click", startGame);
clickButton.addEventListener("click", () => {
if(!playing) return;
score++;
scoreDisplay.textContent = score;
});
function startGame(){
clearInterval(timer);
score = 0;
time = 10;
playing = true;
scoreDisplay.textContent = score;
timeDisplay.textContent = time;
clickButton.disabled = false;
clickButton.textContent = "CLICK!";
startButton.disabled = true;
message.textContent =
"🔥 GO! Click as fast as possible!";
timer = setInterval(() => {
time--;
timeDisplay.textContent = time;
if(time <= 0){
endGame();
}
},1000);
}
function endGame(){
clearInterval(timer);
playing = false;
clickButton.disabled = true;
clickButton.textContent = "TIME UP!";
startButton.disabled = false;
if(score > best){
best = score;
localStorage.setItem(
"speedBest",
best
);
bestDisplay.textContent = best;
message.textContent =
"🏆 NEW HIGH SCORE! " + score + " CLICKS!";
}
else{
❤1🔥1