Bubble Bobble type game's game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
Bubble Bobble type game's game | AI game creator

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

No:5997

1765

←

Prev Next

→

Bubble Bobble type game
Developer User3788｜Date and time 23/7/1 13:52:03
Build time 26.858 sec｜Game capacity 2.798KB｜

Script

了解しました。以下にバブルボブル系のゲームの実装例を示します。

こちらはシンプルなバブルボブル系のゲームの実装です。プレイヤーをスマホの方向キーで操作し、上から落ちてくるバブルを回避するというゲームです。バブルに当たると消えます。ただし、この実装は画面サイズに固定されており、スマホでプレイする場合は画面をタップして操作する必要があります。また、ゲームオーバーやスコアなどの機能は実装されていません。もし要望があれば追加いたしますので、ご連絡ください。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にバブルボブル系のゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bubble Bobble Game</title>
  <style>
    #game {
      width: 400px;
      height: 600px;
      position: relative;
      border: 1px solid black;
    }
    #player {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: yellow;
    }
    .bubble {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player"></div>
  </div>

let playerX = 200;
    let playerY = 500;

player.style.left = playerX + 'px';
    player.style.top = playerY + 'px';

// プレイヤーの操作
    document.addEventListener('keydown', (event) => {
      const key = event.key;
      if (key === 'ArrowLeft' && playerX > 0) {
        playerX -= 10;
      } else if (key === 'ArrowRight' && playerX < 360) {
        playerX += 10;
      } else if (key === 'ArrowUp' && playerY > 0) {
        playerY -= 10;
      } else if (key === 'ArrowDown' && playerY < 560) {
        playerY += 10;
      }
      player.style.left = playerX + 'px';
      player.style.top = playerY + 'px';
    });

// バブル作成
    setInterval(() => {
      const bubble = document.createElement('div');
      bubble.className = 'bubble';
      bubble.style.left = Math.random() * 360 + 'px';
      bubble.style.top = '0';
      game.appendChild(bubble);

// バブル移動
      let bubbleY = 0;
      setInterval(() => {
        if (bubbleY < 540) {
          bubbleY += 10;
          bubble.style.top = bubbleY + 'px';

// プレイヤーとの当たり判定
          if (bubbleY === 500 && Math.abs(playerX - bubble.offsetLeft) <= 30) {
            game.removeChild(bubble);
          }
        } else {
          game.removeChild(bubble);
        }
      }, 100);

}, 2000);

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