AI game creator

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

No:40661

←

Prev Next

→

Billiards
Developer User18222｜Date and time 24/2/3 21:23:04
Build time 11.584 sec｜Game capacity 3.067KB｜

Script

Sure! Here's an example of a simple billiards game implemented using HTML, CSS, and JavaScript:

This code will display a billiards table with two balls bouncing around and three pockets. The balls will collide with the walls and reverse their directions, and if they collide with a pocket, they will disappear from the canvas. You can add more balls or customize the colors and positions of the balls and pockets as needed.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure! Here's an example of a simple billiards game implemented using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Billiards Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #canvas {
      background-color: #ffffff;
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

let balls = [
      { x: 50, y: 50, vx: 2, vy: 1, color: '#ff0000' },
      { x: 200, y: 150, vx: -1, vy: 2, color: '#00ff00' },
      // Add more balls if desired...
    ];

const pockets = [
      { x: 20, y: 20 },
      { x: canvas.width - 20, y: 20 },
      { x: canvas.width / 2, y: canvas.height - 20 },
    ];

function drawBall(x, y, color) {
      context.beginPath();
      context.arc(x, y, ballRadius, 0, Math.PI * 2);
      context.fillStyle = color;
      context.fill();
      context.closePath();
    }

function drawPockets() {
      pockets.forEach(pocket => {
        context.beginPath();
        context.arc(pocket.x, pocket.y, pocketRadius, 0, Math.PI * 2);
        context.fillStyle = '#000000';
        context.fill();
        context.closePath();
      });
    }

function drawTable() {
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw balls
      balls.forEach(ball => {
        drawBall(ball.x, ball.y, ball.color);
      });

// Draw pockets
      drawPockets();
    }

function updateBallPosition(ball) {
      ball.x += ball.vx;
      ball.y += ball.vy;

// Check ball collisions with walls
      if (ball.x + ballRadius > canvas.width || ball.x - ballRadius < 0) {
        ball.vx *= -1; // Reverse horizontal velocity
      }
      if (ball.y + ballRadius > canvas.height || ball.y - ballRadius < 0) {
        ball.vy *= -1; // Reverse vertical velocity
      }

// Check ball collisions with pockets
      pockets.forEach(pocket => {
        const dx = ball.x - pocket.x;
        const dy = ball.y - pocket.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < pocketRadius - ballRadius) {
          // Ball pocketed
          ball.x = -100; // Move the ball out of canvas
          ball.y = -100;
        }
      });
    }

function gameLoop() {
      updateBallPosition(balls[0]); // Update first ball position

drawTable(); // Draw the table

requestAnimationFrame(gameLoop); // Call this function again on next frame
    }

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