js怎么写碰撞事件

function isColliding(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
    );
}

// 使用示例
const object1 = { x: 10, y: 10, width: 50, height: 50 };
const object2 = { x: 40, y: 40, width: 50, height: 50 };

if (isColliding(object1, object2)) {
    console.log('Collision detected!');
} else {
    console.log('No collision.');
}

function getPixelData(img, x, y) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img, 0, 0);
    return context.getImageData(x, y, 1, 1).data;
}

function isPixelColliding(img1, x1, y1, img2, x2, y2) {
    const pixelData1 = getPixelData(img1, x1, y1);
    const pixelData2 = getPixelData(img2, x2, y2);
    // 检查两个像素是否都不透明
    return pixelData1[3] > 0 && pixelData2[3] > 0;
}

// 使用示例
const image1 = new Image();
const image2 = new Image();
// ... 加载图片 ...

if (isPixelColliding(image1, 10, 10, image2, 40, 40)) {
    console.log('Pixel collision detected!');
} else {
    console.log('No pixel collision.');
}