只用js做两个球碰撞

要实现两个球的碰撞效果，我们需要考虑以下几个基础概念：

基础概念

碰撞检测：确定两个球是否发生了碰撞。
物理模拟：模拟碰撞后的物理效果，如反弹。

实现步骤

定义球的属性：包括位置（x, y）、速度（vx, vy）和半径。
更新球的位置：根据速度更新球的位置。
检测碰撞：检查两个球是否相交。
处理碰撞：调整速度以实现反弹效果。

示例代码

以下是一个简单的JavaScript示例，展示了如何实现两个球的碰撞效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ball Collision</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        class Ball {
            constructor(x, y, radius, vx, vy, color) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.vx = vx;
                this.vy = vy;
                this.color = color;
            }

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

            update() {
                this.x += this.vx;
                this.y += this.vy;

                // Bounce off the walls
                if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
                    this.vx = -this.vx;
                }
                if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
                    this.vy = -this.vy;
                }
            }
        }

        const ball1 = new Ball(100, 100, 20, 2, 3, 'red');
        const ball2 = new Ball(200, 200, 20, -2, -3, 'blue');

        function checkCollision(ball1, ball2) {
            const dx = ball1.x - ball2.x;
            const dy = ball1.y - ball2.y;
            const distance = Math.sqrt(dx * dx + dy * dy);

            if (distance < ball1.radius + ball2.radius) {
                // Swap velocities to simulate a perfect elastic collision
                const tempVx = ball1.vx;
                const tempVy = ball1.vy;
                ball1.vx = ball2.vx;
                ball1.vy = ball2.vy;
                ball2.vx = tempVx;
                ball2.vy = tempVy;
            }
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ball1.update();
            ball2.update();
            checkCollision(ball1, ball2);
            ball1.draw();
            ball2.draw();
            requestAnimationFrame(animate);
        }

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