Implementasi deteksi tabrakan dasar untuk animasi Html5 Canvas

Untuk melakukan deteksi tabrakan di Canvas, orang sering kali langsung menggunakan fungsi deteksi tabrakan bawaan dari mesin game (Cocos2d-JS, Egret) atau mesin fisika (Box2D). Teknologi dasar deteksi tabrakan akan dijelaskan di bawah ini:

Yang disebut deteksi tabrakan adalah untuk menentukan apakah ada tumpang tindih antar objek. Di sini kita berasumsi bahwa collider yang dibahas semuanya adalah objek persegi panjang. Dalam contoh berikut, kita akan membuat dua objek persegi A dan B (selanjutnya disebut A, B). Posisi A tetap dan B bergerak dengan mouse. Ketika A dan B tumpang tindih, konsol akan meminta perpotongan! !

Di sini kita membuat Rect.js baru, membuat objek Rect dan menambahkan metode prototipe draw ke dalamnya. Metode ini akan menggambar objek kanvas yang masuk (konteks) berdasarkan properti (posisi, ukuran) dari objek saat ini.

Kodenya adalah sebagai berikut:

 function Rect(x,y,width,height) { this.x = x; this.y = y; this.width = lebar; this.height = tinggi;}Rect.prototype.draw = function(konteks){ konteks. simpan(); konteks.terjemahkan(ini.x,ini.y); konteks.isiRect(0,0,ini.lebar,ini.tingginya);

Karena B perlu mengikuti pergerakan mouse, kita perlu mendeteksi posisi mouse saat ini di kanvas. Buat fungsi Capturemouse untuk mendeteksi pergerakan mouse pada node (elemen) dokumen yang masuk dan mengembalikan objek mouse (yang berisi koordinat x, y mouse).

Kodenya adalah sebagai berikut:

 function Capturemouse (elemen) { var mouse={x:null,y:null}; elemen.addEventListener('mousemove',function (event) { var x, y; if(event.pageX || event.pageY){ x = acara.halamanX; y = acara.halamanY; }lainnya{ x = acara.klienX+dokumen.badan.scrollLeft+ dokumen.documentElement.scrollLeft; y = acara.clientY+document.body.scrollTop+ dokumen.documentElement.scrollTop; } x -=element.offsetLeft; },salah); kembalikan mouse;}

Deteksi apakah A dan B tumpang tindih. Saat membahas apakah terjadi tumpang tindih, pertama-tama kita dapat melihat empat situasi tanpa tumpang tindih, seperti yang ditunjukkan di bawah ini:

Berikut putusan keempat negara tersebut:

1. rectB.y+rectB.height < rectA.y

2. rectB.y > rectA.x + rectA.width

3. rectB.y > rectA.y + rectA.height

4. persegiB.x+persegiB.lebar < persegiA.x

Sekarang kita tahu cara menilai keadaan yang tidak tumpang tindih, bagaimana cara menilai keadaan yang tumpang tindih? Benar, sebaliknya! , kita membuat fungsi Interaect dan menambahkannya ke Init.js. Fungsi ini meneruskan dua parameter objek Rect dan akan mengembalikan nilai true ketika kedua objek Rect tumpang tindih.

Kodenya adalah sebagai berikut:

 function Intersect(rectA,rectB) { return !(rectB.y+rectB.height < rectA.y || rectB.y > rectA.x +rectA.width || rectB.y > rectA.y + rectA.height|| persegiB.x+persegiB.lebar < persegiA.x)}

Buat animationjs baru dan atur fungsi animasi requestAnimationFrame().

Di badan perulangan, dua hal berikut akan dilakukan:

• Kosongkan isi kanvas saat ini untuk mempersiapkan menggambar bingkai berikutnya.
• Deteksi apakah A dan B tumpang tindih. Jika tumpang tindih, keluaran akan berinteraksi di konsol! ! !
• Deteksi pergerakan mouse saat ini di kanvas dan perbarui posisi mouse ke properti posisi B.
• Gambar ulang A dan B sesuai dengan atribut posisi yang baru (tentu saja posisi A tidak akan diperbarui tetapi perlu digambar ulang karena kanvas akan dihapus setiap kali diputar)

Kodenya adalah sebagai berikut:

 fungsi drawAnimation() { window.requestAnimationFrame(drawAnimation); konteks.clearRect(0, 0, canvas.width, canvas.height); if(Intersect(rectA,rectB)){ console.log('berinteraksi!!!!' ); } if(mouse.x){ rectB.x = mouse.x; rectB.y = mouse.y; rectB.draw(konteks);}

3. Inisialisasi

Buat Init.js baru, dapatkan elemen kanvas dan ikat deteksi gerakan mouse, inisialisasi objek Rect A dan B, dan terakhir mulai loop animasi.

Kodenya adalah sebagai berikut:

 window.onload = fungsi () { kanvas = document.getElementById('collCanvas'); konteks = kanvas.getContext('2d'); 2.100.100); rectB = Rekt baru(100.100.100.100); drawAnimation();}

Setelah membahas tumbukan persegi panjang, mari kita bahas tumbukan melingkar. Demikian pula, kita akan membuat dua benda Lingkaran A dan B (selanjutnya disebut A, B). Posisi A tetap, dan B mengikuti gerakan mouse B tumpang tindih, konsol Intercect akan diminta! !

 fungsi Lingkaran(x,y,radius) { ini.x = x; ini.y = y; ini.radius = radius;}Lingkaran.prototipe.draw = fungsi(konteks){ konteks.simpan(); ini.x,ini.y); konteks.beginPath(); konteks.arc(0,0,ini.radius,0,Math.PI*2,context.fill(); konteks.restore();}

Deteksi tumbukan antar lingkaran dapat dinilai hanya dengan membandingkan jarak antara pusat kedua lingkaran dengan jumlah jari-jari kedua lingkaran bila jarak antara pusat kedua lingkaran lebih kecil dari jumlah jari-jari kedua lingkaran tersebut dua lingkaran, terjadilah tumbukan.

Seperti yang ditunjukkan di bawah ini:

Jadi hal pertama yang perlu kita lakukan adalah menghitung jarak antara pusat kedua lingkaran. Disini kita akan menggunakan rumus jarak antara dua titik, sebagai berikut:

Jika jarak antara pusat dua lingkaran sudah didapat, maka akan dibandingkan dengan jumlah jari-jari kedua lingkaran, jika jaraknya lebih kecil dari jumlah jari-jarinya maka akan dikembalikan nilai true.

Sekarang kami memperbarui fungsi Interaect.

Kodenya adalah sebagai berikut:

 fungsi Berpotongan(lingkaranA,lingkaranB) { var dx = lingkaranA.x-lingkaranB.x; var dy = lingkaranA.y-lingkaranB.y; var jarak = Matematika.sqrt(dx*dx+dy*dy); lingkaranA.radius + lingkaranB.radius);}

Update animation.js, disini kita ganti objek Rect dengan objek Lingkaran.

Kodenya adalah sebagai berikut:

 fungsi drawAnimation() { window.requestAnimationFrame(drawAnimation); konteks.clearRect(0, 0, canvas.width, canvas.height); if(Intersect(circleA,circleB)){ console.log('berinteraksi!!!!' ); } if(mouse.x){ lingkaranB.x = mouse.x; lingkaranB.y = mouse.y; lingkaranB.menggambar(konteks);}

Perbarui Init.js, inisialisasi objek Lingkaran A dan B, dan terakhir mulai loop animasi.

Kodenya adalah sebagai berikut:

 window.onload = fungsi () { kanvas = document.getElementById('collCanvas'); konteks = kanvas.getContext('2d'); 2.100); lingkaranB = Lingkaran baru(100.100.100);

Penjelasan sebelumnya tentang deteksi tumbukan antar bangun tunggal. Selanjutnya kita akan mendeteksi tumbukan antara persegi panjang dan lingkaran.

1. Mendeteksi tabrakan

Mengenai deteksi persegi panjang, pertama-tama mari kita lihat empat situasi di mana tidak terjadi tabrakan.

Seperti yang ditunjukkan di bawah ini:

Berikut putusan keempat negara tersebut:

• Lingkaran.y + Lingkaran.radius < Persegi.y
• Lingkaran.x - Lingkaran.radius > Persegi.x + Lebar Persegi
• Lingkaran.y - Lingkaran.radius > Persegi.y + Tinggi Persegi
• Lingkaran.x + Lingkaran.radius < Persegi.x

Perbarui fungsi Interaect, balikkan keadaan yang tidak tumpang tindih, dan teruskan objek Rect dan objek Circle ke fungsi tersebut. Ketika objek Rect dan objek Circle tumpang tindih, nilai true akan dikembalikan.

Kodenya adalah sebagai berikut:

 function Intersect(Rect,Circle) { return !(Circle.y + Circle.radius < Rect.y || Circle.x - Circle.radius > Rect.x + Rect.width || Circle.y - Circle.radius > Rect .y + Tinggi Persegi ||. Lingkaran.x + Lingkaran.radius < Persegi.x)}

Perbarui animation.js, di sini kita mengikuti objek lingkaran ke gerakan mouse dan mendeteksi tabrakan dengan objek persegi dengan posisi tetap.

Kodenya adalah sebagai berikut:

 fungsi drawAnimation() { window.requestAnimationFrame(drawAnimation); konteks.clearRect(0, 0, canvas.width, canvas.height); if(Intersect(rect,circle)){ console.log('interact!!!!' ); } if(mouse.x){ lingkaran.x = mouse.x; lingkaran.y = mouse.y } lingkaran.draw(konteks);

Perbarui Init.js, inisialisasi objek Lingkaran dan objek Rect, dan terakhir mulai loop animasi.

Kodenya adalah sebagai berikut:

 window.onload = function () { canvas = document.getElementById('collCanvas'); konteks = canvas.getContext('2d'); Capturemouse(canvas); lebar/2,kanvas.tinggi/2,100,100); drawAnimation();}

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.