AI game creator

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

No:27916

←

Prev Next

→

Billiards
Developer User13929｜Date and time 23/12/10 3:14:40
Build time 16.449 sec｜Game capacity 1.707KB｜

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>Billiards Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="billiardsCanvas" width="400" height="400"></canvas>

// Define Ball object
    class Ball {
      constructor(x, y, radius, color, dx, dy) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.dx = dx;
        this.dy = dy;
      }

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

move() {
        this.x += this.dx;
        this.y += this.dy;

// Reverse direction on collision with walls
        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
          this.dx = -this.dx;
        }
        if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
          this.dy = -this.dy;
        }
      }
    }

// Create Ball objects
    const ball1 = new Ball(200, 200, 20, "red", 2, -3);
    const ball2 = new Ball(100, 100, 15, "blue", 3, 2);

function drawBalls() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ball1.draw();
      ball2.draw();
    }

function moveBalls() {
      ball1.move();
      ball2.move();
    }

function gameLoop() {
      drawBalls();
      moveBalls();
      requestAnimationFrame(gameLoop);
    }

// Start the game
    gameLoop();
  </script>
</body>
</html>