MOHAMAD NUR AFANDI: April 2011

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>

tugas modul 10 (canvas&smily)

source code

 <html lang="en">

<head>

    <title>Smily dengan Javascript Canvas</title>

    <style type="text/css">

        canvas {

            border: 1px solid black;

            background-color:#6666FF;

        }

    </style>

    <script type="text/javascript" >

        function smily() {

            var cv = document.getElementById('canvas').getContext('2d');

            if (cv == 'undefined') alert('canvas failed');       

            //kepala

            cv.beginPath();

            cv.arc(150,150,120,0,Math.PI*2,true);

            cv.fillStyle='yellow';

            cv.fill();

            cv.stroke();

            cv.closePath();

            //mata

            cv.beginPath();

            cv.arc(90,110,10,0,Math.PI*2,true);

            cv.arc(200,110,10,0,Math.PI*2,true);

            cv.fillStyle='black';

            cv.fill();

            cv.closePath();

            //mulut

            cv.beginPath();

            cv.arc(150,130,100,0.6,2.5,false);

            cv.stroke();

            cv.closePath();

        }

    </script>

</head>

<body onLoad="smily();">

    <canvas id="canvas" width="300" height="300"></canvas>

</body>

</html>