AI game creator

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

No:40910

←

Prev Next

→

Billiards
Developer User18300｜Date and time 24/2/4 15:42:38
Build time 12.439 sec｜Game capacity 2.964KB｜

Script

Sure! Here's a simple billiards game implemented as a single HTML file using JavaScript and enclosed in `` tags. It can be played on a smartphone and uses pictograms for the billiard balls. <br><br> <html lang="en"> <style> canvas { border: 1px solid black; display: block; margin: 0 auto; } </style> <canvas id="billiardsCanvas"></canvas>

To play the game, you can open the HTML file on your smartphone's web browser. The billiard balls are represented by pictograms, and you can touch and drag them around the canvas to move them. The balls will move to the location you touch, and you can rearrange them as you like.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's a simple billiards game implemented as a single HTML file using JavaScript and enclosed in `<script>` tags. It can be played on a smartphone and uses pictograms for the billiard balls.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Billiards Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="billiardsCanvas"></canvas>

// Billiard balls pictograms
    const ballPictograms = {
      1: "🎱",
      2: "⚫️",
      3: "🔴",
      4: "🟢",
      5: "🔵",
      6: "🟡",
      7: "🟠",
      8: "⚪️",
      9: "🟣",
      10: "🟤",
      11: "🔘",
      12: "🔴",
      13: "🔵",
      14: "🟡",
      15: "🟠",
    };

// Billiard balls positions
    const ballPositions = {
      1: { x: 100, y: 100 },
      2: { x: 220, y: 100 },
      3: { x: 340, y: 100 },
      4: { x: 460, y: 100 },
      5: { x: 550, y: 250 },
      6: { x: 340, y: 250 },
      7: { x: 460, y: 250 },
      8: { x: 550, y: 100 },
      9: { x: 460, y: 400 },
      10: { x: 550, y: 475 },
      11: { x: 460, y: 475 },
      12: { x: 460, y: 250 },
      13: { x: 550, y: 325 },
      14: { x: 550, y: 400 },
      15: { x: 550, y: 475 },
    };

// Function to draw the billiard balls
    function drawBalls() {
      for (let ball in ballPositions) {
        const position = ballPositions[ball];
        ctx.fillText(ballPictograms[ball], position.x, position.y);
      }
    }

// Function to handle touch event and move the balls
    function moveBalls(event) {
      const touchX = event.touches[0].clientX;
      const touchY = event.touches[0].clientY;

for (let ball in ballPositions) {
        const position = ballPositions[ball];
        const distance = Math.sqrt(
          Math.pow(position.x - touchX, 2) + Math.pow(position.y - touchY, 2)
        );

if (distance <= 20) {
          position.x = touchX;
          position.y = touchY;
          break;
        }
      }
      
      // Clearing the canvas and redrawing the balls in new positions
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBalls();
    }

// Setting up the canvas dimensions
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Drawing the initial balls
    drawBalls();

// Event listener for touch move
    canvas.addEventListener("touchmove", moveBalls);

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

To play the game, you can open the HTML file on your smartphone's web browser. The billiard balls are represented by pictograms, and you can touch and drag them around the canvas to move them. The balls will move to the location you touch, and you can rearrange them as you like.