AI game creator

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

No:15830

137

←

Prev Next

→

Billiards
Developer User6913｜Date and time 23/9/12 9:57:07
Build time 23.216 sec｜Game capacity 3.025KB｜

Script

Sure, here's an example of a simple billiards game implemented in a single HTML file:

This billiards game features a red ball bouncing around the canvas and a blue paddle at the bottom that the player can control using the arrow keys. The objective is to prevent the ball from hitting the bottom wall by deflecting it with the paddle. If the ball touches the bottom wall, a "Game Over" message is displayed, and the game can be restarted by reloading the page.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple billiards game implemented in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Billiards Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

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

// Paddle properties
    const paddleHeight = 10;
    const paddleWidth = 75;
    let paddleX = (canvas.width - paddleWidth) / 2;
    let rightPressed = false;
    let leftPressed = false;

// Event listeners for paddle movement
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
      if (e.key === "Right" || e.key === "ArrowRight") {
        rightPressed = true;
      } else if (e.key === "Left" || e.key === "ArrowLeft") {
        leftPressed = true;
      }
    }

function keyUpHandler(e) {
      if (e.key === "Right" || e.key === "ArrowRight") {
        rightPressed = false;
      } else if (e.key === "Left" || e.key === "ArrowLeft") {
        leftPressed = false;
      }
    }

// Ball collision with walls and paddle
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();
      drawPaddle();

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();
        }
      }

if (rightPressed && paddleX < canvas.width - paddleWidth) {
        paddleX += 7;
      } else if (leftPressed && paddleX > 0) {
        paddleX -= 7;
      }

x += dx;
      y += dy;
    }

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

function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = "blue";
      ctx.fill();
      ctx.closePath();
    }

setInterval(draw, 10); // Start the game loop
  </script>
</body>
</html>
```