Rabu, 06 April 2011

tugas modul 10 (bola mantul)





source code
<html lang="en">
<head>
    <title>Animasi Bola dengan Javascript Canvas</title>
    <style type="text/css">
        canvas {
            border: 1px solid black;
            background-color:#99CC99;
        }
    </style>
    <script type="text/javascript" >
        var cv;
        var div;
        var x = 5;
        var y = 5;
        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='red';
            a.fill();
            a.strokeStyle='gray';
            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="canvas-ball-sound.wav" autoplay autobuffer></audio>';
                document.getElementById('sound').appendChild(div);
            }
        }
        function animation() {
            create(cv,x,y,10);
            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>

Tidak ada komentar:

Posting Komentar