AI game creator

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

No:40814

←

Prev Next

→

Billiards
Developer User18270｜Date and time 24/2/4 6:18:20
Build time 13.73 sec｜Game capacity 3.819KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Billiards Game</title>
</head>
<body>
  <canvas id="billiardsCanvas" width="480" height="320"></canvas>

// Game objects
    var cueBall = {
      x: 50,
      y: 250,
      radius: 10,
      dx: Math.random() * 2 - 1, // Random initial direction
      dy: Math.random() * 2 - 1
    };

var coloredBalls = [
      { x: 300, y: 150, radius: 10, color: "red" },
      { x: 400, y: 250, radius: 10, color: "blue" },
      { x: 250, y: 220, radius: 10, color: "green" },
      { x: 350, y: 120, radius: 10, color: "yellow" }
      // Add more colored balls if desired
    ];

// Keyboard controls
    var leftArrowPressed = false;
    var rightArrowPressed = false;
    var upArrowPressed = false;
    var downArrowPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

// Update game objects and handle collisions
    function update() {
      // Move the cue ball
      if (leftArrowPressed) {
        cueBall.x -= 2;
      } else if (rightArrowPressed) {
        cueBall.x += 2;
      } else if (upArrowPressed) {
        cueBall.y -= 2;
      } else if (downArrowPressed) {
        cueBall.y += 2;
      }

// Move the colored balls
      coloredBalls.forEach(function(ball) {
        ball.x += ball.dx;
        ball.y += ball.dy;

// Check collisions with walls
        if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
          ball.dx = -ball.dx;
        }
        if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
          ball.dy = -ball.dy;
        }
      });

// Check collisions between balls
      coloredBalls.forEach(function(ball) {
        var dx = cueBall.x - ball.x;
        var dy = cueBall.y - ball.y;
        var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < cueBall.radius + ball.radius) {
          // Collision occurred
          // Perform any desired action, such as removing the ball or deducting points
          console.log("Collision occurred between cue ball and colored ball");
        }
      });
    }

// Render the game objects on the canvas
    function render() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the cue ball
      context.beginPath();
      context.arc(cueBall.x, cueBall.y, cueBall.radius, 0, Math.PI * 2);
      context.fillStyle = "white";
      context.fill();
      context.closePath();

// Draw the colored balls
      coloredBalls.forEach(function(ball) {
        context.beginPath();
        context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        context.fillStyle = ball.color;
        context.fill();
        context.closePath();
      });
    }

// Game loop
    function gameLoop() {
      update();
      render();
      requestAnimationFrame(gameLoop);
    }

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