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...

Animasi [Bola] Dengan HTML5 Part 3

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.


About Author

Yudhistira Bayu W

Seorang pelajar tampan dan rupawan yang mencoba belajar coding.


Comment & Discussions

  • nggak ada demo-nya ini mas?

    • Yudhistira Bayu W

      karena ini cuma simple html jadi ga pake demo, toh mencobanya ga terlalu ribet mas :D


  • iwan
    contact person mas ?

  • Please LOGIN before if you want to give the comment.