AI game creator

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

No:13647

←

Prev Next

→

Billiards
Developer Paulomxn1 tv｜Date and time 23/8/29 7:12:35
Build time 18.833 sec｜Game capacity 3.63KB｜

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 {
         display: block;
         margin: auto;
         background-color: #222;
         border: 1px solid #fff;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="600"></canvas>

// Getting the canvas element
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");

// Creating the Billiard Ball object
      class Ball {
         constructor(x, y, color) {
            this.x = x;
            this.y = y;
            this.vx = 0;
            this.vy = 0;
            this.radius = 15;
            this.color = color;
         }

// Draw the ball on the canvas
         draw() {
            context.beginPath();
            context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            context.fillStyle = this.color;
            context.fill();
            context.closePath();
         }
      }

// Creating the Paddle object
      class Paddle {
         constructor(x, y, width, height) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.color = "#fff";
         }

// Draw the paddle on the canvas
         draw() {
            context.fillStyle = this.color;
            context.fillRect(this.x, this.y, this.width, this.height);
         }
      }

// Game variables
      let balls = [];
      let paddle;

// Initialize the game
      function init() {
         // Create the billiard balls
         balls.push(new Ball(canvas.width / 2, canvas.height / 2, "#ff0000"));
         balls.push(new Ball(canvas.width / 2 - 40, canvas.height / 2, "#00ff00"));

// Create the paddle
         paddle = new Paddle(canvas.width / 2 - 40, canvas.height - 50, 80, 15);

// Start the game
         gameLoop();
      }

// Game Loop
      function gameLoop() {
         // Clear the canvas
         context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the balls
         balls.forEach((ball) => {
            ball.draw();
         });

// Draw the paddle
         paddle.draw();

// Update positions and collisions
         balls.forEach((ball) => {
            ball.x += ball.vx;
            ball.y += ball.vy;

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

// Check collision with paddle
            if (
               ball.x + ball.radius > paddle.x &&
               ball.x - ball.radius < paddle.x + paddle.width &&
               ball.y + ball.radius > paddle.y
            ) {
               ball.vy *= -1; // Reverse vertical velocity
            }
         });
         
         // Request animation frame
         requestAnimationFrame(gameLoop);
      }

// Event listeners
      document.addEventListener("keydown", function(event) {
         // Control the paddle with arrow keys
         if (event.key === "ArrowLeft" && paddle.x > 0) {
               paddle.x -= 10;
         } else if (event.key === "ArrowRight" && paddle.x < canvas.width - paddle.width) {
               paddle.x += 10;
         }
      });

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