AI game creator

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

No:26436

←

Prev Next

→

Billiards
Developer User13116｜Date and time 23/11/30 18:46:35
Build time 110.204 sec｜Game capacity 4.62KB｜

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="500" height="500" style="border:1px solid black;"></canvas>

let cueBall = {
        x: 250,
        y: 250,
        radius: 10,
        color: "white",
        dx: 0,
        dy: 0,
      };

let balls = [
        { x: 100, y: 100, radius: 15, color: "red", dx: 0, dy: 0 },
        { x: 400, y: 100, radius: 15, color: "blue", dx: 0, dy: 0 },
        { x: 250, y: 400, radius: 15, color: "yellow", dx: 0, dy: 0 },
        { x: 100, y: 250, radius: 15, color: "green", dx: 0, dy: 0 },
        { x: 400, y: 250, radius: 15, color: "orange", dx: 0, dy: 0 },
        { x: 250, y: 100, radius: 15, color: "purple", dx: 0, dy: 0 },
      ];

let isDragging = false;
      let dragStartX;
      let dragStartY;

function drawCueBall() {
        context.beginPath();
        context.arc(cueBall.x, cueBall.y, cueBall.radius, 0, Math.PI * 2, false);
        context.fillStyle = cueBall.color;
        context.fill();
        context.closePath();
      }

function drawBalls() {
        balls.forEach((ball) => {
          context.beginPath();
          context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
          context.fillStyle = ball.color;
          context.fill();
          context.closePath();
        });
      }

function updatePositions() {
        cueBall.x += cueBall.dx;
        cueBall.y += cueBall.dy;

balls.forEach((ball) => {
          ball.x += ball.dx;
          ball.y += ball.dy;
        });
      }

function handleCollisions() {
        balls.forEach((ball, index) => {
          if (checkCollision(cueBall, ball)) {
            cueBall.dx = -cueBall.dx;
            cueBall.dy = -cueBall.dy;
          }

for (let i = index + 1; i < balls.length; i++) {
            if (checkCollision(ball, balls[i])) {
              ball.dx = -ball.dx;
              ball.dy = -ball.dy;
            }
          }
        });
      }

function checkCollision(ball1, ball2) {
        const dx = ball1.x - ball2.x;
        const dy = ball1.y - ball2.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

return distance < ball1.radius + ball2.radius;
      }

function handleWallCollision() {
        if (
          cueBall.x + cueBall.radius > canvas.width ||
          cueBall.x - cueBall.radius < 0
        ) {
          cueBall.dx = -cueBall.dx;
        }

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

balls.forEach((ball) => {
          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 draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

drawCueBall();
        drawBalls();

handleCollisions();
        handleWallCollision();
        updatePositions();

requestAnimationFrame(draw);
      }

function handleMouseDown(event) {
        if (
          event.clientX >= cueBall.x - cueBall.radius &&
          event.clientX <= cueBall.x + cueBall.radius &&
          event.clientY >= cueBall.y - cueBall.radius &&
          event.clientY <= cueBall.y + cueBall.radius
        ) {
          isDragging = true;
          dragStartX = event.clientX;
          dragStartY = event.clientY;
        }
      }

function handleMouseMove(event) {
        if (isDragging) {
          const dragEndX = event.clientX;
          const dragEndY = event.clientY;
          const dx = dragEndX - dragStartX;
          const dy = dragEndY - dragStartY;
          cueBall.x += dx;
          cueBall.y += dy;
          dragStartX = dragEndX;
          dragStartY = dragEndY;
        }
      }

function handleMouseUp() {
        isDragging = false;
        cueBall.dx = (cueBall.x - dragStartX) / 10;
        cueBall.dy = (cueBall.y - dragStartY) / 10;
      }

document.addEventListener("mousedown", handleMouseDown);
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);

draw();
    </script>
  </body>
</html>