Malisa Huzaifa - Web Multimedia HTML6 Canvas & SVG

84 Kita tambahkan sebuah window.onload=(function() {..} yang mana ketika program kita jalankan maka perintah yang ada didalam fungsi tersebut akan dijalankan. Pada bagian ini terdapat dua instruksi yang sama dengan bagian animasi bergerak yaitu myGameArea.start(); dan btnAnimasi.addEventListener ("click",function(){..}. myGameArea.start(); merupakan sebuah variable yang memiliki beberapa fungsi. Pada bagian awal var myGameArea = {..} adalah membuat sebuah canvas dan menyediakan tiga fungsi yang pada bagian pertama adalah start : function() {..} dimana pada fungsi ini berisikan tinggi dan lebar canvas yang dibuat dengan code his.canvas.width = 200; dan this.canvas.height = 270;. Kemudian menggunakan this.context = this.canvas.getContext("2d"); untuk membuat sebuah objek. Lalu membuat pengaturan tataletak dari canvas dengan code document.body.insertBefore(this.canvas,document.body.childNode s[0]); dan menambahkan pergerakan menggunakan interval dengan code this.interval = setInterval(updateGameArea, 20);. Selanjutanya adalah stop : function() {..} yang mana berisikan perintah learInterval(this.interval); untuk menghilangkan pergerakan interval kotak. Pada bagian terakhir di var myGameArea = {..} adalah clear : function() {..} yang berisikan code untuk menghapus gerakan animasi dari kotak dengan menggunakan his.context.clearRect(0 , 0, this.canvas.width, this.canvas.height);.

RkJQdWJsaXNoZXIy MTM3NDc5MQ==