AI game creator

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

No:181

209

←

Prev Next

→

blow soap bubbles
Developer User2908｜Date and time 23/6/4 3:32:42
Build time 70.37 sec｜Game capacity 3.769KB｜

Script

ゲームの概要：プレイヤーは画面上部から現れるシャボン玉をタップして破裂させることが目的です。スマホで操作可能な操作性を重視し、タップによるシンプルなアクションゲームとして実装しました。以下がゲームをプロトタイプとして実装したJavaScriptコードです。

このコードをブラウザで開くと、シャボン玉がランダムに生成されて画面上に動くようになります。プレイヤーはタップしてバブルを破裂させ、スコアを獲得することができます。スマホでプレイする場合、スマホの画面サイズに合わせたレスポンシブデザインが採用されています。また、スコア表示などのUIはシンプルな絵文字を多用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

ゲームの概要：プレイヤーは画面上部から現れるシャボン玉をタップして破裂させることが目的です。スマホで操作可能な操作性を重視し、タップによるシンプルなアクションゲームとして実装しました。

以下がゲームをプロトタイプとして実装したJavaScriptコードです。

```html
<!DOCTYPE html>
<html>
<head>
    <title>シャボン玉ゲーム</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #game-board {
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            background: #DDDDDD;
            border: 2px solid #999;
        }

.bubble {
            position: absolute;
            background: #15b;
            border-radius: 50%;
            font-size: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="game-board">
    </div>

var gameBoard = document.getElementById('game-board');
        var bubbles = [];
        var score = 0;

gameBoard.addEventListener('click', function(event) {
            var target = event.target;
            if (target.classList.contains('bubble')) {
                var index = target.getAttribute('data-index');
                popBubble(index);
            }
        });

setInterval(function() {
            addBubble();
        }, 1000);

setInterval(function() {
            deleteBubbles();
        }, 1000);

function createBubble() {
            var size = Math.floor(Math.random() * MAX_BUBBLE_SIZE) + MAX_BUBBLE_SIZE / 2;
            var bubble = document.createElement('div');
            bubble.classList.add('bubble');
            bubble.setAttribute('data-index', bubbles.length);
            bubble.style.width = size + 'px';
            bubble.style.height = size + 'px';
            bubble.innerHTML = '💧'; // 爆弾の絵文字
            return bubble;
        }

function popBubble(index) {
            var bubble = bubbles[index];
            if (bubble) {
                bubbles.splice(index, 1);
                gameBoard.removeChild(bubble);
                score++;
            }
        }

</script>
</body>
</html>
```

このコードをブラウザで開くと、シャボン玉がランダムに生成されて画面上に動くようになります。プレイヤーはタップしてバブルを破裂させ、スコアを獲得することができます。

スマホでプレイする場合、スマホの画面サイズに合わせたレスポンシブデザインが採用されています。また、スコア表示などのUIはシンプルな絵文字を多用しています。