AI game creator

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

No:37268

←

Prev Next

→

Billiards
Developer User17053｜Date and time 24/1/21 0:11:01
Build time 18.43 sec｜Game capacity 5.224KB｜

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 {
            width: 100%;
            height: 100%;
            background-color: #335577;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>

// Setting up the canvas size
        var canvasWidth = window.innerWidth;
        var canvasHeight = window.innerHeight;
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

// Defining the pool table dimensions
        var tableWidth = canvasWidth * 0.8;
        var tableHeight = canvasHeight * 0.6;
        var tableX = (canvasWidth - tableWidth) / 2;
        var tableY = (canvasHeight - tableHeight) / 2;

// Defining the ball radius and collision restitution
        var ballRadius = 20;
        var restitution = 0.8;

// Defining the ball positions, velocities, and colors
        var balls = [
            { x: tableX + tableWidth / 2, y: tableY + tableHeight / 2, vx: 0, vy: 0, color: "white" },
            { x: tableX + tableWidth / 4, y: tableY + tableHeight / 2, vx: 0, vy: 0, color: "red" },
            { x: tableX + tableWidth * 3 / 4, y: tableY + tableHeight / 2, vx: 0, vy: 0, color: "yellow" }
        ];

// Function to draw the pool table and balls
        function draw() {
            // Clearing the canvas
            context.clearRect(0, 0, canvasWidth, canvasHeight);

// Drawing the pool table
            context.fillStyle = "#006600";
            context.fillRect(tableX, tableY, tableWidth, tableHeight);

// Drawing the balls
            for (var i = 0; i < balls.length; i++) {
                context.beginPath();
                context.fillStyle = balls[i].color;
                context.arc(balls[i].x, balls[i].y, ballRadius, 0, Math.PI * 2);
                context.closePath();
                context.fill();
            }
        }

// Function to update the ball positions and handle collisions
        function update() {
            // Updating the ball positions
            for (var i = 0; i < balls.length; i++) {
                balls[i].x += balls[i].vx;
                balls[i].y += balls[i].vy;
            }

// Handling collisions with the pool table
            for (var i = 0; i < balls.length; i++) {
                if (balls[i].x - ballRadius < tableX || balls[i].x + ballRadius > tableX + tableWidth) {
                    balls[i].vx *= -restitution;
                }
                if (balls[i].y - ballRadius < tableY || balls[i].y + ballRadius > tableY + tableHeight) {
                    balls[i].vy *= -restitution;
                }
            }

// Handling collisions between balls
            for (var i = 0; i < balls.length; i++) {
                for (var j = i + 1; j < balls.length; j++) {
                    var dx = balls[i].x - balls[j].x;
                    var dy = balls[i].y - balls[j].y;
                    var distance = Math.sqrt(dx * dx + dy * dy);

if (distance <= 2 * ballRadius) {
                        var angle = Math.atan2(dy, dx);
                        var sin = Math.sin(angle);
                        var cos = Math.cos(angle);

var vx1 = balls[i].vx * cos + balls[i].vy * sin;
                        var vy1 = balls[i].vy * cos - balls[i].vx * sin;
                        var vx2 = balls[j].vx * cos + balls[j].vy * sin;
                        var vy2 = balls[j].vy * cos - balls[j].vx * sin;

var finalVx1 = ((balls[i].radius - balls[j].radius) * vx1 + 2 * balls[j].radius * vx2) / (balls[i].radius + balls[j].radius);
                        var finalVx2 = ((balls[j].radius - balls[i].radius) * vx2 + 2 * balls[i].radius * vx1) / (balls[i].radius + balls[j].radius);

balls[i].vx = (finalVx1 * cos - vy1 * sin) * restitution;
                        balls[i].vy = (vy1 * cos + finalVx1 * sin) * restitution;
                        balls[j].vx = (finalVx2 * cos - vy2 * sin) * restitution;
                        balls[j].vy = (vy2 * cos + finalVx2 * sin) * restitution;
                    }
                }
            }
        }

// Function to handle user input
        function handleInput(event) {
            var touch = event.touches[0];
            var touchX = touch.pageX;
            var touchY = touch.pageY;

// Setting the white ball position and velocity based on touch input
            balls[0].x = touchX;
            balls[0].y = touchY;
            balls[0].vx = (touchX - balls[0].x) * 0.1;
            balls[0].vy = (touchY - balls[0].y) * 0.1;
        }

// Adding event listener for touch input
        canvas.addEventListener("touchstart", handleInput);

// Function to animate the game
        function animate() {
            update();
            draw();
            requestAnimationFrame(animate);
        }

// Starting the game
        animate();
    };
</script>
</body>
</html>