Thuật toán va chạm giữa hai hình chữ nhật

Xét va chạm giữa các đối tượng là một trong các yếu tố sử dụng nhiều trong các hệ thống vật lý, trong ứng dụng được thấy nhiều trong game, … Bài viết này hướng dẫn cách phát hiện một va chạm giữa các đối tượng hình chữ nhật với nhau và giải thích về thuật toán va chạm giữa hai hình chữ nhật.

Thuật toán va chạm giữa hai hình chữ nhật

Thuật toán

Giả định thông số cho 2 hình chữ nhật như sau:

• Rect1 có thông số là: góc trên bên trái M1(x1, y1), chiều rộng và cao là W1, H1.
• Rect2 có thông số là: góc trên bên trái M2(x2, y2), chiều rộng và cao là W2, H2.

2 hình chữ nhật trên xảy ra va chạm với nhau khi thỏa 2 điều kiện sau đây:

Xét theo trục Ox

|(x1 + W1/2)| - |(x2 + W2/2) ≤ |(W1 + W2)/2|

Xét theo trục Oy

|(y1 + H1/2)| - |(y2 + H2/2) ≤ |(H1 + H2)/2|

Lúc 2 hình chữ nhật chưa va chạm:

Sau khi chúng va chạm vào nhau:

Code mẫu JavaScript xét sự tương quan giữa 2 hình tròn

class Rect {
    constructor(x, y, width, height) {
        this.x = x;
        this.y = y;
        this.w = width;
        this.h = height;
    }
}

// xác định va chạm giữa 2 hình chữ nhật (đối tượng Rect)
function isCollision(rect1, rect2) {
    let distX = (rect1.x + (rect1.w/2)) - (rect2.x + (rect2.w)/2);
    if (distX < 0)
        distX = -distX;

    const distW = (rect1.w + rect2.w)/2;

    let distY =(rect1.y + (rect1.h/2)) - (rect2.y + (rect2.h)/2);
    if(distY < 0)
        distY = -distY;

    const distH = (rect1.h + rect2.h)/2;

    return (distX <= distW && distY <= distH);
}Code language: JavaScript (javascript)

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG