CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aim Trainer with Leaderboard</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Arial', sans-serif;
background-color: #0a192f;
color: #64ffda;
}
#game-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
height:900px
}
#game-area {
width: 100%;
height: 500px;
background-color: #172a45;
position: relative;
cursor: crosshair;
border-radius: 10px;
box-shadow: 0 0 30px rgba(100, 255, 218, 0.3);
overflow: hidden;
}
#target {
width: 30px;
height: 30px;
background: radial-gradient(circle, #64ffda, #0a192f);
border-radius: 50%;
position: absolute;
transition: all 0.1s ease;
}
#stats, #controls {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.stat {
background-color: #1d3557;
padding: 10px;
border-radius: 5px;
flex: 1;
margin: 0 5px;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #64ffda;
color: #0a192f;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #4cccb0;
}
#countdown {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 72px;
color: #64ffda;
display: none;
}
#result, #level-info {
margin-top: 20px;
font-size: 18px;
text-align: center;
}
#accuracy-bar {
width: 100%;
height: 20px;
background-color: #1d3557;
margin-top: 20px;
border-radius: 10px;
overflow: hidden;
}
#accuracy-fill {
height: 100%;
width: 0%;
background-color: #64ffda;
transition: width 0.3s ease;
}
#leaderboard {
margin-top: 20px;
background-color: #1d3557;
border-radius: 10px;
padding: 20px;
}
#leaderboard h2 {
text-align: center;
margin-top: 0;
}
#leaderboard-list {
list-style-type: none;
padding: 0;
}
#leaderboard-list li {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding: 5px;
background-color: #172a45;
border-radius: 5px;
}
#name-input {
display: none;
margin-top: 20px;
text-align: center;
}
#name-input input {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="game-container">
<h1 style="text-align: center;">Improved Aim Trainer</h1>
<div id="game-area">
<div id="target"></div>
<div id="countdown"></div>
</div>
<div id="stats">
<div class="stat">Level: <br><span id="level">1</span></div>
<div class="stat">Clicks: <br><span id="click-count">0</span>/15</div>
<div class="stat">Last Time: <br><span id="last-time">0</span> ms</div>
<div class="stat">Best Time: <br><span id="best-time">-</span> ms</div>
</div>
<div id="accuracy-bar">
<div id="accuracy-fill"></div>
</div>
<div id="level-info"></div>
<div id="result"></div>
<div id="controls">
<button id="start-button">Start Game</button>
<button id="restart-button" style="display: none;">Restart Game</button>
</div>
<div id="name-input" style="display: none;">
<input type="text" id="player-name" placeholder="Enter your name">
<button id="submit-score">Submit Score</button>
</div>
<div id="leaderboard">
<h2>Leaderboard</h2>
<ol id="leaderboard-list"></ol>
</div>
</div>
<script>
const gameArea = document.getElementById('game-area');
const target = document.getElementById('target');
const result = document.getElementById('result');
const levelInfo = document.getElementById('level-info');
const clickCountDisplay = document.getElementById('click-count');
const lastTimeDisplay = document.getElementById('last-time');
const bestTimeDisplay = document.getElementById('best-time');
const levelDisplay = document.getElementById('level');
const startButton = document.getElementById('start-button');
const restartButton = document.getElementById('restart-button');
const countdown = document.getElementById('countdown');
const accuracyFill = document.getElementById('accuracy-fill');
const nameInput = document.getElementById('name-input');
const playerNameInput = document.getElementById('player-name');
const submitScoreButton = document.getElementById('submit-score');
const leaderboardList = document.getElementById('leaderboard-list');
let clickCount = 0;
let totalReactionTime = 0;
let startTime;
let bestTime = Infinity;
let level = 1;
let targetSize = 30;
let hits = 0;
let misses = 0;
let leaderboard = [];
function showTarget() {
const maxX = gameArea.clientWidth - targetSize;
const maxY = gameArea.clientHeight - targetSize;
const x = Math.random() * maxX;
const y = Math.random() * maxY;
target.style.left = `${x}px`;
target.style.top = `${y}px`;
target.style.width = `${targetSize}px`;
target.style.height = `${targetSize}px`;
target.style.display = 'block';
startTime = performance.now();
}
function updateLevel() {
level++;
levelDisplay.textContent = level;
targetSize = Math.max(10, 30 - (level - 1) * 2);
levelInfo.textContent = `Level ${level}: Target size decreased!`;
setTimeout(() => levelInfo.textContent = '', 2000);
}
function updateAccuracy() {
const accuracy = (hits / (hits + misses)) * 100;
accuracyFill.style.width = `${accuracy}%`;
}
function endGame() {
const averageReactionTime = totalReactionTime / hits;
const accuracy = ((hits / (hits + misses)) * 100).toFixed(2);
result.innerHTML = `Game Over!<br>Average reaction time: ${averageReactionTime.toFixed(2)} ms<br>Accuracy: ${accuracy}%`;
target.style.display = 'none';
restartButton.style.display = 'inline-block';
nameInput.style.display = 'block';
}
function handleClick(e) {
if (e.target === target) {
hits++;
clickCount++;
clickCountDisplay.textContent = clickCount;
const endTime = performance.now();
const reactionTime = endTime - startTime;
totalReactionTime += reactionTime;
lastTimeDisplay.textContent = reactionTime.toFixed(2);
if (reactionTime < bestTime) {
bestTime = reactionTime;
bestTimeDisplay.textContent = bestTime.toFixed(2);
}
updateAccuracy();
if (clickCount < 15) {
showTarget();
if (clickCount % 3 === 0) {
updateLevel();
}
} else {
endGame();
}
} else if (e.target === gameArea) {
misses++;
updateAccuracy();
}
}
function startCountdown() {
let count = 3;
countdown.style.display = 'block';
const countdownInterval = setInterval(() => {
countdown.textContent = count;
count--;
if (count < 0) {
clearInterval(countdownInterval);
countdown.style.display = 'none';
startGame();
}
}, 1000);
}
function startGame() {
clickCount = 0;
totalReactionTime = 0;
bestTime = Infinity;
level = 1;
targetSize = 30;
hits = 0;
misses = 0;
clickCountDisplay.textContent = '0';
lastTimeDisplay.textContent = '0';
bestTimeDisplay.textContent = '-';
levelDisplay.textContent = '1';
result.textContent = '';
levelInfo.textContent = '';
accuracyFill.style.width = '0%';
gameArea.addEventListener('click', handleClick);
showTarget();
startButton.style.display = 'none';
nameInput.style.display = 'none';
}
function restartGame() {
restartButton.style.display = 'none';
startCountdown();
}
function submitScore() {
const playerName = playerNameInput.value.trim();
if (playerName) {
const averageReactionTime = totalReactionTime / hits;
const accuracy = (hits / (hits + misses)) * 100;
const score = {
name: playerName,
time: averageReactionTime.toFixed(2),
accuracy: accuracy.toFixed(2)
};
leaderboard.push(score);
leaderboard.sort((a, b) => a.time - b.time);
leaderboard = leaderboard.slice(0, 10); // Keep only top 10
updateLeaderboard();
nameInput.style.display = 'none';
playerNameInput.value = '';
}
}
function updateLeaderboard() {
leaderboardList.innerHTML = '';
leaderboard.forEach((score, index) => {
const li = document.createElement('li');
li.innerHTML = `${index + 1}. ${score.name} - ${score.time} ms (${score.accuracy}% accuracy)`;
leaderboardList.appendChild(li);
});
}
startButton.addEventListener('click', startCountdown);
restartButton.addEventListener('click', restartGame);
submitScoreButton.addEventListener('click', submitScore);
// Initialize leaderboard
updateLeaderboard();
</script>
</body>
</html>