Sering
Kita jumpai dalam sebuah sebuah web game terdapat animasi bola yang
memantulkan, ketika bola tersebut bersentuhan atau kena batas halaman web atau
batas canvas yang sudah di tentukan, sehingga bola tersebut berpindah ke tempat
yang sumbunya (x dan y) berbeda. Variabel yang digunakan dalam animasi tersebut
adalah canvas, ctx, circleX, circleY circleXModifier dan circleYModifier dan untuk sebagai
pengontrol perpindahan bolanya dilakukan fungsi if-else.
Dibawah
ini adalah langkah-langkah untuk membuat animasi bola yaitu;
1. Buka
notepad atau notepad ++
2. Tuliskan
script dibawah ini dalam notepad atau notepad ++
<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:
Script yang berwarna merah variable
global dimana circle adalah posisi x bola, circle adalah posisi y bola,
circleXModifier adalah kecepatan x dari bola, dan circle adalah kecepatan y
dari bola.
Script yang berwarna hijau
menerangkan melakukan penggambaran bola dengan warna merah sesuai dengan lokasi
yang dimiliki oleh circleX dan circle.
Script yang berwarna biru
merupakan perubahan nilai circle dan circle yang selalu ditambahkan oleh
circleXModifier dan cirleYModifier sehingga mengakibatkan bola selalu bergerak.
Script yang berwarna ungu,
merupakan cara untuk membatasi posisi x dari bola sehingga tidak keluar dari
canvas
Dan Script berwarna orange
merupakan cara untuk membatasi posisi y dari bola sehingga tidak keluar dari
canvas
3. Simpan script diatas dengan
extend atau tipe file “.html”.
4. Setelah disimpan, bukalah file
tersebut dan hasilkan seperti gambar diatas.
0 komentar:
Post a Comment