Algorithma Path Finding #3: Mencari jalur pada posisi yang di klik di layar.

In adalah pembahasan ke 3 dari seri Algorithma Path Finding. Pembahasan pertama bisa Anda baca pada tautan ini.

Pada tulisan sebelumnya kita telah membahas penerapan algorithma path finding dalam bahasa pemrograman.

Tulisan sekarang akan membahas penggunaan algorithma path finding untuk mencari jalur ke posisi yang di-klik di layar. Hal ini banyak ditemui pada banyak game seperti RTS, RPG, Point and Click adventure, dsb.

Saya biasa melakukan hal ini untuk mengetest algorithma apakah sudah berjalan dengan benar. Dengan mengetest berkali-kali di posisi berlainan akan diketahui kalau ada masalah, seperti saat jalur yang dihasilkan tidak sesuai harapan, atau jalurnya malah tidak ada.

Hasilnya bisa dilihat secara daring di sini.

Kode sumbernya bisa di unduh disini.

Setelah di unduh., buka file index.html di browser, kemudian klik pada posisi acak di layar untuk melihat apakah algorithma ini sudah benar apa belum. 

Atau anda bisa mencoba codenya secara daring di bawah ini:

Contoh hasilnya akan tampak seperti dibawah ini.

Setiap kali kita klik di layar, maka algorithma path finding ini akan mencari jalur ke posisi tersebut.

Jika diperhatikan jalur yang dihasilkan mungkin agak sedikit aneh.Seperti tampak pada gambar no 2. Jalurnya terkesan sangat boros dan tidak optimal.

Hal ini karena algorithma ini adalah aglorithma path finding yang paling sederhana dari jenisnya. Saya akan membahas algorithma path-finding dari jenis yang lain pada tulisan berikutnya.

Berikut adalah penjelasan tentang kodenya:

window.onload = () => {
    canvas = document.body.querySelector('canvas');
    canvasCtx = canvas.getContext("2d");
    gbrBola = document.body.querySelector("img#img-bola");
    gbrBox = document.body.querySelector("img#img-box");

    gambarPeta();

    canvas.onclick = (e) => {
        let posx = Math.floor((e.clientX) / 32);
        let posy = Math.floor((e.clientY) / 32);
        bersihkanLayar();
        let hasil = pfCariJalan(1, 1, posx, posy);
        gambarPeta();
        gambarJalan(hasil);
    };
};

Kodenya tidak jauh berbeda dengan kode pada tulisan sebelumnya. Kita cuman menambahkan fungsi onclick() pada canvas yang akan mendeteksi event mouse diklik.

Posisi diklik di layar ditentukan oleh e.clientX dan e.clientY.  Setiap kali layar diklik, maka algorithma path finding akan mencari jalur ke posisi tersebut, kemudian hasilnya digambar di layar.

Sisanya adalah sama dengan kode pada tulisan sebelumnya.

Pada tulisan ini, kita menggunakan kanvas yang statis yang ukurannya tidak berubah mengikuti ukuran browser. Pada tulisan berikutnya, Saya akan membahas bagaimana mengaplikasikan algorithma ini pada kanvas yang berubah-ubah. Namun sebelumnya Saya akan membahas dulu bagaimana membuat kanvas bersifat responsif.

Terima kasih sudah mampir dan membaca.