AI game creator

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

No:22340

←

Prev Next

→

Billiards
Developer User10333｜Date and time 23/10/22 8:50:46
Build time 34.233 sec｜Game capacity 2.269KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      #canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>

// Define the balls for the billiards game
      var balls = [
        {
          color: "white",
          x: 250,
          y: 100,
          radius: 10,
          dx: 0,
          dy: 0,
        },
        {
          color: "red",
          x: 220,
          y: 300,
          radius: 10,
          dx: 2,
          dy: 1,
        },
        {
          color: "yellow",
          x: 250,
          y: 320,
          radius: 10,
          dx: -3,
          dy: 2,
        },
        {
          color: "blue",
          x: 280,
          y: 340,
          radius: 10,
          dx: 1,
          dy: -2,
        },
      ];

// Function to draw the balls
      function drawBalls() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < balls.length; i++) {
          var ball = balls[i];

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

// Function to update the positions of the balls
      function updatePositions() {
        for (var i = 0; i < balls.length; i++) {
          var ball = balls[i];

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

// Check for collisions with the canvas 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;
          }
        }
      }

// Function to handle the game loop
      function gameLoop() {
        updatePositions();
        drawBalls();
      }

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