bursting flower and fire's game

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

No:7436

6954

←

Prev Next

→

bursting flower and fire
Developer User4030｜Date and time 23/7/7 19:28:39
Build time 13.325 sec｜Game capacity 2.322KB｜

Script

了解しました。以下に爆裂花火として遊べるゲームの実装例を示します。

この実装では、画面をタッチすると指の位置に花火エフェクトが表示されます。花火エフェクトは、小さく始まって徐々に大きくなり、最終的に消えるように設定されています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

了解しました。以下に爆裂花火として遊べるゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>爆裂花火</title>
    <style>
        #fireworks {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
        }

.firework {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #FF4500;
            border-radius: 50%;
            animation-name: explode;
            animation-duration: 1s;
            animation-timing-function: ease-out;
        }

@keyframes explode {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(20);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div id="fireworks"></div>

// スマホのタッチ操作を設定
            fireworksContainer.addEventListener("touchstart", function (e) {
                e.preventDefault();

const x = e.touches[0].clientX;
                const y = e.touches[0].clientY;

createFirework(x, y);
            });

function createFirework(x, y) {
                // 花火エフェクトを生成
                const firework = document.createElement("div");
                firework.className = "firework";
                firework.style.left = x + "px";
                firework.style.top = y + "px";
                fireworksContainer.appendChild(firework);

// 花火が終了したら要素を削除
                firework.addEventListener("animationend", function () {
                    firework.remove();
                });
            }
        });
    </script>
</body>
</html>
```