Deteksi Tubrukan Objek Dengan HTML5 [Part 3]

Ukuran: px

Mulai penontonan dengan halaman:

Download "Deteksi Tubrukan Objek Dengan HTML5 [Part 3]"

Hamdani Hartanto
7 tahun lalu
Tontonan:

2 Deteksi Tubrukan Objek Dengan HTML5 [Part 3] Oleh: Yudhistira Bayu W BismillahirahmanirahimAssalamualaikum 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... 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));

3 { 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++) return false; 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; 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); false); for (b in balls) { ctx.beginpath(); ctx.arc(balls[b].x, balls[b].y, 30, 0, 2 * Math.PI, ctx.fillstyle = balls[b].color; ctx.fill(); balls[b].x += balls[b].modx; balls[b].y += balls[b].mody;

4 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])) </script> </head> <body> <center> <canvas id="mycanvas" width="640" height="480"> </canvas> </center> </body> </html> Keterangan: - Baris 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 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

5 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; 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]))

6 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. Tentang Penulis Yudhistira Bayu W Seorang pelajar tampan dan rupawan yang mencoba belajar coding.

dokumen-dokumen yang mirip

Deteksi Tubrukan Objek Dengan HTML5 [Part 2]

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