Bubble Bobble type game's game

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

No:5997

1706

←

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>
```