AI game creator

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

No:25394

←

Prev Next

→

Billiards
Developer User12421｜Date and time 23/11/21 8:07:13
Build time 120.347 sec｜Game capacity 4.954KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Billiards Game</title>
      <style>
         #canvas {
            background-color: #333;
            display: block;
            margin: 0 auto;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="800" height="400"></canvas>
      <script>
         window.onload = function() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var ballRadius = 15;
            var x = canvas.width / 2;
            var y = canvas.height - 30;
            var dx = 3;
            var dy = -3;
            var playerScore = 0;
            var playerLives = 3;
            var playerSpeed = 7;
            var paddleHeight = 20;
            var paddleWidth = 150;
            var paddleX = (canvas.width - paddleWidth) / 2;
            var rightPressed = false;
            var leftPressed = false;

// Add touch event listeners for mobile controls
            document.addEventListener("touchstart", touchStartHandler, false);
            document.addEventListener("touchend", touchEndHandler, false);

function touchEndHandler(e) {
               leftPressed = false;
               rightPressed = false;
            }

// Add keyboard event listeners for desktop controls
            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;
               }
            }

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

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

function drawScore() {
               context.font = "16px Arial";
               context.fillStyle = "#fff";
               context.fillText("Score: " + playerScore, 8, 20);
            }

function drawLives() {
               context.font = "16px Arial";
               context.fillStyle = "#fff";
               context.fillText("Lives: " + playerLives, canvas.width - 65, 20);
            }

if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                  dx = -dx;
               }
            }

function draw() {
               context.clearRect(0, 0, canvas.width, canvas.height);
               drawBall();
               drawPaddle();
               drawScore();
               drawLives();
               collisionDetection();

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

x += dx;
               y += dy;

requestAnimationFrame(draw);
            }

draw();
         }
      </script>
   </body>
</html>