Source Code :
<html lang="en">
<head>
<title>Animasi Bola Javascript Canvas</title>
<style type="text/css">
canvas {
border: 5px solid black;
background-color:#990066;
}
</style>
<script type="text/javascript" >
var cv;
var div;
var x = 10;
var y = 10;
var dx = 20;
var dy = 20;
var w = 400;
var h = 300;
function create(a,x,y,r) {
a.clearRect(0,0,w,h);
a.beginPath();
a.arc(x,y,r,0,Math.PI*2,true);
a.fillStyle='yellow';
a.fill();
a.strokeStyle='red';
a.stroke();
a.closePath();
}
function move() {
y += dy;
x += dx;
if (y > h || y < 0 || x > w || x < 0) {
if (y > h || y < 0) dy = -dy;
if (x > w || x < 0) dx = -dx;
div = document.createElement('div');
div.innerHTML = '<audio src="ball-sound.wav" autoplay autobuffer></audio>';
document.getElementById('sound').appendChild(div);
}
}
function animation() {
create(cv,x,y,12);
move();
}
function animate() {
cv = document.getElementById('canvas').getContext('2d');
if (cv == 'undefined') alert('canvas failed');
return setInterval (animation,100);
}
</script>
</head>
<body onLoad="animate();">
<div id="sound"><canvas id="canvas" width="400" height="300"></canvas></div>
</body>
</html>
Postingan
Tidak ada komentar:
Posting Komentar