Bismillahirahmanirahim
Assalamualaikum wr.wb
Alhamdulillah kita sudah sampai di part terakhir yaitu part ke 3 dari tutorial tubrukan objek dengan HTML5. Jika ingin baca part sebelumnya, silahkan klik Part 1, Part 2. Pada part 2 telah disampaikan tentang collision 2 objek, nah sekarang bagaimana kalau banyak objek? Itulah yang akan kita bahas di part 3 ini. Dengan memodifikasi dari program di part 2, kita bisa melakukan hal tersebut. Ini programnya dibawah, dan penjelasan ada di akhir seperti biasa.
<!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;
function Ball() {
r = Math.round(Math.random() * 255);
g = Math.round(Math.random() * 255);
b = Math.round(Math.random() * 255);
this.x = 30+(Math.random()*(canvas.width-60));
this.y = 30+(Math.random()*(canvas.height-60));
this.modx = 1;
this.mody = 1;
this.color = "rgb("+r+","+g+","+b+")";
this.hit = function(other) {
for (var i=this.x-30; i<this.x + 30; i++) {
for (var j=this.y-30; j<this.y + 30; j++) {
if (i >= other.x-30 &&
i <= other.x + 30 &&
j >= other.y-30 &&
j <= other.y + 30) {
this.modx *= -1;
this.mody *= -1;
other.modx *= -1;
other.mody *= -1;
return true;
break;
}
}
}
return false;
}
}
window.onload = function(){
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
for (var x=0; x<5; x++) {
balls[x] = new Ball();
}
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=0; i<balls.length; i++) {
for (var j=i+1; j<balls.length; j++) {
if (balls[i].hit(balls[j]))
break;
}
}
}
</script>
</head>
<body>
<center>
<canvas id="myCanvas" width="640" height="480">
</canvas>
</center>
</body>
</html>
Keterangan:
- Baris 21-23 yang ada dibawah ini adalah pada class Ball (template object ball) kita membuat warna RGB menggunakan random, sehingga setiap bola yang dibuat akan memiliki warna yang berbeda.
r = Math.round(Math.random() * 255); g = Math.round(Math.random() * 255); b = Math.round(Math.random() * 255);
- Pada kode dibawah ini, terdapat pada baris 25-26 berfungsi untuk mengatur pada setiap ball, posisi x dan y kita random juga supaya setiap bola yang dibuat selalu memiliki letak yang berbeda
this.x = 30+(Math.random()*(canvas.width-60)); this.y = 30+(Math.random()*(canvas.height-60));
- Pada baris 29 seperti pada kode dibawah ini, kita mengeset warna bola sesuai RGB yang tadi telah dibuat secara random
this.color = "rgb("+r+","+g+","+b+")";
- Baris 30-47, kita membuat fungsi di dalam class Ball yang isinya adalah mengecek apakah ball tersebut bersinggungan dengan ball yang lain atau tidak. Tidak seperti pada contoh sebelumnya di mana fungsi pengecekan terdapat pada setiap loop yang kita buat, di sini kita memasukkan fungsi tersebut pada setiap objek ball. Dengan demikian pengecekannya akan menjadi lebih mudah.
this.hit = function(other) {
for (var i=this.x-30; i<this.x + 30; i++) {
for (var j=this.y-30; j<this.y + 30; j++) {
if (i >= other.x-30 &&
i <= other.x + 30 &&
j >= other.y-30 &&
j <= other.y + 30) {
this.modx *= -1;
this.mody *= -1;
other.modx *= -1;
other.mody *= -1;
return true;
break;
}
}
}
return false;
}
- Kode dibawah ini adalah kode yang terdapat pada baris 55-57, yang berguna untuk membuat 5 objek bola, kemudian dimasukkan ke dalam array balls.
for (var x=0; x<5; x++) {
balls[x] = new Ball();
}
- Kode dibawah adalah kode yang terdapat pada baris 86-91, yang berfungsi untuk setiap ball kita loop, kemudian cukup memanggil fungsi hit() untuk engecek apakah terjadi sunggungan atau tidak. Jika terjadi, maka lakukan break.
for (var i=0; i<balls.length; i++) {
for (var j=i+1; j<balls.length; j++) {
if (balls[i].hit(balls[j]))
break;
}
}
Akhirnya tuntas juga program nya dari part 1 sampai part 3. Nah jika kalian sudah mencoba program diatas, hasilnya adalah akan ada banyak ball yang terdapat di canvas, dan akan saling bertabrakan dengan warna yang berbeda beda. Oke, cukup sekian dari saya.
