AI game creator

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

No:10066

←

Prev Next

→

Billiards
Developer User4474｜Date and time 23/7/29 0:25:48
Build time 14.24 sec｜Game capacity 2.138KB｜

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="600"></canvas>
    
    <script>
        // Billiards Game Code
        window.onload = function() {
            // Get the canvas element and its 2D rendering context
            var canvas = document.getElementById("billiardsCanvas");
            var ctx = canvas.getContext("2d");
            
            // Define the ball properties
            var ball = {
                x: canvas.width / 2,
                y: canvas.height - 30,
                radius: 15,
                dx: 2,
                dy: -2
            };
            
            // Draw the ball on the canvas
            function drawBall() {
                ctx.beginPath();
                ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
                ctx.fillStyle = "red";
                ctx.fill();
                ctx.closePath();
            }
            
            // Update the ball's position and check for collisions
            function update() {
                // Clear the canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // Draw the ball
                drawBall();
                
                // Update the ball's position
                ball.x += ball.dx;
                ball.y += ball.dy;
                
                // Check for collisions with the canvas boundaries
                if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
                    ball.dx = -ball.dx;
                }
                if (ball.y + ball.dy > canvas.height - ball.radius || ball.y + ball.dy < ball.radius) {
                    ball.dy = -ball.dy;
                }
                
                // Request animation frame to update the game loop
                requestAnimationFrame(update);
            }
            
            // Start the game
            update();
        }
    </script>
</body>
</html>