Malisa Huzaifa - Web Multimedia HTML6 Canvas & SVG

77 this.type = type; this.width = width; this.height = height; this.speed = 1; this.angle = 0; this.moveAngle = 1; this.x = x; this.y = y; Referensi : w3schools (modifikasi) Setelah itu masuk pada this.update = function() {..} yang berisikan settingan dari lingkaran dan kotak dengan bagian awal inisialisasi ctx = myGameArea.context;. Agar setiap gerakan kotak tidak berantakan gunakan ctx.save(); dan ctx.restore(); untuk menyimpan setiap pergerakan. Code ctx.translate(this.x, this.y); untuk menentukan letak kotak dan ctx.rotate(this.angle); untuk pengaturan rotasi dari gerakan kotak. Kemudian setting warna kotak dengan menggunakan ctx.fillStyle = color; dan membuat ukuran kotak dengan code ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);. Selanjutnya masuk pada bagian menggambar lingkaran dengan mulai dengan code ctx.beginPath(); dan memulai membuat lingkaran dengan ctx.arc(150, 150, 100, 0, 2*Math.PI);. Warna dari lingkaran yang digunakan pada contoh program adalah biru langit

RkJQdWJsaXNoZXIy MTM3NDc5MQ==