Create a game for you click faster in the notes or you died and you are a boy and some monsters apears and you have to click in the notes's game

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

No:17648

111

←

Prev Next

→

Create a game for you click faster in the notes or..ALL
Developer User7751｜Date and time 23/9/24 5:17:17
Build time 26.337 sec｜Game capacity 3.467KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Click Faster Game</title>
<style>
    #game-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
    }
    
    #score {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    #notes-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    
    .note {
        width: 80px;
        height: 80px;
        background-color: #ffcc00;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        cursor: pointer;
    }
</style>
</head>
<body>
<script>
    // Game configuration
    const NUM_NOTES = 9;
    const TIME_LIMIT = 20;
    
    // Game variables
    let score = 0;
    let timeLeft = TIME_LIMIT;
    let isGameOver = false;
    
    // Function to create the game UI
    function createGameUI() {
        const gameContainer = document.createElement('div');
        gameContainer.id = 'game-container';
        
        const scoreElement = document.createElement('div');
        scoreElement.id = 'score';
        scoreElement.textContent = 'Score: 0';
        gameContainer.appendChild(scoreElement);
        
        const notesContainer = document.createElement('div');
        notesContainer.id = 'notes-container';
        
        for (let i = 0; i < NUM_NOTES; i++) {
            const note = createNote();
            notesContainer.appendChild(note);
        }
        gameContainer.appendChild(notesContainer);
        
        document.body.appendChild(gameContainer);
        
        updateTimer();
        startGame();
    }
    
    // Function to create a note element
    function createNote() {
        const note = document.createElement('div');
        note.className = 'note';
        note.textContent = '🎵';
        note.addEventListener('click', () => {
            if (!isGameOver) {
                score++;
                document.getElementById('score').textContent = 'Score: ' + score;
                note.style.display = 'none';
            }
        });
        return note;
    }
    
    // Function to update the game timer
    function updateTimer() {
        if (!isGameOver) {
            document.getElementById('score').textContent = 'Score: ' + score;
            if (timeLeft >= 0) {
                setTimeout(updateTimer, 1000);
                timeLeft--;
            } else {
                endGame();
            }
        }
    }
    
    // Function to start the game
    function startGame() {
        const notes = document.getElementsByClassName('note');
        for (let i = 0; i < notes.length; i++) {
            notes[i].style.display = 'block';
        }
    }
    
    // Function to end the game
    function endGame() {
        isGameOver = true;
        const notes = document.getElementsByClassName('note');
        for (let i = 0; i < notes.length; i++) {
            notes[i].style.display = 'none';
        }
        alert('Game Over! Your score: ' + score);
    }
    
    // Create the game UI on page load
    window.onload = function() {
        createGameUI();
    };
</script>
</body>
</html>