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

No:33512

←

Prev Next

→

ビリヤード
Developer User14508｜Date and time 24/1/4 16:19:17
Build time 24.747 sec｜Game capacity 2.056KB｜

Script

ビリヤードゲーム

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ビリヤードゲーム</title>
</head>
<body>
  <h1>ビリヤードゲーム</h1>
  <canvas id="gameCanvas" width="800" height="400"></canvas>

draw(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
      }
    }

// ゲームの初期設定
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    const balls = [];

// ボールを生成
    for (let i = 0; i < 3; i++) {
      const x = Math.random() * (canvas.width - 100) + 50;
      const y = Math.random() * (canvas.height - 100) + 50;
      const radius = 20;
      const color = "rgb(" + Math.random() * 255 + "," + Math.random() * 255 + "," + Math.random() * 255 + ")";
      balls.push(new Ball(x, y, radius, color));
    }

// ゲームのメインループ
    function gameLoop() {
      // キャンバスをクリア
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// ボールを描画
      balls.forEach(ball => {
        ball.draw(ctx);
      });

// ボールを移動
      balls.forEach(ball => {
        ball.x += ball.dx;
        ball.y += ball.dy;

// 壁との衝突判定
        if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
          ball.dx *= -1;
        }

if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
          ball.dy *= -1;
        }
      });

// 次のフレームを予約
      requestAnimationFrame(gameLoop);
    }

// ゲーム開始
    gameLoop();
  </script>
</body>
</html>