AI game creator

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

No:7258

3922

←

Prev Next

→

bubble shoot
Developer User3994｜Date and time 23/7/6 17:19:01
Build time 24.162 sec｜Game capacity 3.472KB｜

Script

了解しました。以下に、バブルシュート風のゲームの実装例を示します。

このコードは、矢印キーで操作できるシューター（赤い長方形）を使って、バブル（青い円）を撃ち落とすゲームです。矢印キーの左右でシューターの移動、スペースキーでバブルの発射が行えます。バブルがシューターに当たるとゲームオーバーとなり、画面に「Game Over」と表示されます。ご希望の要件を満たしているか確認のほどよろしくお願いいたします。

←

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 Shoot</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

canvas {
      background-color: #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// バブルの作成
    function createBubble() {
      const bubble = {
        x: Math.random() * (canvas.width - bubbleRadius * 2) + bubbleRadius,
        y: canvas.height,
        dx: (Math.random() - 0.5) * bubbleSpeed,
        dy: -bubbleSpeed,
        radius: bubbleRadius
      };
      bubbles.push(bubble);
    }

// ゲームオーバー
    function gameOver() {
      gameover = true;
      context.font = "30px Arial";
      context.fillStyle = "#fff";
      context.fillText("Game Over", canvas.width / 2 - 80, canvas.height / 2);
    }

// ゲームのメインループ
    function gameLoop() {
      context.clearRect(0, 0, canvas.width, canvas.height);

// バブルの描画
      bubbles.forEach((bubble, index) => {
        context.beginPath();
        context.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI * 2);
        context.fillStyle = bubbleColor;
        context.fill();
        context.closePath();

bubble.x += bubble.dx;
        bubble.y += bubble.dy;

// バブルが画面外に出た場合は削除
        if (bubble.y < 0 || bubble.y > canvas.height) {
          bubbles.splice(index, 1);
        }
      });

// プレイヤーの描画
      context.fillStyle = shooterColor;
      context.fillRect(shooterX, canvas.height - shooterHeight, shooterWidth, shooterHeight);

// ゲームオーバー判定
      bubbles.forEach((bubble) => {
        if (bubble.y + bubble.radius > canvas.height - shooterHeight && bubble.x > shooterX && bubble.x < shooterX + shooterWidth) {
          gameOver();
        }
      });

if (!gameover) {
        requestAnimationFrame(gameLoop);
      }
    }

// イベントリスナー
    document.addEventListener("keydown", (event) => {
      if (event.key === "ArrowLeft" && shooterX > 0) {
        shooterX -= shooterSpeed;
      }
      if (event.key === "ArrowRight" && shooterX + shooterWidth < canvas.width) {
        shooterX += shooterSpeed;
      }
      if (event.key === " ") {
        createBubble();
      }
    });

// メイン処理開始
    createBubble();
    gameLoop();
  </script>
</body>
</html>
```

このコードは、矢印キーで操作できるシューター（赤い長方形）を使って、バブル（青い円）を撃ち落とすゲームです。矢印キーの左右でシューターの移動、スペースキーでバブルの発射が行えます。バブルがシューターに当たるとゲームオーバーとなり、画面に「Game Over」と表示されます。

ご希望の要件を満たしているか確認のほどよろしくお願いいたします。