AI game creator

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

No:52496

239

←

Prev Next

→

Billiards
Developer User18896｜Date and time 24/3/22 11:25:35
Build time 18.65 sec｜Game capacity 2.444KB｜

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>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #333;
        color: #fff;
    }
</style>
</head>
<body>
    <canvas id="billiardsCanvas" width="400" height="600"></canvas>

// Pictograms for billiard balls
        const ballImages = {
            '1': '⚪',
            '2': '⚫',
            '3': '🔴',
            '4': '🟡',
            '5': '🟢',
            '6': '🔵',
            '7': '🟣',
            '8': '🟠',
            '9': '🟤'
        };

// Initial position of the balls
        const balls = {
            '1': { x: 200, y: 100 },
            '2': { x: 180, y: 120 },
            '3': { x: 220, y: 120 },
            '4': { x: 160, y: 140 },
            '5': { x: 200, y: 140 },
            '6': { x: 240, y: 140 },
            '7': { x: 140, y: 160 },
            '8': { x: 180, y: 160 },
            '9': { x: 220, y: 160 }
        };

function drawBall(ballNumber) {
            ctx.font = '30px Arial';
            ctx.fillText(ballImages[ballNumber], balls[ballNumber].x, balls[ballNumber].y);
        }

function drawTable() {
            // Draw the table
            ctx.fillStyle = '#0f0';
            ctx.fillRect(50, 50, 300, 500);

// Draw the pockets
            ctx.fillStyle = '#000';
            ctx.beginPath();
            ctx.arc(50, 50, 10, 0, 2 * Math.PI);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(200, 50, 10, 0, 2 * Math.PI);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(350, 50, 10, 0, 2 * Math.PI);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(50, 550, 10, 0, 2 * Math.PI);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(200, 550, 10, 0, 2 * Math.PI);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(350, 550, 10, 0, 2 * Math.PI);
            ctx.fill();
        }

function drawGame() {
            drawTable();

// Draw all the balls
            for (let ballNumber in balls) {
                drawBall(ballNumber);
            }
        }

drawGame();
    </script>
</body>
</html>