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

No:13492

←

Prev Next

→

Fitspinner
Developer User5921｜Date and time 23/8/28 17:39:08
Build time 20.27 sec｜Game capacity 3.704KB｜

Script

Fitspinner Game

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Fitspinner Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

#score {
            font-size: 24px;
            margin-bottom: 20px;
        }

#spinner {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background-image: url('spinner.png');
            background-size: contain;
            background-repeat: no-repeat;
            animation: spin 2s infinite linear;
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

.buttons {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

.button {
            width: 70px;
            height: 70px;
            margin: 0 10px;
            border-radius: 50%;
            background-color: #2196F3;
            color: #FFF;
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Fitspinner Game</h1>
    <p id="score">0</p>
    <div id="spinner"></div>
    <div class="buttons">
        <div class="button">A</div>
        <div class="button">B</div>
        <div class="button">C</div>
    </div>

document.addEventListener("DOMContentLoaded", function() {
            var buttons = document.querySelectorAll(".button");
            
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].addEventListener("click", buttonClick);
            }

startGame();
        });

function startGame() {
            interval = setInterval(rotateSpinner, 3000);
        }

function rotateSpinner() {
            var spinner = document.getElementById("spinner");
            var angle = Math.floor(Math.random() * 360);
            
            spinner.style.transform = "rotate(" + angle + "deg)";
        }

function buttonClick() {
            clearInterval(interval);
            
            var spinnerRotation = getSpinnerRotation();
            var buttonValue = this.innerText;
            
            if (buttonValue === spinnerRotation) {
                score++;
                updateScore();
            } else {
                endGame();
            }

startGame();
        }

function getSpinnerRotation() {
            var spinner = document.getElementById("spinner");
            var transform = spinner.style.transform;
            var regex = /rotate\(([\-\d]+)deg\)/;
            var matches = regex.exec(transform);
            
            if (matches && matches.length > 1) {
                return getSpinnerValue(parseInt(matches[1]));
            }
            
            return getSpinnerValue(0);
        }

function updateScore() {
            var scoreElement = document.getElementById("score");
            scoreElement.innerHTML = score;
        }

function endGame() {
            alert("Game Over! Your final score is: " + score);
            score = 0;
            updateScore();
        }
    </script>
</body>
</html>