AI game creator

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

No:49337

←

Prev Next

→

ビリヤード
Developer User21022｜Date and time 24/3/4 19:50:28
Build time 12.818 sec｜Game capacity 2.244KB｜

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 {
            display: block;
            margin: 0 auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>

let cue = {
            x: 50,
            y: canvas.height / 2,
            radius: 10,
            color: "black"
        };

let ball = {
            x: canvas.width - 50,
            y: canvas.height / 2,
            radius: 20,
            color: "red",
            dx: -1,
            dy: 1
        };

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

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

function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBall();
            drawCue();

ball.x += ball.dx;
            ball.y += ball.dy;

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

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

requestAnimationFrame(update);
        }

update();
        
        canvas.addEventListener("touchstart", function(event) {
            cue.x = event.touches[0].clientX;
            cue.y = event.touches[0].clientY;
        });

canvas.addEventListener("touchmove", function(event) {
            cue.x = event.touches[0].clientX;
            cue.y = event.touches[0].clientY;
        });

canvas.addEventListener("touchend", function(event) {
            // Add any game logic here when cue is released
        });

</script>
</body>
</html>