AI game creator

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

No:20107

←

Prev Next

→

Billiards
Developer User8955｜Date and time 23/10/8 9:59:22
Build time 7.077 sec｜Game capacity 1.996KB｜

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 black;
        }
    </style>
</head>
<body>
    <canvas id="billiardsCanvas" width="400" height="400"></canvas>

// Variables to store ball positions and velocities
        var ballX = canvas.width / 2;
        var ballY = canvas.height / 2;
        var ballRadius = 20;
        var ballDX = 2;
        var ballDY = -2;

// Function to draw the ball on the canvas
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "rgb(255, 165, 0)";
            ctx.fill();
            ctx.closePath();
        }

// Function to update the ball position and handle collisions
        function updateBall() {
            // Update ball position
            ballX += ballDX;
            ballY += ballDY;

// Reverse ball direction if it hits the canvas edges
            if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
                ballDX = -ballDX;
            }

if (ballY + ballRadius > canvas.height || ballY - ballRadius < 0) {
                ballDY = -ballDY;
            }
        }

// Function to clear the canvas and redraw all elements
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
            drawBall(); // Draw the ball
        }

// Function to start the game
        function startGame() {
            setInterval(function () {
                updateBall(); // Update ball position
                draw(); // Redraw canvas
            }, 10);
        }

// Start the game when the page loads
        startGame();
    </script>
</body>
</html>