AI game creator

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

No:15987

←

Prev Next

→

Billiards
Developer User7034｜Date and time 23/9/14 14:46:20
Build time 41.612 sec｜Game capacity 4.183KB｜

Script

Sure, let's create a simple billiards game using JavaScript within a single HTML file. The game will be designed for smartphone operation and will make use of pictograms. Here's an example implementation:

To play the game, you can save the above code in a file with an ".html" extension, open it in a web browser on a smartphone, and interact with the game by dragging the stick using your finger. The game involves hitting the white ball with the stick and trying to reach different targets or pockets, which can be implemented by extending the code further. Please note that this is just a basic implementation; additional features like scoring, pocket detection, and collision with other balls can be added to enhance the game.

←

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 {
      background-color: #007f00;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// Game initialization
    function init() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");

// Create ball object
      ball = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 12,
        color: "#ffffff",
        speedX: 0,
        speedY: 0
      };

// Create stick object
      stick = {
        x: ball.x,
        y: ball.y + 30,
        width: 10,
        height: 60,
        color: "#ffffff"
      };

// Event listeners
      canvas.addEventListener("mousedown", startDrag);
      canvas.addEventListener("mousemove", dragStick);
      canvas.addEventListener("mouseup", endDrag);
      canvas.addEventListener("touchstart", startDrag);
      canvas.addEventListener("touchmove", dragStick);
      canvas.addEventListener("touchend", endDrag);

// Start game loop
      update();
    }

// Game loop
    function update() {
      clearCanvas();

// Update ball position
      ball.x += ball.speedX;
      ball.y += ball.speedY;

// Apply friction
      ball.speedX *= 0.99;
      ball.speedY *= 0.99;

// Apply gravity
      ball.speedY += 0.1;

// Check boundaries
      if (ball.y + ball.radius > canvas.height) {
        ball.speedY *= -0.8;
        ball.y = canvas.height - ball.radius;
      }
      if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
        ball.speedX *= -0.8;
      }

// Draw ball
      drawBall(ball);

// Draw stick
      drawStick(stick);

requestAnimationFrame(update);
    }

// Clear canvas
    function clearCanvas() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    }

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

// Draw stick
    function drawStick(stick) {
      context.fillStyle = stick.color;
      context.fillRect(
        stick.x - stick.width / 2,
        stick.y,
        stick.width,
        stick.height
      );
    }

// Start stick dragging
    function startDrag(event) {
      isDragging = true;
    }

// Drag the stick
    function dragStick(event) {
      if (isDragging) {
        if (event.touches) {
          mouseX = event.touches[0].clientX - canvas.getBoundingClientRect().left;
          mouseY = event.touches[0].clientY - canvas.getBoundingClientRect().top;
        } else {
          mouseX = event.clientX - canvas.getBoundingClientRect().left;
          mouseY = event.clientY - canvas.getBoundingClientRect().top;
        }
        
        stick.x = mouseX;
        stick.y = mouseY;
      }
    }

// End stick dragging
    function endDrag() {
      isDragging = false;
      // Calculate ball speed based on stick position
      ball.speedX = (stick.x - ball.x) / 10;
      ball.speedY = (stick.y - ball.y) / 10;
    }

// Start the game
    init();

</script>
</body>
</html>
```

Please note that this is just a basic implementation; additional features like scoring, pocket detection, and collision with other balls can be added to enhance the game.