AI game creator

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

No:5882

7662

←

Prev Next

→

bubble bobble
Developer もちきなこ｜Date and time 23/7/1 0:55:28
Build time 43.124 sec｜Game capacity 4.829KB｜

Script

了解しました。以下にBubble Bobble風のゲームの実装例を示します。

このゲームでは、プレイヤー（赤い円）がバブル（青い円）と衝突することでプレイヤーのサイズが大きくなっていきます。プレイヤーの移動は、「↑」「↓」「←」「→」の矢印キーを使用します。プレイヤーのサイズが最大まで大きくなる前に、バブルに接触せずにゲームオーバーにならないように注意して遊んでください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

了解しました。以下にBubble Bobble風のゲームの実装例を示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bubble Bobble Game</title>
  <style>
    #canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    
    const player = {
      x: width / 2,
      y: height - 50,
      radius: 20,
      speed: 5,
      dx: 0,
      dy: 0
    };
    
    let bubbles = [];
    let gameover = false;
    
    // ゲームオーバー時に実行する関数
    function gameOver() {
      gameover = true;
      ctx.font = '40px Arial';
      ctx.fillText('Game Over', width / 2 - 100, height / 2);
    }
    
    // キー入力に基づきプレイヤーの移動を更新する関数
    function movePlayer() {
      if (player.x + player.dx > 0 && player.x + player.dx < width) {
        player.x += player.dx;
      }
      if (player.y + player.dy > 0 && player.y + player.dy < height) {
        player.y += player.dy;
      }
    }
    
    // プレイヤーとバブルの衝突判定を行う関数
    function checkCollision() {
      for (let i = 0; i < bubbles.length; i++) {
        const bubble = bubbles[i];
        const dx = player.x - bubble.x;
        const dy = player.y - bubble.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        
        if (distance < player.radius + bubble.radius) {
          bubbles.splice(i, 1);
          i--;
          if (player.radius <= 80) {
            player.radius += 10;
          } else {
            gameOver();
          }
        }
      }
    }
    
    // バブルを描画する関数
    function drawBubbles() {
      for (let bubble of bubbles) {
        ctx.beginPath();
        ctx.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI * 2);
        ctx.fillStyle = 'blue';
        ctx.fill();
        ctx.closePath();
      }
    }
    
    // プレイヤーを描画する関数
    function drawPlayer() {
      ctx.beginPath();
      ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
      ctx.fillStyle = 'red';
      ctx.fill();
      ctx.closePath();
    }
    
    // キーボードの入力に応じてプレイヤーの移動量を更新する関数
    function handleKeyDown(event) {
      if (event.key === 'ArrowUp') {
        player.dy = -player.speed;
      } else if (event.key === 'ArrowDown') {
        player.dy = player.speed;
      } else if (event.key === 'ArrowLeft') {
        player.dx = -player.speed;
      } else if (event.key === 'ArrowRight') {
        player.dx = player.speed;
      }
    }
    
    // キーボードの入力が終了したらプレイヤーの移動量を初期化する関数
    function handleKeyUp(event) {
      if (
        event.key === 'ArrowUp' ||
        event.key === 'ArrowDown' ||
        event.key === 'ArrowLeft' ||
        event.key === 'ArrowRight'
      ) {
        player.dx = 0;
        player.dy = 0;
      }
    }
    
    // バブルの生成と位置の更新を行う関数
    function updateBubbles() {
      if (Math.random() < 0.05) {
        const bubble = {
          x: Math.random() * (width - 2 * player.radius) + player.radius,
          y: height + player.radius,
          radius: Math.random() * (player.radius - 10) + 10,
          speed: Math.random() * (10 - 1) + 1
        };
        bubbles.push(bubble);
      }
      
      for (let bubble of bubbles) {
        bubble.y -= bubble.speed;
        if (bubble.y < -bubble.radius) {
          bubbles.shift();
        }
      }
    }
    
    // ゲームのメイン処理を行う関数
    function gameLoop() {
      if (!gameover) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        movePlayer();
        checkCollision();
        drawBubbles();
        drawPlayer();
        updateBubbles();
        
        requestAnimationFrame(gameLoop);
      }
    }
    
    // ゲーム開始時の処理
    function init() {
      document.addEventListener('keydown', handleKeyDown);
      document.addEventListener('keyup', handleKeyUp);
      
      gameLoop();
    }
    
    init();
  </script>
</body>
</html>
```