Latihan 1: Canvas Animation — Creative Web

Latihan 1 dari materi Canvas Animation di Creative Web — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Raka mau sebutir biji kopi (bola berjari-jari 20) memantul di banner 600 × 400. Kode awal sudah punya variabelnya (x = 100, y = 100, dx = 2, dy = 3, radius = 20, canvasWidth = 600, canvasHeight = 400), loop yang memanggil update() 100 kali, dan dua console.log di akhir. Biarkan semuanya. Satu kali update() sama dengan satu frame, dengan gerak per frame.

Isi function update():

Geser posisinya: x += dx dan y += dy.
Kalau x + radius > canvasWidth atau x - radius < 0, balik arah horizontal: dx *= -1.
Kalau y + radius > canvasHeight atau y - radius < 0, balik arah vertikal: dy *= -1.

Output-nya harus persis dua baris ini, berurutan:

300,364
2,-3

Yang juga dinilai: kodenya memakai x += (atau x = x + ...), posisi dan arah akhirnya sudah berubah dari nilai awal, dan bolanya tetap di dalam banner (x - radius paling kecil 0 dan x + radius paling besar canvasWidth, begitu juga untuk y).

Hint

Satu update adalah satu frame: geser posisinya dulu, lalu cek apakah tepi sudah tersentuh. Kalau iya, balik arah di sumbu itu saja.
Di dalam update(): x += dx; y += dy; lalu dua if terpisah, satu untuk sumbu x (x + radius > canvasWidth || x - radius < 0) dan satu untuk sumbu y dengan canvasHeight. Radius ikut dihitung, karena yang menyentuh tepi adalah pinggir bolanya, bukan titik tengahnya.
x += dx; y += dy; if (x + radius > canvasWidth || x - radius < 0) dx *= -1; if (y + radius > canvasHeight || y - radius < 0) dy *= -1;

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Canvas Animation — Creative Web

Hint

Memperbarui Aplikasi