<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultimate Mini Game</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:#050816;
color:white;
}
.game{
width:94%;
max-width:450px;
padding:22px;
text-align:center;
border-radius:25px;
background:#10182d;
box-shadow:0 0 35px #00eaff55;
}
h1{
margin:0 0 5px;
color:#00eaff;
}
.subtitle{
color:#aaa;
margin-top:5px;
}
.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin:20px 0;
}
.stat{
padding:10px 5px;
border-radius:12px;
background:#192541;
font-size:13px;
}
.stat b{
display:block;
margin-top:5px;
color:#00eaff;
font-size:21px;
}
#arena{
position:relative;
width:100%;
height:360px;
overflow:hidden;
border:2px solid #00eaff;
border-radius:18px;
background:
radial-gradient(circle at 20% 20%,#12315c 0 2px,transparent 3px),
radial-gradient(circle at 80% 70%,#12315c 0 2px,transparent 3px),
#050a18;
}
#target{
position:absolute;
width:65px;
height:65px;
display:none;
justify-content:center;
align-items:center;
border:0;
border-radius:50%;
background:#ff315c;
color:white;
font-size:25px;
cursor:pointer;
box-shadow:0 0 25px #ff315c88;
animation:pulse .7s infinite alternate;
}
@keyframes pulse{
from{transform:scale(.9);}
to{transform:scale(1.08);}
}
.message{
min-height:25px;
margin:14px 0;
color:#ddd;
}
button.start{
padding:12px 28px;
border:0;
border-radius:25px;
background:#00eaff;
color:#061018;
font-size:16px;
font-weight:bold;
cursor:pointer;
}
button.start:disabled{
opacity:.5;
cursor:not-allowed;
}
.small{
color:#777;
font-size:12px;
}
</style>
</head>
<body>
<div class="game">
<h1>🏆 ULTIMATE MINI GAME</h1>
<p class="subtitle">
Hit the target before time runs out!
</p>
<div class="stats">
<div class="stat">
SCORE
<b id="score">0</b>
</div>
<div class="stat">
TIME
<b id="time">30</b>
</div>
<div class="stat">
BEST
<b id="best">0</b>
</div>
</div>
<div id="arena">
<button id="target">
🎯
</button>
</div>
<div id="message" class="message">
Ready for the ultimate challenge?
</div>
<button id="startBtn" class="start">
🚀 START GAME
</button>
<p class="small">
Hit 🎯 as many times as possible in 30 seconds!
</p>
</div>
<script>
const arena =
document.getElementById("arena");
const target =
document.getElementById("target");
const scoreEl =
document.getElementById("score");
const timeEl =
document.getElementById("time");
const bestEl =
document.getElementById("best");
const messageEl =
document.getElementById("message");
const startBtn =
document.getElementById("startBtn");
let score = 0;
let time = 30;
let playing = false;
let timer = null;
let best =
Number(localStorage.getItem("ultimateBest")) || 0;
bestEl.textContent = best;
function moveTarget(){
const maxX =
arena.clientWidth - target.offsetWidth;
const maxY =
arena.clientHeight - target.offsetHeight;
const x =
Math.random() * maxX;
const y =
Math.random() * maxY;
target.style.left = x + "px";
target.style.top = y + "px";
}
function startGame(){
clearInterval(timer);
score = 0;
time = 30;
playing = true;
scoreEl.textContent = score;
timeEl.textContent = time;
target.style.display = "flex";
startBtn.disabled = true;
messageEl.textContent =
"🔥 GO! Hit the target!";
moveTarget();
timer = setInterval(() => {
time--;
timeEl.textContent = time;
if(time <= 0){
endGame();
}
},1000);
}
target.addEventListener("click", () => {
if(!playing) return;
score++;
scoreEl.textContent = score;
moveTarget();
});
function endGame(){
clearInterval(timer);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultimate Mini Game</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:#050816;
color:white;
}
.game{
width:94%;
max-width:450px;
padding:22px;
text-align:center;
border-radius:25px;
background:#10182d;
box-shadow:0 0 35px #00eaff55;
}
h1{
margin:0 0 5px;
color:#00eaff;
}
.subtitle{
color:#aaa;
margin-top:5px;
}
.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin:20px 0;
}
.stat{
padding:10px 5px;
border-radius:12px;
background:#192541;
font-size:13px;
}
.stat b{
display:block;
margin-top:5px;
color:#00eaff;
font-size:21px;
}
#arena{
position:relative;
width:100%;
height:360px;
overflow:hidden;
border:2px solid #00eaff;
border-radius:18px;
background:
radial-gradient(circle at 20% 20%,#12315c 0 2px,transparent 3px),
radial-gradient(circle at 80% 70%,#12315c 0 2px,transparent 3px),
#050a18;
}
#target{
position:absolute;
width:65px;
height:65px;
display:none;
justify-content:center;
align-items:center;
border:0;
border-radius:50%;
background:#ff315c;
color:white;
font-size:25px;
cursor:pointer;
box-shadow:0 0 25px #ff315c88;
animation:pulse .7s infinite alternate;
}
@keyframes pulse{
from{transform:scale(.9);}
to{transform:scale(1.08);}
}
.message{
min-height:25px;
margin:14px 0;
color:#ddd;
}
button.start{
padding:12px 28px;
border:0;
border-radius:25px;
background:#00eaff;
color:#061018;
font-size:16px;
font-weight:bold;
cursor:pointer;
}
button.start:disabled{
opacity:.5;
cursor:not-allowed;
}
.small{
color:#777;
font-size:12px;
}
</style>
</head>
<body>
<div class="game">
<h1>🏆 ULTIMATE MINI GAME</h1>
<p class="subtitle">
Hit the target before time runs out!
</p>
<div class="stats">
<div class="stat">
SCORE
<b id="score">0</b>
</div>
<div class="stat">
TIME
<b id="time">30</b>
</div>
<div class="stat">
BEST
<b id="best">0</b>
</div>
</div>
<div id="arena">
<button id="target">
🎯
</button>
</div>
<div id="message" class="message">
Ready for the ultimate challenge?
</div>
<button id="startBtn" class="start">
🚀 START GAME
</button>
<p class="small">
Hit 🎯 as many times as possible in 30 seconds!
</p>
</div>
<script>
const arena =
document.getElementById("arena");
const target =
document.getElementById("target");
const scoreEl =
document.getElementById("score");
const timeEl =
document.getElementById("time");
const bestEl =
document.getElementById("best");
const messageEl =
document.getElementById("message");
const startBtn =
document.getElementById("startBtn");
let score = 0;
let time = 30;
let playing = false;
let timer = null;
let best =
Number(localStorage.getItem("ultimateBest")) || 0;
bestEl.textContent = best;
function moveTarget(){
const maxX =
arena.clientWidth - target.offsetWidth;
const maxY =
arena.clientHeight - target.offsetHeight;
const x =
Math.random() * maxX;
const y =
Math.random() * maxY;
target.style.left = x + "px";
target.style.top = y + "px";
}
function startGame(){
clearInterval(timer);
score = 0;
time = 30;
playing = true;
scoreEl.textContent = score;
timeEl.textContent = time;
target.style.display = "flex";
startBtn.disabled = true;
messageEl.textContent =
"🔥 GO! Hit the target!";
moveTarget();
timer = setInterval(() => {
time--;
timeEl.textContent = time;
if(time <= 0){
endGame();
}
},1000);
}
target.addEventListener("click", () => {
if(!playing) return;
score++;
scoreEl.textContent = score;
moveTarget();
});
function endGame(){
clearInterval(timer);