A game in which you need to tap a circle appearing at random locations every time you tap it. As fast aa possible during 30 sec's game

Click here for free DL of the app version that can save data.

No:12473

←

Prev Next

→

A game in which you need to tap a circle appearing..ALL
Developer User5130｜Date and time 23/8/18 6:41:41
Build time 28.571 sec｜Game capacity 4.266KB｜

Script

Punteggio: 0

Tempo rimasto: 30 sec

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Gioco del Tocca il Cerchio!</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
        }

.game-container {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #ddd;
            border-radius: 50%;
            overflow: hidden;
        }

.game-container::before {
            content: "";
            display: block;
            padding-top: 100%;
        }

.circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: #f00;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 24px;
        }

.score {
            text-align: center;
            font-size: 20px;
            margin-bottom: 20px;
        }

.timer {
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="gameContainer" class="game-container">
        <div id="circle" class="circle"></div>
    </div>
    <div class="score">Punteggio: <span id="score">0</span></div>
    <div class="timer">Tempo rimasto: <span id="time">30</span> sec</div>

var score = 0;
        var time = 30;
        var gameInProgress = false;
        var gameTimer;

// Funzione per generare una posizione casuale per il cerchio
        function generateRandomPosition() {
            var containerWidth = document.getElementById("gameContainer").offsetWidth;
            var containerHeight = document.getElementById("gameContainer").offsetHeight;
            var circleSize = circle.offsetWidth;
            var maxLeft = containerWidth - circleSize;
            var maxTop = containerHeight - circleSize;

var randomLeft = Math.floor(Math.random() * maxLeft);
            var randomTop = Math.floor(Math.random() * maxTop);

return {
                left: randomLeft,
                top: randomTop
            };
        }

// Funzione per iniziare il gioco
        function startGame() {
            gameInProgress = true;
            score = 0;
            time = 30;
            updateScore();
            updateTimer();
            gameTimer = setInterval(updateTimer, 1000);
            showCircle();
        }

// Funzione per fermare il gioco
        function stopGame() {
            gameInProgress = false;
            clearInterval(gameTimer);
        }

// Funzione per aggiornare il punteggio
        function updateScore() {
            scoreElement.textContent = score;
        }

// Funzione per aggiornare il timer
        function updateTimer() {
            time--;
            timeElement.textContent = time;

if (time <= 0) {
                stopGame();
            }
        }

// Funzione per mostrare il cerchio in una posizione casuale
        function showCircle() {
            if (gameInProgress) {
                var position = generateRandomPosition();
                circle.style.left = position.left + "px";
                circle.style.top = position.top + "px";
                circle.style.display = "block";
            }
        }

// Evento scatenato da un click sul cerchio
        circle.addEventListener("click", function() {
            if (gameInProgress) {
                score++;
                updateScore();
                showCircle();
            }
        });

// Iniziare il gioco quando si carica la pagina
        startGame();
    </script>
</body>
</html>