AI game creator

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

No:12856

108

←

Prev Next

→

bubble shooter
Developer User5583｜Date and time 23/8/23 23:47:45
Build time 32.817 sec｜Game capacity 2.859KB｜

Script

了解です。以下にBubble Shooterを実装したHTMLファイルの例を記述します。

このHTMLファイルをブラウザで開くと、ゲームボード上に表示されている赤い円が爆弾を表しています。スマートフォンで画面をタップすると、その位置に新しい爆弾が追加されます。追加された爆弾はアニメーションとして動き始め、画面外に出ると消えます。以上が、Bubble Shooterとして遊ぶことができるプログラムです。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

了解です。以下にBubble Shooterを実装したHTMLファイルの例を記述します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bubble Shooter</title>
  <style>
    #game-board {
      width: 400px;
      height: 400px;
      background-color: #f0f0f0;
      position: relative;
    }
    
    .bubble {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background-color: #ff0000;
      position: absolute;
      left: 190px;
      bottom: 30px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div class="bubble"></div>
  </div>

// 爆弾を描画する関数
    function drawBombs() {
      var gameBoard = document.getElementById("game-board");

// 爆弾を一度全て削除する
      var existingBombs = gameBoard.getElementsByClassName("bubble");
      while (existingBombs.length > 0) {
        existingBombs[0].parentNode.removeChild(existingBombs[0]);
      }

// 爆弾を描画する
      for (var i = 0; i < bombs.length; i++) {
        var bomb = document.createElement("div");
        bomb.className = "bubble";
        bomb.style.left = bombs[i].x + "px";
        bomb.style.bottom = bombs[i].y + "px";
        gameBoard.appendChild(bomb);
      }
    }

// 爆弾のアニメーションを実行する関数
    function animateBombs() {
      for (var i = 0; i < bombs.length; i++) {
        bombs[i].x += bombs[i].vx;
        bombs[i].y += bombs[i].vy;
      }

drawBombs();
      requestAnimationFrame(animateBombs);
    }

// クリックした位置に新しい爆弾を追加する関数
    function addBomb(x, y) {
      var bomb = {
        x: x,
        y: y,
        vx: (Math.random() - 0.5) * 10,
        vy: (Math.random() - 0.5) * 10
      };

bombs.push(bomb);
    }

// タッチイベントで爆弾をクリックした時の処理を行う
    document.getElementById("game-board").addEventListener("touchend", function(event) {
      var touch = event.changedTouches[0];
      var x = touch.clientX - event.target.offsetLeft;
      var y = event.target.offsetHeight - (touch.clientY - event.target.offsetTop);
      addBomb(x, y);
    });

// ゲームを開始する
    animateBombs();
  </script>
</body>
</html>
```