AI game creator

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

No:15575

←

Prev Next

→

Billiards
Developer User6688｜Date and time 23/9/10 2:00:22
Build time 31.906 sec｜Game capacity 3.118KB｜

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

// Pictogram image sources
      const cueImageSrc = 'https://example.com/cue.png';
      const ballImageSrc = 'https://example.com/ball.png';
      const holeImageSrc = 'https://example.com/hole.png';

// Pictogram images
      const cueImage = new Image();
      cueImage.src = cueImageSrc;
      const ballImage = new Image();
      ballImage.src = ballImageSrc;
      const holeImage = new Image();
      holeImage.src = holeImageSrc;

// Ball object
      const ball = {
        x: tableWidth / 2,
        y: tableHeight / 2,
        speedX: 2,
        speedY: 2,
        updatePosition() {
          this.x += this.speedX;
          this.y += this.speedY;
        },
        draw() {
          ctx.drawImage(ballImage, this.x - ballRadius, this.y - ballRadius, ballRadius * 2, ballRadius * 2);
        }
      };

// Hole objects
      const holes = [
        { x: 50, y: 50 },
        { x: tableWidth - 50, y: 50 },
        { x: tableWidth / 2, y: tableHeight - 50 }
      ];

function drawTable() {
        ctx.clearRect(0, 0, tableWidth, tableHeight);
        ctx.fillStyle = '#008000'; // green color for the table
        ctx.fillRect(0, 0, tableWidth, tableHeight);

// Draw holes
        ctx.drawImage(holeImage, holes[0].x - ballRadius, holes[0].y - ballRadius, ballRadius * 2, ballRadius * 2);
        ctx.drawImage(holeImage, holes[1].x - ballRadius, holes[1].y - ballRadius, ballRadius * 2, ballRadius * 2);
        ctx.drawImage(holeImage, holes[2].x - ballRadius, holes[2].y - ballRadius, ballRadius * 2, ballRadius * 2);

// Draw ball
        ball.draw();

// Draw cue
        ctx.drawImage(cueImage, ball.x + ballRadius, ball.y - ballRadius, ballRadius * 3, ballRadius * 2);
      }

function updateGame() {
        ball.updatePosition();

// Check for collision with holes
        holes.forEach((hole) => {
          const dx = ball.x - hole.x;
          const dy = ball.y - hole.y;
          const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < ballRadius) {
            alert('Game Over! You lost.');
            document.location.reload();
          }
        });

// Check for collision with table boundaries
        if (ball.x + ball.speedX > tableWidth - ballRadius || ball.x + ball.speedX < ballRadius) {
          ball.speedX = -ball.speedX;
        }
        if (ball.y + ball.speedY > tableHeight - ballRadius || ball.y + ball.speedY < ballRadius) {
          ball.speedY = -ball.speedY;
        }

drawTable();
      }

setInterval(updateGame, 10);
    </script>
  </body>
</html>