AI game creator

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

No:9302

114

←

Prev Next

→

Billiards
Developer User4326｜Date and time 23/7/23 13:04:13
Build time 11.076 sec｜Game capacity 1.705KB｜

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 {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="billiardsCanvas" width="400" height="600"></canvas>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const canvas = document.getElementById("billiardsCanvas");
      const context = canvas.getContext("2d");

const ballRadius = 20;
      let x = canvas.width / 2;
      let y = canvas.height - 30;
      let dx = 2;
      let dy = -2;

function drawBall() {
        context.beginPath();
        context.arc(x, y, ballRadius, 0, Math.PI * 2);
        context.fillStyle = "#0095DD";
        context.fill();
        context.closePath();
      }

function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();

if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
          dx = -dx;
        }
        if (y + dy < ballRadius) {
          dy = -dy;
        } else if (y + dy > canvas.height - ballRadius) {
          if (x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
          } else {
            alert("Game Over");
            document.location.reload();
          }
        }

x += dx;
        y += dy;
      }

function mouseMoveHandler(event) {
        const relativeX = event.clientX - canvas.offsetLeft;
        if (relativeX > 0 && relativeX < canvas.width) {
          paddleX = relativeX - paddleWidth / 2;
        }
      }

document.addEventListener("mousemove", mouseMoveHandler);
      setInterval(draw, 10);
    });
  </script>
</body>
</html>