Pembahasan soal lks Web technology modul client

Membuat Pointer Mouse

Langkah pertama kita membuat class pointer terlebih dahulu.

class pointer {
        constructor() {
            this.x = 500
            this.y = 300
        }
        draw() {
            context.beginPath();
            context.drawImage(pointerImage, this.x, this.y, 50, 50);
            context.closePath();
        }
    }

Kemudian kita panggil kelas pointer kedalam variabel.

const drawpointer = new pointer()

Kita panggil kedalam fungsi main.

function main() {
        requestAnimationFrame(main)
        drawbg()
        drawgun.draw()
        //panggil kelas pointer
        drawpointer.draw()

        drawheader()
    }

agar pointer bisa bergerak sesuai dengan mouse, tambahkan kode ini.

canvas.addEventListener('mousemove', (e) => {
        drawgun.x = e.clientX - 100

        //tambahkan kode ini
        drawpointer.x = e.clientX - 25
        drawpointer.y = e.clientY - 25
    })

Hasilnya akan terlihat seperti ini.

Menambahkan Target

Langkah pertama adalah membuat kelas target dan sebuah variabel yang berisi array kosong di dalam fungsi initializeGame.

let targetArr = []
    
    class target {
        constructor() {
            this.x = [100, 250, 400, 550, 700,][Math.floor(Math.random() * 5)]
            this.y = [10, 160, 310][Math.floor(Math.random() * 3)]
            this.image = data.target === '1' ? targetImage1 : data.target === '2' ? targetImage2 : data.target === '3' ? targetImage3 : targetImage1;
            this.velocity = { x: 5, y: 0 }
            this.w = 150
            this.image
        }
        draw() {
            context.beginPath();
            context.drawImage(this.image, this.x, this.y, this.w, this.w);
            context.closePath();
        }
        update() {
            this.x += this.velocity.x
            this.y += this.velocity.y
            this.draw()
        }
    }

Dalam kode di atas, kita akan mengacak nilai x dan y agar titik target muncul secara acak. Kemudian, kita munculkan target sesuai dengan variabel data dari local storage.

velocity berfungsi untuk menggerakkan target, jadi pada fungsi update kita menambah nilai x dan y dengan nilai pada velocity.

Lalu kita buat perulangan untuk memasukkan kelas target ke array targetArr.

for (let i = 0; i < 3; i++) {
        targetArr.push(new target())
    }

Langkah selanjutnya memanggil di fungsi main.

function main() {
        requestAnimationFrame(main)
        drawbg()
        //tambahkann kode ini 
        targetArr.forEach((e, i) => {
            e.update()
            if (e.x + e.w >= 990) {
                e.velocity.x = -5
            } else if (e.x <= 10) {
                e.velocity.x = 5
            }
        });

        drawgun.draw()

        drawpointer.draw()

        drawheader()
    }

di dalam kode diatas kita keluarkan isi arary dengan foreach kemudian kita panggil kelas target. dan kita tambahkan logika ketika target menyentuh batas layar maka akan bergerak ke arah sebaliknya.

Hasilnya terlihat seperti ini.

Membuat logika klik target

Sekarang kita akan membuat logika ketika klik target.

pertama buat fungsi untuk menambahkan target dulu.

function gentarget() {
        if (targetArr.length < 3) {
            targetArr.push(new target())
        }
    }

kemudian kita buat logikanya.

canvas.addEventListener('mousedown', (e) => {
        targetArr.forEach((val, ind) => {
            if (
                e.clientX >= val.x &&
                e.clientX <= val.x + val.w &&
                e.clientY >= val.y &&
                e.clientY <= val.y + val.w
            ) {
                targetArr.splice(ind, 1)
                score += 30
                gentarget()
            } else {
                if (score > 0) {
                    score -= 10
                }
            }
    
        });
    
        
    })

Jika kita mengklik target dengan benar, maka kita akan menghapus target tersebut, menghasilkan target baru, dan menambah skor kita. Namun, jika kita salah mengklik, skor kita akan berkurang.

 

Sebagai penutup, menguasai modul client dalam teknologi web bukan cuma bikin pondasi pengembangan web kamu jadi kokoh, tapi juga membuka pintu buat bikin aplikasi yang lebih interaktif dan responsif. Dengan memakai konsep-konsep keren seperti manipulasi DOM, penanganan Event, dan AJAX, kita bisa ciptain pengalaman pengguna yang lebih dinamis dan menarik. Semoga artikel ini ngasih wawasan yang berguna dan bikin kamu semangat terus buat belajar dan bereksperimen dengan teknologi web. Selamat berkarya!