AI game creator

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

No:23597

←

Prev Next

→

Billiards
Developer User11042｜Date and time 23/11/2 1:09:36
Build time 61.905 sec｜Game capacity 3.721KB｜

Script

Sure! Below is an example of a simplified billiards game implemented in a single HTML file using JavaScript. Please note that you might need to adjust the game mechanics and styling according to your requirements.

This example creates a billiards game where you can drag the red ball using touch/mouse input. The goal is to avoid pocketing the ball into the black hole (pocket). When the ball enters the pocket, the game restarts. The code uses HTML5 canvas and basic collision detection to achieve this simple gameplay.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

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

// Initialize the game
    function init() {
      canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");
      
      // Ball and pocket objects
      ball = {
        x: canvas.width / 2,
        y: canvas.height - 50,
        radius: 15,
        color: "red"
      };

pocket = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 25,
        color: "black"
      };

isDragging = false;

// Event listeners for mouse/touch input
      canvas.addEventListener("mousedown", startDragging);
      canvas.addEventListener("mousemove", dragBall);
      canvas.addEventListener("mouseup", stopDragging);
      canvas.addEventListener("touchstart", startDragging);
      canvas.addEventListener("touchmove", dragBall);
      canvas.addEventListener("touchend", stopDragging);

// Start the game loop
      requestAnimationFrame(gameLoop);
    }

// Game loop
    function gameLoop() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the pocket
      ctx.beginPath();
      ctx.arc(pocket.x, pocket.y, pocket.radius, 0, Math.PI * 2);
      ctx.fillStyle = pocket.color;
      ctx.fill();
      ctx.closePath();

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

// Check if the ball is in the pocket
      if (isBallInPocket()) {
        alert("Game over! You pocketed the ball!");
        init(); // Restart the game
      }

// Continue the game loop
      requestAnimationFrame(gameLoop);
    }

// Check if the ball is in the pocket
    function isBallInPocket() {
      const distance = Math.sqrt(Math.pow(ball.x - pocket.x, 2) + Math.pow(ball.y - pocket.y, 2));
      return distance < pocket.radius - ball.radius;
    }

// Start dragging the ball
    function startDragging(e) {
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

if (isPointInsideBall(x, y)) {
        offsetX = ball.x - x;
        offsetY = ball.y - y;
        isDragging = true;
      }
    }

// Drag the ball
    function dragBall(e) {
      if (isDragging) {
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

ball.x = x + offsetX;
        ball.y = y + offsetY;
      }
    }

// Stop dragging the ball
    function stopDragging() {
      isDragging = false;
    }

// Check if a point is inside the ball
    function isPointInsideBall(x, y) {
      const distance = Math.sqrt(Math.pow(x - ball.x, 2) + Math.pow(y - ball.y, 2));
      return distance < ball.radius;
    }

// Start the game
    init();
  </script>
</body>
</html>
```