Lots of colorful balloons keep going up.'s game

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

No:7364

4244

←

Prev Next

→

Lots of colorful balloons keep going up.
Developer anonymous｜Date and time 70/1/1 9:40:34
Build time unknown sec｜Game capacity 2.434KB｜

Script

了解しました。以下のコードは、カラフルな風船が画面上にたくさん表示されるゲームです。スマートフォンで操作することを前提としており、JavaScriptとCSSを使って実装されています。

実際に上記のコードをHTMLファイルとして保存し、ブラウザで開くとカラフルな風船が画面上にたくさん表示され、クリックすると風船が割れるというゲームをプレイすることができます。風船が画面上から消えるまでに1秒かかります。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

了解しました。以下のコードは、カラフルな風船が画面上にたくさん表示されるゲームです。スマートフォンで操作することを前提としており、JavaScriptとCSSを使って実装されています。

```html
<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    .balloon {
        position: absolute;
        font-size: 20px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 50%;
        cursor: pointer;
        animation-name: fly;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
    }
    
    @keyframes fly {
        from { top: 100vh; }
        to { top: -10vh; }
    }
    
    .red {
        background-color: #ff5555;
    }
    
    .orange {
        background-color: #ff9900;
    }
    
    .yellow {
        background-color: #ffff33;
    }
    
    .green {
        background-color: #33cc33;
    }
    
    .blue {
        background-color: #3366ff;
    }
    
    .purple {
        background-color: #9933cc;
    }
</style>
</head>
<body>
    <script>
        var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
        
        function createBalloon() {
            var balloon = document.createElement("div");
            balloon.classList.add("balloon");
            var colorIndex = Math.floor(Math.random() * colors.length);
            balloon.classList.add(colors[colorIndex]);
            var leftPosition = Math.random() * window.innerWidth;
            balloon.style.left = leftPosition + "px";
            balloon.addEventListener("click", function() {
                balloon.classList.add("pop");
                setTimeout(function() {
                    balloon.remove();
                }, 1000);
            });
            document.body.appendChild(balloon);
        }
        
        setInterval(createBalloon, 1000);
    </script>
</body>
</html>
```

実際に上記のコードをHTMLファイルとして保存し、ブラウザで開くとカラフルな風船が画面上にたくさん表示され、クリックすると風船が割れるというゲームをプレイすることができます。風船が画面上から消えるまでに1秒かかります。