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:
<!DOCTYPE HTML>
<html>
<head>
<style>
canvas {
border-width: 1px;
border-style: solid;
}
</style>
<script>
var canvas;
var ctx;
var balls = [];
var circleX = 30;
var circleY = 30;
var circleXModifier = 2;
var circleYModifier = 2;
window.onload = function(){
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
var newball1 = new Object();
var newball2 = new Object();
newball1.x = 30;
newball1.y = 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[0].x + 30; i++) {
for (var j=balls[0].y-30; j<balls[0].y + 30; j++) {
if (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;
}
}
}
}
</script>
</head>
<body>
<center>
<canvas id="myCanvas" width="640" height="480">
</canvas>
</center>
</body>
</html>
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<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<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 *= -1; balls[0].mody *= -1; balls[1].modx *= -1; balls[1].mody *= -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.
