js小球碰撞案例

// 创建两个小球元素
let ball1 = document.createElement('div');
let ball2 = document.createElement('div');
ball1.className = 'ball';
ball2.className = 'ball';
document.body.appendChild(ball1);
document.body.appendChild(ball2);

// 设置初始位置和速度
let x1 = 50, y1 = 50, vx1 = 2, vy1 = 1;
let x2 = 150, y2 = 150, vx2 = -2, vy2 = -1;

// 碰撞检测函数
function checkCollision() {
    let dx = x2 - x1;
    let dy = y2 - y1;
    let distance = Math.sqrt(dx * dx + dy * dy);
    let minDistance = ball1.offsetWidth / 2 + ball2.offsetWidth / 2;
    
    if (distance < minDistance) {
        // 碰撞发生，交换速度分量
        [vx1, vx2] = [vx2, vx1];
        [vy1, vy2] = [vy2, vy1];
    }
}

// 动画循环
setInterval(() => {
    // 更新小球位置
    x1 += vx1;
    y1 += vy1;
    x2 += vx2;
    y2 += vy2;
    
    // 应用位置到DOM元素
    ball1.style.left = x1 + 'px';
    ball1.style.top = y1 + 'px';
    ball2.style.left = x2 + 'px';
    ball2.style.top = y2 + 'px';
    
    // 检查碰撞
    checkCollision();
}, 16); // 大约60fps