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

Bagaimana untuk Melaksanakan Pengesanan Perlanggaran yang Cekap dalam JavaScript Tanpa Perpustakaan?

Linda Hamilton
Lepaskan: 2024-10-20 12:48:02
asal
1053 orang telah melayarinya

How to Implement Efficient Collision Detection in JavaScript Without Libraries?

JavaScript: Pengesanan Perlanggaran Cekap Tanpa jQuery atau gameQuery

Mengesan perlanggaran adalah penting dalam permainan dan simulasi berasaskan JavaScript. Walaupun jQuery dan gameQuery menawarkan kaedah yang mudah untuk tugas ini, pembangun mungkin menghadapi situasi di mana perpustakaan ini bukan pilihan. Dalam kes sedemikian, penyelesaian tersuai diperlukan.

Satu pendekatan untuk pengesanan perlanggaran ialah mencipta tatasusunan kedudukan objek dan menguji setiap lokasi objek berbanding objek yang bergerak. Walau bagaimanapun, kaedah ini adalah mahal dari segi pengiraan dan tidak sesuai untuk aplikasi masa nyata.

Pendekatan yang lebih cekap ialah menggunakan fungsi yang mengira segi empat tepat sempadan setiap objek dan menyemak sama ada segi empat tepat ini bertindih. Berikut ialah rutin segi empat tepat terikat yang mudah:

<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

Fungsi ini mengambil dua objek (a dan b) dengan sifat x, y, lebar dan ketinggian serta mengembalikan benar jika ia berlanggar; jika tidak, ia mengembalikan palsu.

Untuk menggunakan fungsi ini, hanya bandingkan segi empat tepat terikat objek bergerak dan setiap objek yang berpotensi berlanggar. Berikut ialah contoh:

<code class="javascript">// Get the current position of the ball
var ballX = ball.offsetLeft;
var ballY = ball.offsetTop;
var ballWidth = ball.offsetWidth;
var ballHeight = ball.offsetHeight;

// Create an array of someobject positions
var someobjectPositions = [];
for (var i = 0; i < someobjects.length; i++) {
    var someobject = someobjects[i];
    someobjectPositions.push({
        x: someobject.offsetLeft,
        y: someobject.offsetTop,
        width: someobject.offsetWidth,
        height: someobject.offsetHeight
    });
}

// Check for collisions
for (var c = 0; c < someobjectPositions.length; c++) {
    if (isCollide(ball, someobjectPositions[c])) {
        // Handle the collision
    }
}</code>
Salin selepas log masuk

Dengan menggunakan rutin segi empat tepat terikat yang cekap ini, anda boleh melaksanakan pengesanan perlanggaran masa nyata dalam JavaScript tanpa menggunakan perpustakaan berat seperti jQuery atau gameQuery.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Pengesanan Perlanggaran yang Cekap 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