JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

html
<html>
<body onclick="miss()" style="margin:0">
<div id="dot" style="position:absolute;width:20px;height:20px;background:red;border-radius:50%" onclick="hit(event)"></div>
<div id="score">Score: 0</div>
<script>
let score = 0;
let timeLeft = 10;
let gameOn = true;

function hit(e) {
    if(gameOn) {
        e.stopPropagation();
        score++;
        document.getElementById('score').innerHTML = 'Score: ' + score;
        moveDot();
    }
}

function miss() {
    if(gameOn) {
        score = Math.max(0, score - 1);
        document.getElementById('score').innerHTML = 'Score: ' + score;
    }
}

function moveDot() {
    let dot = document.getElementById('dot');
    dot.style.left = Math.random() * (window.innerWidth - 20) + 'px';
    dot.style.top = Math.random() * (window.innerHeight - 20) + 'px';
}

moveDot();
let timer = setInterval(() => {
    timeLeft--;
    if(timeLeft <= 0) {
        gameOn = false;
        clearInterval(timer);
        alert('Game Over! Final Score: ' + score);
    }
}, 1000);
</script>
</body>
</html>