Deteksi Tubrukan Objek Dengan HTML5 [Part 2] Oleh: Yudhistira Bayu W
Bismillahirahmanirahim Assalamualaikum wr.wb Setelah kita belajar dengan konsep awal dari tubrukan ini yang berada di Part 1, sekarang kita berlangsung ke part 2 yaitu untuk deteksi tubrukan 2 objek yang ditampilkan kedalam kanvas. Sebenarnya ada beberapa konsep untuk menggambarkan tubrukan dengan html5, contohnya rectan...
Bismillahirahmanirahim Assalamualaikum wr.wb Setelah kita belajar dengan konsep awal dari tubrukan ini yang berada di Part 1, sekarang kita berlangsung ke part 2 yaitu untuk deteksi tubrukan 2 objek yang ditampilkan kedalam kanvas. Sebenarnya ada beberapa konsep untuk menggambarkan tubrukan dengan html5, contohnya rectangle collision.
Gambar diatas merupakan contoh dari rectangle collision. Jadi, pada rectangle collision ini semua objek dianggap kotak dan pengecekan dilakukan oleh posisi antar kotak yang saling bersinggungan. Kelemahannya, posisi tubrukannya ga pas karena berbentuk kotak :D tapi kelebihannya adalah perfomanya lebih bagus
Sementara gambar di atas adalah contoh dari pixel perfect collision. Jadi pengecekan menggunakan pixel setiap gambar objek yang akan dicek tubrukannya. Kelebihan dari cara ini adalah proses tubrukan yang dilakukan akan selalu tepat, namun performa menjadi lambat karena harus mengecek setiap pixel gambar dari setiap objek. Nah, pada tutorial ini, kita akan menggunakan konsep collision yang pertama, yaitu rectangle collision. Tujuan kita adalah agar performa lebih baik. Dan rectangle collision juga konsep yang paling banyak dipakai. Oke kita langsung aja ke programnya, seperti biasa, keterangannya ada di bawah dari tutorial ini: <style> canvas { border-width: 1px; border-style: solid; } <script> var var var var var var var
canvas; ctx; balls = []; circleX = 30; circleY = 30; circleXModifier = 2; circleYModifier = 2;
window.onload = function(){ canvas = document.getElementById("myCanvas"); ctx = canvas.getContext("2d"); var newball1 var newball2 newball1.x = newball1.y =
= new Object(); = new Object(); 30; 30;
newball2.x = 500; newball2.y = 30; newball1.modx = 4; newball1.mody = 4; newball2.modx = -2; newball2.mody = 2; newball1.color = "#FF0000"; newball2.color = "#0000FF"; balls[0] = newball1; balls[1] = newball2; setInterval(draw, 1.6); }; function draw() { ctx.fillStyle = "#fff"; ctx.fillRect(0,0,canvas.width,canvas.height); for (b in balls) { ctx.beginPath(); ctx.arc(balls[b].x, balls[b].y, 30, 0, 2 * Math.PI, false); ctx.fillStyle = balls[b].color; ctx.fill(); balls[b].x += balls[b].modx; balls[b].y += balls[b].mody; if (balls[b].x >= canvas.width-30) balls[b].modx *= -1; else if (balls[b].x < 30) balls[b].modx *= -1; if (balls[b].y >= canvas.height-30) balls[b].mody *= -1; else if (balls[b].y < 30) balls[b].mody *= -1; } for (var i=balls[0].x-30; i
= balls[1].x-30 && i <= balls[1].x + 30 && j >= balls[1].y-30 && j <= balls[1].y + 30) { balls[0].modx *= -1; balls[0].mody *= -1; balls[1].modx *= -1; balls[1].mody *= -1;
break; } } } }
Keterangan: - Kode dibawah ini adalah kode yang terdapat pada baris 69, dimana kita melakukan looping untuk mendapatkan setiap titik pada objek bola pertama for (var i=balls[0].x-30; i
- Kode dibawah ini kode baris 70, sama tujuannya dengan kode diatas. Namun bedanya ini untuk mendapatkan setiap titik pada objek bola kedua for (var j=balls[0].y-30; j
- Kode dibawah ini terdapat pada baris 75-79, bertujuan untuk jika terjadi singgungan antar titik maka kita dapat merubah nilai modx dan mody pada setiap bola dengan dikalikan -1, yang akan menjadi nilai berlawanan dari nilai awal; Sehingga arah bola akan berbalik setelah bertubrukan balls[0].modx balls[0].mody balls[1].modx balls[1].mody
*= *= *= *=
-1; -1; -1; -1;
- Kode dibawah ini, terdapat pada baris 80. Break digunakan untuk menghentikan pengecekan, karena sudah pasti tubrukan terdeteksi. Jadi, tidak perlu lanjut ke pengecekan titik titik lainnya break;
Nah, hasil dari program diatas adalah ada 2 bola yang bisa saling bertubrukan. Oke cukup sekian
dari saya, tutorial ini akan berlanjut ke part 3 dimana akan ada banyak bola yang bertubrukan. Hampir mirip dengan ini, bedanya ada pada line 69-83 dimana akan ada beberapa baris pengecekan.
Tentang Penulis Yudhistira Bayu W Seorang pelajar tampan dan rupawan yang mencoba belajar coding.
