75 Kita mulai pada bagian javascrip dimana pada bagian awal kita lakukan inisialisasi untuk bagian button dengan menggunakan const btnAnimasi = document.querySelector("#animasi"); dan menambahkan sebuah variable baru dengan nama var myGamePiece;. Kemudian menambahkan perinta window.onload=(function(){..} yang ketika program di jalankan maka perintah didalam fungsi tersebut akan dieksekusi. Terdapat dua perintah pada window.onload=(function()dimana yang pertama adalah myGameArea.start(); berguna untuk menampilkan canvas berdasarkan pengaturan pada fungsi start(); sedangkan yang kedua adalah btnAnimasi.addEventListener("click",function(){..} berfungsi untuk menampilkan kotak animasi. Kita akan bahas dulu pada bagian myGameArea.start(); yang merupakan memanggil proses yang ada pada variable var myGameArea{..}. Pada variable ini terdapat program untuk membuat sebuah canvas baru dengan code canvas : document.createElement("canvas") dimana setelah canvas dibuat terdapat tiga fungsi yang mana fungsi pertama adalah start : function() {..} yang berisikan ukuran dari canvas dengan code this.canvas.width = 300; dan this.canvas.height = 300; untuk ukuran lebar dan tinggi canvas. Kemudian menggunakan this.context = this.canvas.getContext("2d"); untuk membuat sebuah objek. Selanjutnya menambahkan document.body.insertBefore (this.canvas,document.body.childNodes[0]); untuk meletakkan
RkJQdWJsaXNoZXIy MTM3NDc5MQ==