AI game creator

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

No:13671

←

Prev Next

→

ビリヤード
Developer おまめちゃん｜Date and time 23/8/29 10:53:30
Build time 13.791 sec｜Game capacity 2.149KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>ビリヤードゲーム</title>
    <style>
        body {
            background-color: #4CAF50;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

#canvas {
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

Ball.prototype.draw = function (ctx) {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            ctx.fillStyle = this.color;
            ctx.fill();
            ctx.closePath();
        }

Ball.prototype.update = function () {
            this.x += this.dx;
            this.y += this.dy;

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

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

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

var balls = [
            new Ball(200, 200, 2, 2, 30, "#FF0000"),
            new Ball(100, 100, -2, -2, 20, "#00FF00"),
            new Ball(300, 100, 1, 1, 25, "#0000FF")
        ];

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            balls.forEach(function (ball) {
                ball.draw(ctx);
            });
        }

function update() {
            balls.forEach(function (ball) {
                ball.update();
            });
        }

function loop() {
            draw();
            update();
            requestAnimationFrame(loop);
        }

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