AI game creator

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

No:50245

←

Prev Next

→

Billiards
Developer User21282｜Date and time 24/3/8 6:33:55
Build time 5.225 sec｜Game capacity 1.607KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Billard Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

let cueBall = {
            x: canvas.width / 2,
            y: canvas.height - 50,
            radius: 10,
            color: "white",
            dx: 0,
            dy: 0
        };

function drawBall(ball) {
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
            ctx.fillStyle = ball.color;
            ctx.fill();
            ctx.closePath();
        }

function update() {
            cueBall.x += cueBall.dx;
            cueBall.y += cueBall.dy;

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

if (cueBall.y + cueBall.radius > canvas.height || cueBall.y - cueBall.radius < 0) {
                cueBall.dy = -cueBall.dy;
            }
        }

function render() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBall(cueBall);
        }

function gameLoop() {
            update();
            render();
            requestAnimationFrame(gameLoop);
        }

canvas.addEventListener("click", function(event) {
            cueBall.dx = (event.offsetX - cueBall.x) / 10;
            cueBall.dy = (event.offsetY - cueBall.y) / 10;
        });

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