js碰撞反弹

// 获取画布和绘图上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 定义两个矩形对象
let rect1 = { x: 50, y: 50, width: 50, height: 50, dx: 2, dy: 2 };
let rect2 = { x: 200, y: 200, width: 50, height: 50, dx: -2, dy: -2 };

function drawRect(rect) {
    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
}

function checkCollision(rect1, rect2) {
    return rect1.x < rect2.x + rect2.width &&
           rect1.x + rect1.width > rect2.x &&
           rect1.y < rect2.y + rect2.height &&
           rect1.y + rect1.height > rect2.y;
}

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

    // 更新位置
    rect1.x += rect1.dx;
    rect1.y += rect1.dy;
    rect2.x += rect2.dx;
    rect2.y += rect2.dy;

    // 碰撞检测
    if (checkCollision(rect1, rect2)) {
        // 反弹逻辑
        rect1.dx = -rect1.dx;
        rect1.dy = -rect1.dy;
        rect2.dx = -rect2.dx;
        rect2.dy = -rect2.dy;
    }

    drawRect(rect1);
    drawRect(rect2);

    requestAnimationFrame(update);
}

update();