AI game creator

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

No:27303

←

Prev Next

→

Billiards
Developer User13247｜Date and time 23/12/6 2:49:53
Build time 57.081 sec｜Game capacity 3.594KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Bilhar</title>
    <style>
      #canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="600" height="400"></canvas>

const BALL_RADIUS = 15;
        const TABLE_COLOR = "#2ecc71";
        const BALL_COLORS = ["#3498db", "#f1c40f", "#e74c3c", "#9b59b6"];

const tableWidth = canvas.width;
        const tableHeight = canvas.height;
        const pocketsWidth = 50;
        const pocketsHeight = 50;

const pockets = [
          { x: 0, y: 0 }, // top-left
          { x: tableWidth / 2 - pocketsWidth / 2, y: 0 }, // top-middle
          { x: tableWidth - pocketsWidth, y: 0 }, // top-right
          { x: 0, y: tableHeight - pocketsHeight }, // bottom-left
          { x: tableWidth / 2 - pocketsWidth / 2, y: tableHeight - pocketsHeight }, // bottom-middle
          { x: tableWidth - pocketsWidth, y: tableHeight - pocketsHeight }, // bottom-right
        ];

let balls = [
          { x: tableWidth / 2, y: tableHeight / 2, color: BALL_COLORS[0] },
          { x: tableWidth / 2 - BALL_RADIUS * 2, y: tableHeight / 2 - BALL_RADIUS, color: BALL_COLORS[1] },
          { x: tableWidth / 2 + BALL_RADIUS * 2, y: tableHeight / 2 - BALL_RADIUS, color: BALL_COLORS[2] },
          { x: tableWidth / 2, y: tableHeight / 2 - BALL_RADIUS * 2, color: BALL_COLORS[3] },
        ];

function drawTable() {
          ctx.fillStyle = TABLE_COLOR;
          ctx.fillRect(0, 0, tableWidth, tableHeight);

ctx.fillStyle = "#000";
          pockets.forEach(function (pocket) {
            ctx.fillRect(pocket.x, pocket.y, pocketsWidth, pocketsHeight);
          });
        }

function drawBalls() {
          balls.forEach(function (ball) {
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, BALL_RADIUS, 0, 2 * Math.PI);
            ctx.fillStyle = ball.color;
            ctx.fill();
            ctx.strokeStyle = "#000";
            ctx.stroke();
          });
        }

function moveBalls() {
          balls.forEach(function (ball) {
            ball.x += Math.random() * 4 - 2;
            ball.y += Math.random() * 4 - 2;
          });

balls.forEach(function (ball) {
            // Handle collisions with walls
            if (ball.x <= BALL_RADIUS || ball.x >= tableWidth - BALL_RADIUS) {
              ball.x = Math.min(tableWidth - BALL_RADIUS, Math.max(BALL_RADIUS, ball.x));
            }
            if (ball.y <= BALL_RADIUS || ball.y >= tableHeight - BALL_RADIUS) {
              ball.y = Math.min(tableHeight - BALL_RADIUS, Math.max(BALL_RADIUS, ball.y));
            }

// Handle collisions with pockets
            pockets.forEach(function (pocket) {
              const dx = ball.x - (pocket.x + pocketsWidth / 2);
              const dy = ball.y - (pocket.y + pocketsHeight / 2);
              const distance = Math.sqrt(dx * dx + dy * dy);

if (distance <= BALL_RADIUS) {
                ball.x = tableWidth / 2;
                ball.y = tableHeight / 2;
              }
            });
          });
        }

function gameLoop() {
          ctx.clearRect(0, 0, tableWidth, tableHeight);
          drawTable();
          drawBalls();
          moveBalls();

requestAnimationFrame(gameLoop);
        }

gameLoop();
      });
    </script>
  </body>
</html>