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

No:94

282

←

Prev Next

→

balloon splitting
Developer User1819｜Date and time 23/5/15 1:59:38
Build time 45.473 sec｜Game capacity 2.743KB｜

Script

風船割り

風船をクリックして割ろう！

Score: 0

【ゲームの概要】風船をクリックして割るゲームです。スコアを計算して表示します。風船を割ったあとは、別の風船が自動で表示されます。スマホでも遊べるように、風船をクリックするだけのシンプルな操作になっています。絵文字を多めに使って、かわいらしさをアピールしています。

←

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>風船割り</title>
        <style>
            body {
                text-align: center;
                background-color: #87CEFA;
            }
            #balloon {
                width: 150px;
                height: 200px;
                position: relative;
                margin: 0 auto;
            }
            #balloon:hover {
                cursor: pointer;
            }
            #balloon:before {
                content: "";
                display: block;
                width: 0;
                height: 0;
                border-top: 75px solid #FFD700;
                border-left: 75px solid transparent;
                border-right: 75px solid transparent;
                position: absolute;
                top: -75px;
                left: 0;
                z-index: 1;
                border-radius: 50% 50% 0 0;
            }
            #balloon:after {
                content: "";
                display: block;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                background-color: #FF4500;
                position: absolute;
                bottom: 0;
                left: 62.5px;
                z-index: 2;
            }
        </style>
    </head>
    <body>
        <h1>風船割り</h1>
        <p>風船をクリックして割ろう！</p>
        <div id="balloon"></div>
        <script>
            var balloon = document.getElementById("balloon");
            var score = 0;
            balloon.addEventListener("click", function() {
                balloon.style.display = "none";
                score++;
                var newBalloon = document.createElement("div");
                newBalloon.id = "balloon";
                document.body.appendChild(newBalloon);
                newBalloon.addEventListener("click", function() {
                    newBalloon.style.display = "none";
                    score++;
                });
            });
            function updateScore() {
                var scoreDisplay = document.getElementById("score");
                scoreDisplay.innerHTML = "Score: " + score;
            }
            setInterval(updateScore, 100);
        </script>
        <p id="score">Score: 0</p>
    </body>
</html>

【ゲームの概要】
風船をクリックして割るゲームです。スコアを計算して表示します。風船を割ったあとは、別の風船が自動で表示されます。スマホでも遊べるように、風船をクリックするだけのシンプルな操作になっています。絵文字を多めに使って、かわいらしさをアピールしています。