Cara membuat deteksi tabrakan di javascript

Saya telah bermain-main mengembangkan beberapa game sederhana (permainan kata-kata ^^) dari waktu ke waktu, hanya untuk bersenang-senang. Untuk melakukan itu saya sangat sering menemukan semacam deteksi tabrakan. Saya pikir saya akan menunjukkan kepada Anda cara mudah untuk mendeteksi tabrakan dalam JavaScript

Apa itu tabrakan?

Bahkan sebelum kita memulai pengkodean, kita perlu memikirkan tentang apa sebenarnya yang ingin kita deteksi. Kami membutuhkan beberapa syarat. Untuk contoh ini saya berasumsi bahwa kedua objek yang bertabrakan adalah persegi panjang. Mereka memiliki koordinat x dan y serta lebar dan tinggi. Sejauh ini bagus. Itu cukup mudah. Sekarang bagian yang jauh lebih penting. bagaimana kita tahu jika dua persegi panjang bertabrakan?

Dua persegi panjang bertabrakan, ketika mereka tumpang tindih dalam beberapa cara. Memiliki posisi dan dimensinya, kita dapat menentukan kondisi untuk tumpang tindih. Beri nama persegi panjang kita R1 dan R2 untuk keterbacaan yang lebih baik. Agar R1 dan R2 tumpang tindih, ada 4 syarat yang harus dipenuhi

1. Tepi kanan R1 harus berada di sebelah kanan tepi kiri R2
2. Pada saat yang sama, tepi kiri R1 harus berada di sebelah kiri tepi kanan R2
3. Demikian juga, tepi bawah R1 harus lebih rendah dari tepi atas R2 dan
4. Tepi atas R1 harus lebih tinggi dari tepi bawah R2

Jika ini tidak masuk akal saat membaca, saya sarankan membuat sketsa, ini sangat membantu

Dua kondisi pertama memeriksa tumpang tindih horizontal, sementara yang lain memeriksanya secara vertikal. Perhatikan, bahwa jika kita hanya memeriksa kondisi pertama untuk tumpang tindih horizontal, kanan R1 mungkin berada di kanan kanan R2 .. tetapi kiri R1 mungkin juga, cukup letakkan R1 di kanan R2, tanpa tumpang tindih sama sekali. Ini berlaku untuk aturan 3 dan dengan cara yang sama

Menerjemahkan ke dalam kode

Sekarang setelah kondisi kami digariskan, bagian terberat sebenarnya sudah dilakukan. Yang tersisa hanyalah menerjemahkan Bahasa Inggris ke Kode secara langsung

Menyalin ke clipboard

Hanya itu yang diperlukan untuk mendeteksi antara dua objek yang sangat sederhana. Sangat mudah, sangat mudah

Kita bisa selesai sekarang, tapi mari lanjutkan dan tambahkan satu lagi fitur yang nyaman

Darimana itu datang?

Selain fakta bahwa tabrakan terjadi sama sekali, Anda seringkali juga perlu menentukan di mana tepatnya tabrakan itu terjadi. Dalam upaya saya melakukan Lompat 'n' Lari, misalnya, ada perbedaan besar apakah karakter saya mengenai musuh dari atas atau dari sisi lain (masalah hidup dan mati, jika Anda mau. ). Jadi, inilah yang saya buat untuk mendapatkan informasi itu

Menyalin ke clipboard

Apa yang saya lakukan disini?

Pertama saya menghitung jarak antara tepi setiap sisi. bottom_diff mewakili jarak dari tepi bawah R1 ke tepi atas R2, di sisi lain left_diff mewakili jarak antara tepi kiri R1 dan tepi kanan R2. Untuk mengubah informasi ini menjadi arah, pertama-tama saya harus menemukan jarak terkecil dari semuanya. Bayangkan R1 menjadi karakter saya dan R2 menjadi musuh. jika karakter melompat ke musuh, bottom_diff akan jauh lebih kecil dari top_diff. Jika karakter memiliki tinggi 20px, bottom_diff mungkin 0 atau 1 sedangkan top_diff adalah 20 atau 19

Ingatlah bahwa informasi ini agak "diarahkan". Contoh di atas memberi tahu Anda "R1 bertabrakan dengan R2 dari atas" karena karakternya adalah R1. Jika Anda melewati musuh sebagai R1 dan karakter sebagai R2, Anda akan mendapatkan kebalikannya

Untuk menyelesaikannya, mari taruh semuanya dalam fungsi kecil yang rapi yang dapat Anda gunakan kembali kapan pun Anda perlu memeriksa tabrakan antara dua persegi panjang

Menyalin ke clipboard

Kesimpulan

Ini dia. Setelah Anda memahami kondisi tumbukan dalam teori, pengkodeannya sangat mudah. Tantangan sebenarnya dalam pendeteksian tabrakan terletak pada prediksi, meminimalkan komputasi, dan semua jenis hal menarik lainnya yang berada di luar cakupan artikel ini

Dalam JavaScript, tabrakan terjadi ketika dua atau lebih elemen HTML bertabrakan. Secara default, saat menggunakan pendengar acara bergerak pada elemen HTML, itu tidak akan mengenai elemen lain di layar

Itu akan melewati elemen lain di DOM. Jadi, untuk mendeteksi tabrakan di JavaScript, kita harus melakukannya secara manual menggunakan koordinat x dan y dari elemen

Pada artikel ini, kita akan mengambil dua elemen div (dua kotak) di dalam halaman web kita, dan kita akan melihat bagaimana menerapkan deteksi tabrakan ketika salah satu kotak bertabrakan dengan yang lain

Kami akan mengimplementasikan deteksi tabrakan murni dalam JavaScript, dan kami tidak akan menggunakan perpustakaan pihak ketiga lainnya. Pertama, kita akan menulis HTML kita, lalu kita akan beralih ke bagian CSS, dan terakhir kita akan menulis kode JavaScript

Di dalam HTML, kita akan menambahkan dua elemen div dengan kelas ________37 _______ dan _______ 38 _______. _______ 38 _______ akan berada di lokasi tetap sementara ________ 37 ______ akan berpindah ke mana saja di layar

Kami akan menambahkan gaya dasar seperti lebar dan tinggi ke kotak sebagai

.square_2{
    width: 160px;
    height: 160px;
    position: absolute;
    left: 400px;
    top: 400px;
    background-color:rgb(255, 233, 36);
}

.square_1{
    position: absolute;
    width: 160px;
    height: 160px;
    background-color:rgb(255, 80, 80);
    font-size: 1.5em;
    z-index: 1;
}

.square_2{
    width: 160px;
    height: 160px;
    position: absolute;
    left: 400px;
    top: 400px;
    background-color:rgb(255, 233, 36);
}

.square_1{
    position: absolute;
    width: 160px;
    height: 160px;
    background-color:rgb(255, 80, 80);
    font-size: 1.5em;
    z-index: 1;
}

Kami akan memberi warna latar merah untuk ________ 37 _______ dan kuning untuk ________ 38 _______

Karena kita ingin square_2 diperbaiki di lokasi tertentu di layar, kita akan menambahkan properti

.square_2{
    width: 160px;
    height: 160px;
    position: absolute;
    left: 400px;
    top: 400px;
    background-color:rgb(255, 233, 36);
}

.square_1{
    position: absolute;
    width: 160px;
    height: 160px;
    background-color:rgb(255, 80, 80);
    font-size: 1.5em;
    z-index: 1;
}

.square_2{
    width: 160px;
    height: 160px;
    position: absolute;
    left: 400px;
    top: 400px;
    background-color:rgb(255, 233, 36);
}

.square_1{
    position: absolute;
    width: 160px;
    height: 160px;
    background-color:rgb(255, 80, 80);
    font-size: 1.5em;
    z-index: 1;
}

.square_2{
    width: 160px;
    height: 160px;
    position: absolute;
    left: 400px;
    top: 400px;
    background-color:rgb(255, 233, 36);
}

.square_1{
    position: absolute;
    width: 160px;
    height: 160px;
    background-color:rgb(255, 80, 80);
    font-size: 1.5em;
    z-index: 1;
}

.square_2{
    width: 160px;
    height: 160px;
    position: absolute;
    left: 400px;
    top: 400px;
    background-color:rgb(255, 233, 36);
}

.square_1{
    position: absolute;
    width: 160px;
    height: 160px;
    background-color:rgb(255, 80, 80);
    font-size: 1.5em;
    z-index: 1;
}

Terakhir, kita akan mengatur

var square_1 = document.getElementsByClassName('square_1')[0];
var square_2 = document.getElementsByClassName('square_2')[0];

var square_1_width = Number((getComputedStyle(square_1).width).split("px")[0])/2;
var square_2_width = Number((getComputedStyle(square_2).width).split("px")[0])/2;

var square_1_height = Number((getComputedStyle(square_1).height).split("px")[0])/2;
var square_2_height = Number((getComputedStyle(square_2).height).split("px")[0])/2;

.square_2{
    width: 160px;
    height: 160px;
    position: absolute;
    left: 400px;
    top: 400px;
    background-color:rgb(255, 233, 36);
}

.square_1{
    position: absolute;
    width: 160px;
    height: 160px;
    background-color:rgb(255, 80, 80);
    font-size: 1.5em;
    z-index: 1;
}

Keluaran

Kami tidak dapat memindahkan kotak merah karena kami belum menambahkan pendengar acara pindah

Pertama-tama kita harus mengakses dua kotak yang kita tambahkan di dalam HTML kita ke kode JavaScript kita. Untuk ini, kita akan menggunakan fungsi

var square_1 = document.getElementsByClassName('square_1')[0];
var square_2 = document.getElementsByClassName('square_2')[0];

var square_1_width = Number((getComputedStyle(square_1).width).split("px")[0])/2;
var square_2_width = Number((getComputedStyle(square_2).width).split("px")[0])/2;

var square_1_height = Number((getComputedStyle(square_1).height).split("px")[0])/2;
var square_2_height = Number((getComputedStyle(square_2).height).split("px")[0])/2;

Karena fungsi ini mengembalikan array, kami akan mengindeks untuk mengambil elemen pertama. Kemudian kita akan menyimpan dua kotak div di dalam variabel square_1 dan square_2

Sekarang kita memiliki akses ke kedua elemen persegi, pertama-tama kita akan mendapatkan lebar dan tinggi dari kedua elemen ini. Kami memiliki fungsi JavaScript yang disebut

var square_1 = document.getElementsByClassName('square_1')[0];
var square_2 = document.getElementsByClassName('square_2')[0];

var square_1_width = Number((getComputedStyle(square_1).width).split("px")[0])/2;
var square_2_width = Number((getComputedStyle(square_2).width).split("px")[0])/2;

var square_1_height = Number((getComputedStyle(square_1).height).split("px")[0])/2;
var square_2_height = Number((getComputedStyle(square_2).height).split("px")[0])/2;

Jadi, kami akan meneruskan variabel square_1 dan square_2 sebagai parameter untuk fungsi ini. Dan kemudian, dengan menggunakan notasi titik, kita akan mengakses properti elemen CSS

Perhatikan bahwa kita juga menggunakan fungsi

square_1.addEventListener('mousemove', (e)=>{
    square_1.style.left = (e.clientX - square_1_width) + "px";
    square_1.style.top = (e.clientY - square_1_height) + "px";

    checkCollision();
});

var square_1 = document.getElementsByClassName('square_1')[0];
var square_2 = document.getElementsByClassName('square_2')[0];

var square_1_width = Number((getComputedStyle(square_1).width).split("px")[0])/2;
var square_2_width = Number((getComputedStyle(square_2).width).split("px")[0])/2;

var square_1_height = Number((getComputedStyle(square_1).height).split("px")[0])/2;
var square_2_height = Number((getComputedStyle(square_2).height).split("px")[0])/2;

Misalnya, kami telah menetapkan lebar untuk kedua elemen sebagai

.square_2{
    width: 160px;
    height: 160px;
    position: absolute;
    left: 400px;
    top: 400px;
    background-color:rgb(255, 233, 36);
}

.square_1{
    position: absolute;
    width: 160px;
    height: 160px;
    background-color:rgb(255, 80, 80);
    font-size: 1.5em;
    z-index: 1;
}

var square_1 = document.getElementsByClassName('square_1')[0];
var square_2 = document.getElementsByClassName('square_2')[0];

var square_1_width = Number((getComputedStyle(square_1).width).split("px")[0])/2;
var square_2_width = Number((getComputedStyle(square_2).width).split("px")[0])/2;

var square_1_height = Number((getComputedStyle(square_1).height).split("px")[0])/2;
var square_2_height = Number((getComputedStyle(square_2).height).split("px")[0])/2;

.square_2{
    width: 160px;
    height: 160px;
    position: absolute;
    left: 400px;
    top: 400px;
    background-color:rgb(255, 233, 36);
}

.square_1{
    position: absolute;
    width: 160px;
    height: 160px;
    background-color:rgb(255, 80, 80);
    font-size: 1.5em;
    z-index: 1;
}

Kami tidak menginginkan bagian

square_1.addEventListener('mousemove', (e)=>{
    square_1.style.left = (e.clientX - square_1_width) + "px";
    square_1.style.top = (e.clientY - square_1_height) + "px";

    checkCollision();
});

square_1.addEventListener('mousemove', (e)=>{
    square_1.style.left = (e.clientX - square_1_width) + "px";
    square_1.style.top = (e.clientY - square_1_height) + "px";

    checkCollision();
});

square_1.addEventListener('mousemove', (e)=>{
    square_1.style.left = (e.clientX - square_1_width) + "px";
    square_1.style.top = (e.clientY - square_1_height) + "px";

    checkCollision();
});

square_1.addEventListener('mousemove', (e)=>{
    square_1.style.left = (e.clientX - square_1_width) + "px";
    square_1.style.top = (e.clientY - square_1_height) + "px";

    checkCollision();
});

Kami membutuhkan nilai itu sendiri, jadi kami akan menggunakan

square_1.addEventListener('mousemove', (e)=>{
    square_1.style.left = (e.clientX - square_1_width) + "px";
    square_1.style.top = (e.clientY - square_1_height) + "px";

    checkCollision();
});

var square_1 = document.getElementsByClassName('square_1')[0];
var square_2 = document.getElementsByClassName('square_2')[0];

var square_1_width = Number((getComputedStyle(square_1).width).split("px")[0])/2;
var square_2_width = Number((getComputedStyle(square_2).width).split("px")[0])/2;

var square_1_height = Number((getComputedStyle(square_1).height).split("px")[0])/2;
var square_2_height = Number((getComputedStyle(square_2).height).split("px")[0])/2;

Karena nilai yang dikembalikan akan berupa string, kami akan mengubahnya menjadi angka dan membaginya dengan 2 karena kami menginginkan nilai setengahnya, i. e. , 80. Pada akhirnya, kami menyimpan nilai ke dalam variabel, seperti yang ditunjukkan di atas

Sekarang, kita akan menambahkan event listener

function checkCollision(){
    let x_pos_sq_1 = Number((getComputedStyle(square_1).left).split("px")[0]) ;
    let y_pos_sq_1 = Number((getComputedStyle(square_1).top).split("px")[0]);

    let x_pos_sq_2 = Number((getComputedStyle(square_2).left).split("px")[0]) ;
    let y_pos_sq_2 = Number((getComputedStyle(square_2).top).split("px")[0]);

    let leftPos = x_pos_sq_1 + square_1_width > x_pos_sq_2 - square_2_width;
    let rightPos = x_pos_sq_1 - square_1_width < x_pos_sq_2 + square_2_width;

    let topPos = y_pos_sq_1 + square_1_height > y_pos_sq_2 - square_2_height;
    let bottomPos = y_pos_sq_1 - square_1_height < y_pos_sq_2 + square_2_height;

    if(leftPos && rightPos && topPos && bottomPos){
        square_1.innerHTML = "Collision occured";
        square_2.style.border = "5px solid rgb(24, 251, 240)";
    }
    else{
        square_1.innerHTML = "";
        square_2.style.border = "none";
    }
}

function checkCollision(){
    let x_pos_sq_1 = Number((getComputedStyle(square_1).left).split("px")[0]) ;
    let y_pos_sq_1 = Number((getComputedStyle(square_1).top).split("px")[0]);

    let x_pos_sq_2 = Number((getComputedStyle(square_2).left).split("px")[0]) ;
    let y_pos_sq_2 = Number((getComputedStyle(square_2).top).split("px")[0]);

    let leftPos = x_pos_sq_1 + square_1_width > x_pos_sq_2 - square_2_width;
    let rightPos = x_pos_sq_1 - square_1_width < x_pos_sq_2 + square_2_width;

    let topPos = y_pos_sq_1 + square_1_height > y_pos_sq_2 - square_2_height;
    let bottomPos = y_pos_sq_1 - square_1_height < y_pos_sq_2 + square_2_height;

    if(leftPos && rightPos && topPos && bottomPos){
        square_1.innerHTML = "Collision occured";
        square_2.style.border = "5px solid rgb(24, 251, 240)";
    }
    else{
        square_1.innerHTML = "";
        square_2.style.border = "none";
    }
}

Kami akan meneruskan acara

function checkCollision(){
    let x_pos_sq_1 = Number((getComputedStyle(square_1).left).split("px")[0]) ;
    let y_pos_sq_1 = Number((getComputedStyle(square_1).top).split("px")[0]);

    let x_pos_sq_2 = Number((getComputedStyle(square_2).left).split("px")[0]) ;
    let y_pos_sq_2 = Number((getComputedStyle(square_2).top).split("px")[0]);

    let leftPos = x_pos_sq_1 + square_1_width > x_pos_sq_2 - square_2_width;
    let rightPos = x_pos_sq_1 - square_1_width < x_pos_sq_2 + square_2_width;

    let topPos = y_pos_sq_1 + square_1_height > y_pos_sq_2 - square_2_height;
    let bottomPos = y_pos_sq_1 - square_1_height < y_pos_sq_2 + square_2_height;

    if(leftPos && rightPos && topPos && bottomPos){
        square_1.innerHTML = "Collision occured";
        square_2.style.border = "5px solid rgb(24, 251, 240)";
    }
    else{
        square_1.innerHTML = "";
        square_2.style.border = "none";
    }
}

Segera setelah kami mengarahkan kursor mouse ke square_1 dan menggerakkan mouse, kami ingin posisi kiri dan atas mouse ditetapkan ke posisi kiri dan atas kotak kami sehingga dapat bergerak ke mana pun kami memindahkan kursor mouse

square_1.addEventListener('mousemove', (e)=>{
    square_1.style.left = (e.clientX - square_1_width) + "px";
    square_1.style.top = (e.clientY - square_1_height) + "px";

    checkCollision();
});

Keluaran

function checkCollision(){
    let x_pos_sq_1 = Number((getComputedStyle(square_1).left).split("px")[0]) ;
    let y_pos_sq_1 = Number((getComputedStyle(square_1).top).split("px")[0]);

    let x_pos_sq_2 = Number((getComputedStyle(square_2).left).split("px")[0]) ;
    let y_pos_sq_2 = Number((getComputedStyle(square_2).top).split("px")[0]);

    let leftPos = x_pos_sq_1 + square_1_width > x_pos_sq_2 - square_2_width;
    let rightPos = x_pos_sq_1 - square_1_width < x_pos_sq_2 + square_2_width;

    let topPos = y_pos_sq_1 + square_1_height > y_pos_sq_2 - square_2_height;
    let bottomPos = y_pos_sq_1 - square_1_height < y_pos_sq_2 + square_2_height;

    if(leftPos && rightPos && topPos && bottomPos){
        square_1.innerHTML = "Collision occured";
        square_2.style.border = "5px solid rgb(24, 251, 240)";
    }
    else{
        square_1.innerHTML = "";
        square_2.style.border = "none";
    }
}

function checkCollision(){
    let x_pos_sq_1 = Number((getComputedStyle(square_1).left).split("px")[0]) ;
    let y_pos_sq_1 = Number((getComputedStyle(square_1).top).split("px")[0]);

    let x_pos_sq_2 = Number((getComputedStyle(square_2).left).split("px")[0]) ;
    let y_pos_sq_2 = Number((getComputedStyle(square_2).top).split("px")[0]);

    let leftPos = x_pos_sq_1 + square_1_width > x_pos_sq_2 - square_2_width;
    let rightPos = x_pos_sq_1 - square_1_width < x_pos_sq_2 + square_2_width;

    let topPos = y_pos_sq_1 + square_1_height > y_pos_sq_2 - square_2_height;
    let bottomPos = y_pos_sq_1 - square_1_height < y_pos_sq_2 + square_2_height;

    if(leftPos && rightPos && topPos && bottomPos){
        square_1.innerHTML = "Collision occured";
        square_2.style.border = "5px solid rgb(24, 251, 240)";
    }
    else{
        square_1.innerHTML = "";
        square_2.style.border = "none";
    }
}

Namun, kami ingin kursor ditampilkan di tengah persegi, jadi kami mengurangi lebar dan tinggi persegi menggunakan

function checkCollision(){
    let x_pos_sq_1 = Number((getComputedStyle(square_1).left).split("px")[0]) ;
    let y_pos_sq_1 = Number((getComputedStyle(square_1).top).split("px")[0]);

    let x_pos_sq_2 = Number((getComputedStyle(square_2).left).split("px")[0]) ;
    let y_pos_sq_2 = Number((getComputedStyle(square_2).top).split("px")[0]);

    let leftPos = x_pos_sq_1 + square_1_width > x_pos_sq_2 - square_2_width;
    let rightPos = x_pos_sq_1 - square_1_width < x_pos_sq_2 + square_2_width;

    let topPos = y_pos_sq_1 + square_1_height > y_pos_sq_2 - square_2_height;
    let bottomPos = y_pos_sq_1 - square_1_height < y_pos_sq_2 + square_2_height;

    if(leftPos && rightPos && topPos && bottomPos){
        square_1.innerHTML = "Collision occured";
        square_2.style.border = "5px solid rgb(24, 251, 240)";
    }
    else{
        square_1.innerHTML = "";
        square_2.style.border = "none";
    }
}

function checkCollision(){
    let x_pos_sq_1 = Number((getComputedStyle(square_1).left).split("px")[0]) ;
    let y_pos_sq_1 = Number((getComputedStyle(square_1).top).split("px")[0]);

    let x_pos_sq_2 = Number((getComputedStyle(square_2).left).split("px")[0]) ;
    let y_pos_sq_2 = Number((getComputedStyle(square_2).top).split("px")[0]);

    let leftPos = x_pos_sq_1 + square_1_width > x_pos_sq_2 - square_2_width;
    let rightPos = x_pos_sq_1 - square_1_width < x_pos_sq_2 + square_2_width;

    let topPos = y_pos_sq_1 + square_1_height > y_pos_sq_2 - square_2_height;
    let bottomPos = y_pos_sq_1 - square_1_height < y_pos_sq_2 + square_2_height;

    if(leftPos && rightPos && topPos && bottomPos){
        square_1.innerHTML = "Collision occured";
        square_2.style.border = "5px solid rgb(24, 251, 240)";
    }
    else{
        square_1.innerHTML = "";
        square_2.style.border = "none";
    }
}

Ini akan membuat kursor mouse mengarah ke tengah kotak saat kita menyeretnya, seperti yang ditunjukkan di bawah ini

Sebelum menjalankan kode, pastikan Anda mengomentari fungsi

function checkCollision(){
    let x_pos_sq_1 = Number((getComputedStyle(square_1).left).split("px")[0]) ;
    let y_pos_sq_1 = Number((getComputedStyle(square_1).top).split("px")[0]);

    let x_pos_sq_2 = Number((getComputedStyle(square_2).left).split("px")[0]) ;
    let y_pos_sq_2 = Number((getComputedStyle(square_2).top).split("px")[0]);

    let leftPos = x_pos_sq_1 + square_1_width > x_pos_sq_2 - square_2_width;
    let rightPos = x_pos_sq_1 - square_1_width < x_pos_sq_2 + square_2_width;

    let topPos = y_pos_sq_1 + square_1_height > y_pos_sq_2 - square_2_height;
    let bottomPos = y_pos_sq_1 - square_1_height < y_pos_sq_2 + square_2_height;

    if(leftPos && rightPos && topPos && bottomPos){
        square_1.innerHTML = "Collision occured";
        square_2.style.border = "5px solid rgb(24, 251, 240)";
    }
    else{
        square_1.innerHTML = "";
        square_2.style.border = "none";
    }
}

Sekarang, mari buat fungsi ________22______9 untuk mendeteksi tabrakan. Di sini, pertama-tama kita akan mendapatkan posisi kiri dan atas kotak menggunakan fungsi

var square_1 = document.getElementsByClassName('square_1')[0];
var square_2 = document.getElementsByClassName('square_2')[0];

var square_1_width = Number((getComputedStyle(square_1).width).split("px")[0])/2;
var square_2_width = Number((getComputedStyle(square_2).width).split("px")[0])/2;

var square_1_height = Number((getComputedStyle(square_1).height).split("px")[0])/2;
var square_2_height = Number((getComputedStyle(square_2).height).split("px")[0])/2;

Terakhir, kita akan mengetikkan nilai string ke dalam angka dan menyimpannya dalam variabel

Kami akan menyimpan posisi kiri dan atas square_1 di dalam div_3 dan div4 variabel dan square_2 di dalam div6 dan div7 variabel

Sekarang, kita akan memeriksa apakah kotak pertama kita (merah) memotong salah satu dari keempat sisi kotak kedua (kuning) atau tidak. Kami akan menambahkan satu syarat untuk setiap sisi kotak kedua (kuning) untuk diperiksa

Perhatikan bahwa posisi x dan y kedua kotak saat ini berada di tengah kotak

function checkCollision(){
    let x_pos_sq_1 = Number((getComputedStyle(square_1).left).split("px")[0]) ;
    let y_pos_sq_1 = Number((getComputedStyle(square_1).top).split("px")[0]);

    let x_pos_sq_2 = Number((getComputedStyle(square_2).left).split("px")[0]) ;
    let y_pos_sq_2 = Number((getComputedStyle(square_2).top).split("px")[0]);

    let leftPos = x_pos_sq_1 + square_1_width > x_pos_sq_2 - square_2_width;
    let rightPos = x_pos_sq_1 - square_1_width < x_pos_sq_2 + square_2_width;

    let topPos = y_pos_sq_1 + square_1_height > y_pos_sq_2 - square_2_height;
    let bottomPos = y_pos_sq_1 - square_1_height < y_pos_sq_2 + square_2_height;

    if(leftPos && rightPos && topPos && bottomPos){
        square_1.innerHTML = "Collision occured";
        square_2.style.border = "5px solid rgb(24, 251, 240)";
    }
    else{
        square_1.innerHTML = "";
        square_2.style.border = "none";
    }
}

Keluaran

Untuk mendeteksi jika kotak merah bertabrakan dengan kotak kuning dari sisi kiri, kita akan memeriksa apakah posisi x dan lebar kotak merah lebih besar daripada posisi x kotak kuning dikurangi lebarnya. Kotak merah bertabrakan dengan kotak kuning dari sisi kiri jika lebih besar

Ini akan mengembalikan nilai boolean yang akan kita simpan di dalam variabel div8

Untuk mendeteksi jika kotak merah bertabrakan dengan kotak kuning dari sisi kanan, kita akan memeriksa apakah posisi x kotak merah dikurangi lebarnya lebih kecil dari posisi x kotak kuning dan lebarnya. Kotak merah bertabrakan dengan kotak kuning dari sisi kanan jika lebih kecil

Ini akan mengembalikan nilai boolean yang akan kita simpan di dalam variabel div9

Posisi atas mirip dengan posisi kiri; . Ini akan mengembalikan nilai boolean yang akan kita simpan di dalam variabel div0

Posisi bawah mirip dengan posisi kanan, tetapi kita berurusan dengan sumbu y dan tinggi. Ini juga akan mengembalikan nilai boolean yang akan kita simpan di dalam variabel div1

Di akhir fungsi

function checkCollision(){
    let x_pos_sq_1 = Number((getComputedStyle(square_1).left).split("px")[0]) ;
    let y_pos_sq_1 = Number((getComputedStyle(square_1).top).split("px")[0]);

    let x_pos_sq_2 = Number((getComputedStyle(square_2).left).split("px")[0]) ;
    let y_pos_sq_2 = Number((getComputedStyle(square_2).top).split("px")[0]);

    let leftPos = x_pos_sq_1 + square_1_width > x_pos_sq_2 - square_2_width;
    let rightPos = x_pos_sq_1 - square_1_width < x_pos_sq_2 + square_2_width;

    let topPos = y_pos_sq_1 + square_1_height > y_pos_sq_2 - square_2_height;
    let bottomPos = y_pos_sq_1 - square_1_height < y_pos_sq_2 + square_2_height;

    if(leftPos && rightPos && topPos && bottomPos){
        square_1.innerHTML = "Collision occured";
        square_2.style.border = "5px solid rgb(24, 251, 240)";
    }
    else{
        square_1.innerHTML = "";
        square_2.style.border = "none";
    }
}

Jika semua variabel menghasilkan nilai div_8, square_1 telah bertabrakan dengan square_2. Segera setelah ini terjadi, kami akan memberi batas biru pada kotak kuning kami, dan kami juga akan menambahkan teks square_11 pada kotak merah seperti yang ditunjukkan di atas

Jika kita membawa kotak merah keluar dari batas kotak kuning, maka kita akan menghapus batas dari kotak kuning dan menghapus teks dari kotak merah

Bagaimana menemukan tabrakan antara dua objek dalam JavaScript?

Apa itu deteksi tabrakan di JS?