AI game creator

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

No:6145

1251

←

Prev Next

→

(*>д<)
Developer sayaensm｜Date and time 23/7/1 17:55:04
Build time 27.147 sec｜Game capacity 2.541KB｜

Script

了解です！では、シンプルなバブルゲームを作ってみましょう。以下のコードを1枚のHTMLファイルに貼り付けてください。

このコードでは、画面上にバブルが現れ、それをクリックすることでスコアが加算されます。バブルがクリックされるたびにスコアが増え、バブルは消えます。バブルは1秒ごとにランダムな位置に出現します。お手持ちのスマホやブラウザ上でこのHTMLファイルを開いて、バブルゲームを楽しんでください！絵文字を使用しているため、バブルの代わりに違う絵文字を表示させることも可能です。お好きなようにカスタマイズしてみてください。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解です！では、シンプルなバブルゲームを作ってみましょう。以下のコードを1枚のHTMLファイルに貼り付けてください。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>バブルゲーム</title>
  <style>
    body {
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    #game-container {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .bubble {
      position: absolute;
      font-size: 40px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>

var addBubble = function (x, y) {
      var bubble = document.createElement("div");
      bubble.classList.add("bubble");
      bubble.style.left = x + "px";
      bubble.style.top = y + "px";
      bubble.textContent = "🔵";
      bubble.addEventListener("click", function () {
        score += 1;
        bubble.remove();
        updateScore();
      });
      gameContainer.appendChild(bubble);
    };

var updateScore = function () {
      var scoreElement = document.getElementById("score");
      scoreElement.textContent = "スコア: " + score;
    };

var randomPosition = function () {
      var maxX = window.innerWidth - 100;
      var maxY = window.innerHeight - 100;
      var minX = 0;
      var minY = 0;
      var x = Math.floor(Math.random() * (maxX - minX + 1)) + minX;
      var y = Math.floor(Math.random() * (maxY - minY + 1)) + minY;
      return { x: x, y: y };
    };

setInterval(function () {
      var position = randomPosition();
      addBubble(position.x, position.y);
    }, 1000);
  </script>
</body>
</html>
```

このコードでは、画面上にバブルが現れ、それをクリックすることでスコアが加算されます。バブルがクリックされるたびにスコアが増え、バブルは消えます。バブルは1秒ごとにランダムな位置に出現します。

お手持ちのスマホやブラウザ上でこのHTMLファイルを開いて、バブルゲームを楽しんでください！絵文字を使用しているため、バブルの代わりに違う絵文字を表示させることも可能です。お好きなようにカスタマイズしてみてください。