Click the Target

.game-container {
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.game-area {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 300px;
    margin: 10px auto;
    border: 2px solid #333;
    background-color: #f9f9f9;
    overflow: hidden;
}

.target {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: red;
    border-radius: 50%;
    cursor: pointer;
}

.controls {
    margin-top: 10px;
}

.score-display,
.timer-display {
    font-size: 1.2em;
    margin: 5px 0;
}

.start-btn {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.start-btn:hover {
    background-color: #555;
}

<div class="game-container">
    <h1>Click the Target</h1>
    <div class="game-area" id="gameArea"></div>
    <div class="controls">
        <p class="score-display">Score: <span id="scoreDisplay">0</span></p>
        <p class="timer-display">Time Left: <span id="timerDisplay">30</span>s</p>
        <button id="startBtn" class="start-btn">Start</button>
    </div>
    <input type="hidden" id="hiddenScore" value="0">
</div>

const gameArea = document.getElementById("gameArea");
const scoreDisplay = document.getElementById("scoreDisplay");
const timerDisplay = document.getElementById("timerDisplay");
const startBtn = document.getElementById("startBtn");
const hiddenScore = document.getElementById("hiddenScore");

let score = 0;
let timeLeft = 30;
let timerInterval = null;
let targetTimeout = null;

function startGame() {
    resetGame();
    document.querySelector('.share-buttons').style.display = 'none';
    timerInterval = setInterval(updateTimer, 1000);
    spawnTarget();
}

function spawnTarget() {
    const target = document.createElement("div");
    target.classList.add("target");

    // Randomize position
    const maxX = gameArea.offsetWidth - 40;
    const maxY = gameArea.offsetHeight - 40;
    const x = Math.random() * maxX;
    const y = Math.random() * maxY;

    target.style.left = `${x}px`;
    target.style.top = `${y}px`;

    // Add target to game area
    gameArea.appendChild(target);

    // Remove target after 1.5 seconds if not clicked
    targetTimeout = setTimeout(() => {
        if (gameArea.contains(target)) {
            gameArea.removeChild(target);
            endGame(); // End game if target not clicked
        }
    }, 1500);

    // On click, increment score and spawn new target
    target.addEventListener("click", () => {
        score++;
        scoreDisplay.textContent = score;
        hiddenScore.value = score; // Update hidden score field
        clearTimeout(targetTimeout);
        gameArea.removeChild(target);
        spawnTarget();
    });
}

function updateTimer() {
    timeLeft--;
    timerDisplay.textContent = timeLeft;

    if (timeLeft <= 0) {
        endGame();
    }
}

function endGame() {
    clearInterval(timerInterval);
    clearTimeout(targetTimeout);
    gameArea.innerHTML = "";
    document.querySelector('.share-buttons').style.display = 'flex'; // Show share buttons
}

function resetGame() {
    clearInterval(timerInterval);
    clearTimeout(targetTimeout);
    score = 0;
    timeLeft = 30;
    hiddenScore.value = score; // Reset hidden score
    scoreDisplay.textContent = score;
    timerDisplay.textContent = timeLeft;
    gameArea.innerHTML = "";
}

startBtn.addEventListener("click", startGame);