<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>🧠 Skill Tap Game</title>
<style>
body {
background: #111;
color: white;
font-family: 'Segoe UI', sans-serif;
text-align: center;
padding: 20px;
}
h1 {
font-size: 36px;
color: gold;
}
#wallet, #score, #timer {
font-size: 20px;
margin: 10px;
}
#gameArea {
margin: 30px auto;
width: 300px;
height: 300px;
border: 4px solid gold;
border-radius: 10px;
position: relative;
background: #222;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
cursor: pointer;
}
button {
padding: 12px 25px;
font-size: 18px;
background: gold;
border: none;
border-radius: 10px;
margin-top: 20px;
cursor: pointer;
font-weight: bold;
}
#result {
font-size: 22px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>🎯 Tap The Green Circle</h1>
<div id="wallet">💰 Wallet: ₹<span id="walletValue">1000000</span></div>
<div id="score">✅ Score: <span id="scoreValue">0</span></div>
<div id="timer">⏱️ Time Left: <span id="timeValue">30</span>s</div>
<div id="gameArea"></div>
<button onclick="startGame()">Start Game</button>
<div id="result"></div>
<script>
let wallet = 1000000;
let score = 0;
let timeLeft = 30;
let gameInterval;
let timerInterval;
const gameArea = document.getElementById("gameArea");
const walletValue = document.getElementById("walletValue");
const scoreValue = document.getElementById("scoreValue");
const timeValue = document.getElementById("timeValue");
const result = document.getElementById("result");
function startGame() {
score = 0;
timeLeft = 30;
updateDisplay();
result.innerHTML = "";
gameArea.innerHTML = "";
timerInterval = setInterval(() => {
timeLeft--;
timeValue.innerText = timeLeft;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
gameInterval = setInterval(spawnCircle, 800);
}
function endGame() {
clearInterval(timerInterval);
clearInterval(gameInterval);
gameArea.innerHTML = "";
wallet += score * 100;
result.innerHTML = `🏁 Game Over! You earned ₹${score * 100}`;
walletValue.innerText = wallet;
}
function spawnCircle() {
gameArea.innerHTML = "";
const colors = ["green", "red", "blue", "yellow"];
const color = colors[Math.floor(Math.random() * colors.length)];
const circle = document.createElement("div");
circle.classList.add("circle");
circle.style.backgroundColor = color;
const x = Math.floor(Math.random() * 250);
const y = Math.floor(Math.random() * 250);
circle.style.left = x + "px";
circle.style.top = y + "px";
circle.onclick = () => {
if (color === "green") {
score++;
wallet += 100;
} else {
wallet -= 50;
}
updateDisplay();
gameArea.innerHTML = "";
};
gameArea.appendChild(circle);
}
function updateDisplay() {
scoreValue.innerText = score;
walletValue.innerText = wallet;
}
</script>
</body>
</html>