lifelong learner — urip iku urup, currently working on accenture.

canvas 2d – event listener

0
Degananda.com -

Event listener vs user event

event adalah suatu kejadian. Listener adalah “pendengar”. Dalam konteks javascript dan canvas event listener adalah suatu fungsi yang menghandle suatu event yang sedang terjadi dalam dom. Contohnya misalkan saat user menekan tombol keyboard atau pada saat mouse click. Pada elemen seperti <button> atau <span> dsb, terdapat user event yang dapat diberikan seperti (onMouseClick), onMouseOver dan lain-lain. Hal seperti itu disebut sebagai user event. Sedangkan user event listener lebih luas dari itu, dia dapat menangkap seluruh user event yang sedang terjadi pada dom (tidak hanya pada elemen tertentu).

Singkatnya perbedaanya adalah user event hanya terbatas pada elemen tertentu(spesifik) sedangkan user event listener lebih global. Keduannya memiliki kegunaan masing-masing sehingga kita akan menggunakannya sesuai dengan kondisi tertentu. Contoh misalkan untuk menghandle sebuah form registrasi , tentunnya kita akan menggunakan user event. Karena setiap form item bernilai spesifik terhadap elemen tertentu. Misalnya di syntax <form>
terdapat user event berupa “ngSubmit”(angular js) / onSubmit pada syntax form. Artinnya event tersebut spesifik hanya untuk form diatas. Jika terdapat dua form maka hanya form “noteForm” inilah yang akan dieksekusi form lainnya tidak akan dieksekusi (submit).

Sedangkan, pada kasus membuat game yang memanfaatkan control berupa keyboard kita akan memilih menggunakan event listener karena tidak ada elemen spesifik melainkan kita akan mengontrol keypad yang ditekan oleh user melalui keyboard. Itulah perbedaan singkat antara user event dan event listener.

Event listener

Pre requisites

Jika anda belum memahami konsep dasar mengenai canvas silahkan melihat ulasan sebelumnya mengenai canvas.

canvas 2d – setup(contex) , tulisan, lingkaran dan kotak

Goal

Tujuan utama kita adalah mempelajari cara menggunakan event listener dengan mendemontrasikan  “menggambar lingkaran” dengan memanfaatkan event listener saat user mengakses tombol arrow pada keyboard. Ilustrasinnya adalah seperti berikut.

canvas awal

ketika user menekan arrow right

ketika user menekan arrow down

ketika user menekan arrow right

intinnya, setiap user menekan salah satu dari tombol arrow maka akan muncul lingkaran disebelah kanan/kiri/atas dari lingkaran sebelumnya. Namun disini kita tidak menerapkan filter agar tidak boleh menggambar lingkaran diluar kanvas karena hanya untuk demonstrasi.

Implementasi

Pertama kita harus membuat canvas dengan menggunakan javascript. Kami menset ukuran dari canvas 800 untuk width dan 500 untuk height. jangan lupa untuk mendapatkan nilai contex dari canvas karena hanya melalui contex inilah kita dapat memodifikasi isi dari canvas (menggambar pada canvas).

// membuat canvas
var canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 500;
document.body.appendChild(canvas);
var contex = canvas.getContext("2d");

setelah itu, kita akan mendefinisikan suatu variable yang berisi posisi x dan y dari lingkaran. Fungsinnya adalah untuk mengidentifikasi letak awal dari lingkaran. Pada saat membuat lingkaran baru kita akan memanfaatkan posisi awal ini untuk ditambah atau kurangkan agar dapat membuat lingkaran baru di posisi yang berbeda.

var pos = {
    x : 30,
    y : 30
}

karena kita akan membuat banyak lingkaran otomatis kode untuk membuat lingkaran harus diletakan pada suatu fungsi agar nantinnya dapat bersifat reuseable diberbagai kondisi.

function drawCircle(){
    contex.beginPath();
    contex.arc(pos.x,pos.y,25,0,25);
    contex.arc()
    contex.stroke();
    contex.closePath();
}

// lignkaran pertama
drawCircle();

stroke() digunakan untuk memberikan garis disekeliling lingkaran. arc(pos x, pos y, diameter lingkaran, startAngle, endAngle). Jangan lupa untuk menuliskan beginPath() dan closePath()  untuk mengidentifikasi dimana dimulainya object lingkaran tersebut (agar tidak tercampur dengan object lainnya). Jangan lupa panggil drawCircle() untuk pertama kali untuk meletakan lingkaran pertama pada pojok kiri atas (x,y)(30,30).

Membuat listener

kali ini kita telah siap untuk membuat event listener. Terdapat banyak sekali event yang dapat dihandle oleh event listener. Kali ini yang akan kita manfaatkan adalah “keydown” atau pada saat keypad pada keyboard di tekan.  Fungsi tersebut akan menghasilkan callback berupa “event” didalamnya terdapat variabel key. Dari variabel key inilah kita dapat identifikasi keypad manakah yang pada saat itu ditekan oleh user.

Pada saat keypad “arrowUp” yang ditekan maka pos.x akan bertambah sebanyak 50. Ketika “arrowDown” ditekan maka pos.x akan berkurang sebanyak 50. Ketika “arrowRight” ditekan maka pos.y akan bertambah sebanyak 50 dan terahir ketika “arrowLeft” ditekan maka pos.y akan berkurang sebanyak 50.

Berikut ini adalah kode untuk mengimplementasikan keadaan diatas.

addEventListener("keydown", function(res){
    if(res.key == "ArrowRight"){
        pos.x += 50;
        drawCircle();
    } else if(res.key == "ArrowLeft"){
        pos.x -= 50;
        drawCircle();
    } else if(res.key == "ArrowDown"){
        pos.y += 50;
        drawCircle();
    } else if(res.key == "ArrowUp"){
        pos.y -= 50;
            drawCircle();
    }
});

done. Maka silahkan jalankan script maka anda akan dapat membuat lingkaran dengan menekan salah satu tombol arrow pada keyboard.

Jika anda bingung daftar user event maka log variabel key dan tekanlah salah satu tombol dari keyboard akan muncul nama dari eventnya. Contoh saat kami menekan tombol “a” maka pada konsol akan muncul seperti berikut ini.

kode untuk menampilkan log diatas

addEventListener("keydown", function(res){
    console.log(res);
});