AI game creator

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

No:42506

←

Prev Next

→

Billiards
Developer User18250｜Date and time 24/2/11 21:44:52
Build time 13.58 sec｜Game capacity 4.211KB｜

Script

Sure, here's a simple implementation of a billiards game using JavaScript. The game will be displayed in a single HTML file and can be played on a smartphone. Pictograms will be used to represent the game elements.

Please note that this is a simplified implementation of a billiards game and may not have all the rules and mechanics of a full-fledged game. You can modify and enhance it according to your requirements.

←

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>
    #table {
      width: 100%;
      height: 300px;
      background: green;
      position: relative;
    }
    #cue {
      width: 20px;
      height: 200px;
      background: brown;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    .ball {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: white;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="table">
    <div id="cue"></div>
    <div class="ball" id="white-ball"></div>
    <div class="ball" id="red-ball"></div>
    <div class="ball" id="yellow-ball"></div>
    
  </div>

// Add event listener for cue movement
    table.addEventListener('touchmove', function(event) {
      var x = event.touches[0].clientX;
      var tableRect = table.getBoundingClientRect();
      var tableWidth = tableRect.width;

// Calculate and limit cue position
      var cuePosition = Math.max(x - tableRect.left, 0);
      cuePosition = Math.min(cuePosition, tableWidth);

// Move the cue
      cue.style.left = cuePosition + 'px';
    });

// Add event listener to shoot cue on touch release
    table.addEventListener('touchend', function(event) {
      var tableRect = table.getBoundingClientRect();
      var tableHeight = tableRect.height;
      var cuePosition = cue.getBoundingClientRect().left - tableRect.left;

// Calculate shot power based on cue position
      var shotPower = 1 - (cuePosition / tableRect.width);

// Calculate shot direction (angle) based on cue position
      var shotDirection = (cuePosition / tableRect.width) * 90;

// Shoot the white ball with specified power and direction
      shoot(whiteBall, shotPower, shotDirection);
    });

// Function to shoot a ball with given power and direction
    function shoot(ball, power, direction) {
      // Convert degrees to radians
      var radians = direction * Math.PI / 180;

// Calculate components of the velocity vector
      var vx = power * Math.cos(radians);
      var vy = power * Math.sin(radians);

// Set initial position of the ball
      var ballRect = ball.getBoundingClientRect();
      var tableRect = table.getBoundingClientRect();
      var initX = ballRect.left - tableRect.left + (ballRect.width / 2);
      var initY = ballRect.top - tableRect.top + (ballRect.height / 2);

// Animate ball movement using requestAnimationFrame
      var startTime = null;
      function animate(timestamp) {
        if (!startTime) startTime = timestamp;
        var progress = timestamp - startTime;

var newX = initX + (vx * progress / 100);
        var newY = initY + (vy * progress / 100);

// Move the ball to its new position
        ball.style.left = newX - (ballRect.width / 2) + 'px';
        ball.style.top = newY - (ballRect.height / 2) + 'px';

// Check for collisions with the table boundaries
        if (newX < 0 || newX > tableRect.width || newY < 0 || newY > tableRect.height) {
          // Handle collision here (e.g., bouncing off the wall)
        } else {
          // Continue animation until the ball reaches its destination
          requestAnimationFrame(animate);
        }
      }

// Start the animation
      requestAnimationFrame(animate);
    }
  </script>
</body>
</html>
```