Firework animation with button's game

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

No:11904

101

←

Prev Next

→

Firework animation with button
Developer User4917｜Date and time 23/8/13 2:59:05
Build time 19.1 sec｜Game capacity 2.455KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Feux d'artifice</title>
    <style>
        #firework {
            width: 500px;
            height: 500px;
            background-color: black;
            position: relative;
        }
        .firework-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            background-color: #ff3366;
        }
        #start-button {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div id="firework"></div>

<button id="start-button">Commencer</button>

// Fonction pour créer un feu d'artifice à une position donnée
        function createFirework(x, y) {
            let firework = document.createElement('div');
            firework.className = 'firework-dot';
            firework.style.left = x + 'px';
            firework.style.top = y + 'px';
            document.getElementById('firework').appendChild(firework);

// Animation du feu d'artifice
            let animation = firework.animate([
                { transform: 'scale(1)' },
                { transform: 'scale(1.5)', opacity: 0 }
            ], {
                duration: 1500,
                easing: 'ease-out'
            });

// Supprimer le feu d'artifice après l'animation
            animation.onfinish = function() {
                firework.remove();
            }
        }

// Fonction pour démarrer les feux d'artifice
        function startFireworks() {
            let fireworkContainer = document.getElementById('firework');

// Créer plusieurs feux d'artifice à des positions aléatoires
            for (let i = 0; i < 50; i++) {
                let x = getRandomNumber(0, fireworkContainer.offsetWidth);
                let y = getRandomNumber(0, fireworkContainer.offsetHeight);
                createFirework(x, y);
            }
        }

// Lorsque le bouton est cliqué, démarrer les feux d'artifice
        document.getElementById('start-button').addEventListener('click', startFireworks);
    </script>
</body>
</html>