Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Melaksanakan Pengesanan Perlanggaran dalam JavaScript tanpa Perpustakaan?

Bagaimana untuk Melaksanakan Pengesanan Perlanggaran dalam JavaScript tanpa Perpustakaan?

Susan Sarandon
Lepaskan: 2024-10-20 11:24:30
asal
900 orang telah melayarinya

How to Implement Collision Detection in JavaScript without Libraries?

Pengesanan Perlanggaran dalam JavaScript

Masalah: Melaksanakan pengesanan perlanggaran dalam JavaScript tanpa menggunakan perpustakaan seperti jQuery atau gameQuery untuk senario mudah yang melibatkan objek bergerak.

Penyelesaian:

Untuk mengesan perlanggaran antara dua objek, rutin segi empat tepat terikat boleh digunakan. Ia mengira sama ada segi empat tepat yang mewakili setiap objek bertindih dengan membandingkan kedudukan dan dimensinya.

Fungsi isCollide() menyemak sama ada segi empat tepat yang diwakili oleh objek a dan b bersilang:

<code class="javascript">function isCollide(a, b) {
    return !(
        ((a.y + a.height) < (b.y)) ||
        (a.y > (b.y + b.height)) ||
        ((a.x + a.width) < b.x) ||
        (a.x > (b.x + b.width))
    );
}</code>
Salin selepas log masuk

Di mana:

  • a dan b ialah objek dengan sifat x, y, lebar dan tinggi.

Untuk menggunakan fungsi ini, anda boleh mencipta tatasusunan yang mengandungi kedudukan objek yang terlibat dalam pengesanan perlanggaran. Kemudian, anda boleh mengulangi tatasusunan untuk menyemak sama ada objek bergerak berlanggar dengan mana-mana objek yang telah ditetapkan.

Dengan menggunakan rutin segi empat tepat terikat ini, anda boleh melaksanakan pengesanan perlanggaran asas dalam JavaScript tanpa memerlukan kompleks algoritma atau perpustakaan.

Contoh Interaktif:

Klik [di sini](https://codepen.io/MixerOID/pen/Rwgeob) untuk melihat demonstrasi isCollide() berfungsi, mempamerkan pengesanan perlanggaran antara objek bergerak.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Pengesanan Perlanggaran dalam JavaScript tanpa Perpustakaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan