AI game creator

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

No:34063

←

Prev Next

→

Billiards
Developer User16021｜Date and time 24/1/8 1:14:29
Build time 17.777 sec｜Game capacity 1.662KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Billiards Game</title>
  <style>
    #canvas {
      background-color: #454545;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="600"></canvas>

// Game logic variables
    var canvas, ctx;
    var ballRadius = 16;
    var x, y; // Ball positions
    var dx, dy; // Ball velocities
    var tableImage, cueBallImage;

function init() {
      // Create canvas element and 2D drawing context
      canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");

// Set initial ball position and velocity
      x = canvas.width / 2;
      y = canvas.height - 50;
      dx = 2;
      dy = -2;

// Load table and cue ball images
      tableImage = new Image();
      tableImage.src = "table.png";
      cueBallImage = new Image();
      cueBallImage.src = "cue_ball.png";

// Start the game loop
      setInterval(draw, 10);
    }

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

// Draw the table
      ctx.drawImage(tableImage, 0, 0, canvas.width, canvas.height);

// Draw the cue ball
      ctx.drawImage(cueBallImage, x - ballRadius, y - ballRadius, ballRadius * 2, ballRadius * 2);

// Move the ball
      x += dx;
      y += dy;

// Reverse ball direction if it hits the wall
      if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
      }
      if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
        dy = -dy;
      }
    }

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