Malisa Huzaifa - Web Multimedia HTML6 Canvas & SVG

86 Langkah selanjutnya masuk pada this.update = function() {..} yang berisikan code untuk membuat sebuah kotak yang nantinya akan digunakan untuk animasi bounc dengan bagian awal inisialisasi ctx = myGameArea.context; dan menentukan warna kotak dengan tx.fillStyle = color;. Kemudian mengatur ukuran dari kotak dengan menggunakan ctx.fillRect(this.x, this.y, this.width, this.height);. Pada function updateGameArea() {..} terdapat beberapa code yang digunakan untuk memanggil fungsi yang sudah disetting sebelumnya yaitu myGameArea.clear();myGamePiece.newPos();myGamePiece.upda te(). Untuk fungsi clear(); sudah kita bahas pada bagian var myGameArea = {..} begitupun dengan update(); yang terletak pada bagian function component(width, height, color, x, y, type) {..}. Selanjutnay kita bahas bagian this.newPos = function() {..} yang berisikan code untuk pergerakan animasi pada kotak ketika jatuh dengan menggunakan this.gravitySpeed += this.gravity; dan menentukan this.x += this.speedX; serta this.y += this.speedY + this.gravitySpeed;. Perintah terakhir pada fungsi ini adalah memanggil fungsi lain yaitu this.hitBottom();. Maka selanjutnya kita sediakan sebuah fungsi this.hitBottom = function() {..} yang mana pada fungsi terdapat perintah untuk proses bounc pada kotak yang telah bergerak jatuh dengan menggunakan code if (this.y > rockbottom) {..} yang jika terpenuhi maka aka nada proses menentukan nilai this.y = rockbottom; dan update nilai gravity

RkJQdWJsaXNoZXIy MTM3NDc5MQ==