AI game creator

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

No:30680

121

←

Prev Next

→

Billiards
Developer User14911｜Date and time 23/12/23 21:37:01
Build time 22.589 sec｜Game capacity 4.014KB｜

Script

This is a simple billiards game implemented as a single HTML file using JavaScript. The player controls the paddle at the bottom of the canvas to bounce the ball and prevent it from hitting the top wall. If the ball misses the paddle and hits the top wall, the game ends and the player is prompted with a "Game Over" message. The player controls the paddle by touching and dragging on the screen.

←

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;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>
  
  <script>
    // Game variables
    let canvas, ctx;
    let ballX, ballY, ballRadius, ballSpeedX, ballSpeedY;
    let playerPaddleX, playerPaddleWidth, playerPaddleHeight, playerPaddleSpeed;
    
    // Initialize game variables and start the game
    function startGame() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      ballX = canvas.width / 2;
      ballY = canvas.height / 2;
      ballRadius = 10;
      ballSpeedX = 4;
      ballSpeedY = -4;
      playerPaddleX = (canvas.width - 75) / 2;
      playerPaddleWidth = 75;
      playerPaddleHeight = 10;
      playerPaddleSpeed = 7;
      
      // Listen for touch events on the canvas
      canvas.addEventListener("touchstart", handleTouchStart, false);
      canvas.addEventListener("touchmove", handleTouchMove, false);

// Start the game loop
      setInterval(updateGameArea, 20);
    }
    
    // Update the game area in each frame
    function updateGameArea() {
      clearCanvas();
      drawBall();
      drawPlayerPaddle();
      moveBall();
      movePlayerPaddle();
      checkCollision();
    }
    
    // Clear the game canvas
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
    
    // Draw the ball on the canvas
    function drawBall() {
      ctx.beginPath();
      ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
      ctx.fillStyle = "#000";
      ctx.fill();
      ctx.closePath();
    }
    
    // Draw the player's paddle on the canvas
    function drawPlayerPaddle() {
      ctx.beginPath();
      ctx.rect(playerPaddleX, canvas.height - playerPaddleHeight, playerPaddleWidth, playerPaddleHeight);
      ctx.fillStyle = "#000";
      ctx.fill();
      ctx.closePath();
    }
    
    // Move the ball
    function moveBall() {
      ballX += ballSpeedX;
      ballY += ballSpeedY;
      
      // Reverse ball's X direction if it hits the side walls
      if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
        ballSpeedX = -ballSpeedX;
      }
      
      // Reverse ball's Y direction if it hits the top wall or player's paddle
      if (ballY - ballRadius < 0 || (ballY + ballRadius > canvas.height - playerPaddleHeight && ballX > playerPaddleX && ballX < playerPaddleX + playerPaddleWidth)) {
        ballSpeedY = -ballSpeedY;
      }
    }
    
    // Move the player's paddle based on touch input
    function movePlayerPaddle() {
      if (touchX > playerPaddleX && touchX < playerPaddleX + playerPaddleWidth) {
        playerPaddleX = touchX - playerPaddleWidth / 2;
      }
    }
    
    // Handle touch start event
    function handleTouchStart(event) {
      event.preventDefault();
      touchX = event.touches[0].clientX;
    }
    
    // Handle touch move event
    function handleTouchMove(event) {
      event.preventDefault();
      touchX = event.touches[0].clientX;
    }
    
    // Check collision between ball and player's paddle
    function checkCollision() {
      if (ballY + ballRadius > canvas.height - playerPaddleHeight && ballX > playerPaddleX && ballX < playerPaddleX + playerPaddleWidth) {
        // Game over: Ball collided with player's paddle
        clearInterval(updateGameArea);
        alert("Game Over! You missed the ball.");
        document.location.reload();
      }
    }
    
    // Start the game
    startGame();
  </script>
</body>
</html>
```
This is a simple billiards game implemented as a single HTML file using JavaScript. The player controls the paddle at the bottom of the canvas to bounce the ball and prevent it from hitting the top wall. If the ball misses the paddle and hits the top wall, the game ends and the player is prompted with a "Game Over" message. The player controls the paddle by touching and dragging on the screen.