AI game creator

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

No:20252

←

Prev Next

→

Billiards
Developer User7287｜Date and time 23/10/9 1:22:43
Build time 12.262 sec｜Game capacity 2.388KB｜

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 {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="billiardsCanvas" width="400" height="300"></canvas>
    <script>
        // Initialize the canvas and context
        const canvas = document.getElementById("billiardsCanvas");
        const ctx = canvas.getContext("2d");

// Create an array to hold the positions of the billiard balls
        const billiardBalls = [
            { x: 100, y: 150, radius: 15, color: "red" },
            { x: 200, y: 150, radius: 15, color: "yellow" },
            { x: 300, y: 150, radius: 15, color: "orange" },
            { x: 250, y: 180, radius: 15, color: "green" },
            { x: 300, y: 120, radius: 15, color: "blue" },
            { x: 200, y: 120, radius: 15, color: "purple" },
            { x: 250, y: 90, radius: 15, color: "black" }
        ];

// Display the billiard balls on the canvas
        function drawBalls() {
            for (let i = 0; i < billiardBalls.length; i++) {
                const ball = billiardBalls[i];
                ctx.beginPath();
                ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
                ctx.fillStyle = ball.color;
                ctx.fill();
                ctx.closePath();
            }
        }

// Update the positions of the billiard balls
        function updateBalls() {
            for (let i = 0; i < billiardBalls.length; i++) {
                const ball = billiardBalls[i];
                ball.x += Math.random() * 4 - 2;
                ball.y += Math.random() * 4 - 2;

// Check for collisions with the walls
                if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
                    ball.x -= Math.random() * 4 - 2;
                }
                if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
                    ball.y -= Math.random() * 4 - 2;
                }
            }
        }

// Main game loop
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBalls();
            updateBalls();
            requestAnimationFrame(gameLoop);
        }

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