Bismillahirahmanirahim
Assalamualaikum wr.wb
Setelah sebelumnya ada 2 part tutorial yang masih berhubungan dengan animasi. Kini kita masuk ke part 3. Untuk baca part 2 silahkan Klik Disini. Sebelumnya juga sudah dibahas tentang animasi gerak gambar, kini kita akan mencoba sebuah animasi bola. Semakin Seru kan? Nanti akan ada tutorial tentang animasi selanjutnya, hingga berakhir pada pembuatan game berbasis web menggunakan HTML5 dan css3. Yuk langsung saja kita mulai ngoding, seperti biasa ya. Keterangan setiap kodingan ada di bawah dari semua kode ini
<!DOCTYPE HTML> <html> <head> <style> canvas { border-width: 1px; border-style: solid; } </style> <script> var canvas; var ctx; var circleX = 70; var circleY = 70; var circleXModifier = 2; var circleYModifier = 2; window.onload = function(){ canvas = document.getElementById("myCanvas"); ctx = canvas.getContext("2d"); setInterval(draw, 1.6); }; function draw() { ctx.fillStyle = "#fff"; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.beginPath(); ctx.arc(circleX, circleY, 70, 0, 2 * Math.PI, false); ctx.fillStyle = "#FF0000"; ctx.fill(); circleX += circleXModifier; circleY += circleYModifier; if (circleX >= canvas.width-70) circleXModifier = -2; else if (circleX < 70) circleXModifier = 2; if (circleY >= canvas.height-70) circleYModifier = -2; else if (circleY < 70) circleYModifier = 2; } </script> </head> <body> <center> <canvas id="myCanvas" width="640" height="480"> </canvas> </center> </body> </html>
Keterangan:
var circleX = 70; var circleY = 70; var circleXModifier = 2; var circleYModifier = 2;
- Baris 14-17 Kita membuat variabel global dimana circleX adalah posisi X bola dan circleY adalah posisi Y bola, circleXModifier adalah kecepatan X dari bola dan circleYModifier adalah kecepatan Y dari bola. Dalam kata lain, bola ini digerakan berdasarkan tekanan dari 2 sisi, yaitu sisi vertical dan horizontal.
ctx.beginPath(); ctx.arc(circleX, circleY, 70, 0, 2 * Math.PI, false); ctx.fillStyle = "#FF0000"; ctx.fill();
- Baris 31-34 dilakukan sebuah penggambaran bola dengan warna merah sesuai dengan lokasi yang dimiliki oleh circleX dan circleY
circleX += circleXModifier; circleY += circleYModifier;
- Baris 36 dan 37 merupakan aturan perubahan nilai circleX dan circleY yang selalu ditambahkan oleh nilai circleXModifier dan circleYModifier sehingga bola selalu bergerak
if (circleX >= canvas.width-70) circleXModifier = -2; else if (circleX < 70) circleXModifier = 2;
- Baris 39-42 adalah cara untuk membatasi posisi x dari bola sehingga ia tidak akan bisa keluar dari area canvas
if (circleY >= canvas.height-70) circleYModifier = -2; else if (circleY < 70) circleYModifier = 2;
- Baris 44-47 adalah cara untuk membatasi posisi y dari bola sehingga tidak keluar dari kanvas.
Cukup sekian dari saya, jika ada yang ditanyakan bisa lewat facebook saya. fb.com/dhistira.bayu untuk fast respond. Sekian dari saya, kurang lebihnya mohon maaf.