AI game creator

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

No:41082

←

Prev Next

→

billiard game
Developer User18445｜Date and time 24/2/5 22:22:31
Build time 13.933 sec｜Game capacity 2.873KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Billiard Game</title>
<style>
canvas {
  border: 3px solid black;
  display: block;
  margin: 20px auto;
}
</style>
</head>
<body>
<script>
// Billiard Game

// Create the canvas element
const canvas = document.createElement('canvas');
canvas.width = 400; // Adjust width as needed
canvas.height = 600; // Adjust height as needed
document.body.appendChild(canvas);

// Get the drawing context
const ctx = canvas.getContext('2d');

// Initialize variables
let ballX = canvas.width / 2; // Initial ball x position
let ballY = canvas.height - 30; // Initial ball y position
let ballDX = 2; // Ball x-axis speed
let ballDY = -2; // Ball y-axis speed
let ballRadius = 10; // Ball radius

// Paddle properties
let paddleWidth = 75; // Paddle width
let paddleHeight = 10; // Paddle height
let paddleX = (canvas.width - paddleWidth) / 2; // Paddle x position
let rightPressed = false; // Store if right arrow key is pressed
let leftPressed = false; // Store if left arrow key is pressed

// Add event listeners for arrow keys
document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);

// Arrow key press handlers
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;
  }
}

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

// Draw the ball
  ctx.beginPath();
  ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.closePath();

// Draw the paddle
  ctx.beginPath();
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillStyle = 'blue';
  ctx.fill();
  ctx.closePath();

// Move the paddle if arrow keys are pressed
  if (rightPressed && paddleX < canvas.width - paddleWidth) {
    paddleX += 7;
  } else if (leftPressed && paddleX > 0) {
    paddleX -= 7;
  }

// Bounce the ball off the walls
  if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
    ballDX = -ballDX;
  }
  if (ballY + ballDY < ballRadius) {
    ballDY = -ballDY;
  } else if (ballY + ballDY > canvas.height - ballRadius - paddleHeight) {
    // Check if the ball hits the paddle
    if (ballX > paddleX && ballX < paddleX + paddleWidth) {
      ballDY = -ballDY;
    } else {
      // Game over if the ball misses the paddle
      alert('Game Over');
      document.location.reload();
    }
  }

ballX += ballDX;
  ballY += ballDY;

requestAnimationFrame(draw);
}

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