Malisa Huzaifa - Web Multimedia HTML6 Canvas & SVG

78 dengan menembahkan code ctx.fillStyle ="skyblue"; dan ditutup dengan code ctx.fill();. Terakhir membuat sebuah fungsi untuk mengatur gerakan perpindahan kotak dengan code this.newPos = function() {..} yang didalam fungsi ini terdapat perintah this.angle += this.moveAngle * Math.PI / 360; untuk ukuran pergerakan dari kotak. Kemudian menggunakan this.x += this.speed * Math.sin(this.angle); dan this.y -= this.speed * Math.cos(this.angle); untuk menentukan nilai x dan y dari pergerakan kotak. Sebelumnya pada bagian interval yang ada pada fungsi start di variable var myGameArea = {..} memanggil sebuah fungsi updateGameArea yang pada fungsi ini berisi instruksi untuk memanggil myGameArea.clear();, myGamePiece.newPos(); dan myGamePiece.update();. Berikut ini hasil dari program ketika dijalankan dimana kotak hitam akan mengelilingi lingkaran berwarna skyblue dengan searah jarumjam dan animasi ini akan bisa berjalan ketika button Lihat Animasi diklik. Ketika button belum ada aksi maka yang akan tampil hanya sebuah canvas kosong yang berwarna kuning.

RkJQdWJsaXNoZXIy MTM3NDc5MQ==