PROGRAM ANIMASI JAVASCRIPT BOLA PANTUL

Artikel kali ini tentang cara membuat animasi java script. Dalam program animasi ini menggunakan ekstensi html dalam penyimpanannya. Berikut listing programnya

<canvas height="600" id="surface" width="1000" ></canvas>

//ini membuat tentang ukaran layar yang akan tampil setelah programnya sukses.

<script type="text/javascript">

//membuat variable dan menentukan jari-jari  

    var ball = {

      x: 100, // Letak memantul, misalnya center, left, right.

      y: 300, // Tinggi rendahnya pantulan bola

      r: 100, // Besar kecil bolanya pantulan bola,silahkan tambahin atau kurangi ukurannya(modifikasi)

      vx: 10, // Memantul kesamping, jika 0 maka memantul keatas

      vy: 10, //Tinggi pantulannya, jika 10 pantulannya lebih tinggi dan jika 0 pantulan biasa

      elasticity:1 // ini merupakan kecepatan pantulan yang diberikan, silahkan modifikasi

    };

//memanggil canvas di tag HTML    

    var canvas = document.getElementById("surface");

    var ctx = canvas.getContext('2d');

    

    setInterval(function() {

      ctx.save();

        ctx.fillStyle = "rgba(174, 2,252, .226)";

        ctx.fillRect(0, 0, canvas.width, canvas.height);

      ctx.restore();

      

//mengkonfigurasi secara fisik

      

      // 1 - memberikan fungsi velocity ke (vx -> x)

      ball.x += ball.vx

      ball.y += ball.vy

      // 2 - memberikan drag/friction ke dalam velocity

      ball.vx *= .99

      ball.vy *= .99

      

      // 3 - memberikan gravity ke dalam velocity

      ball.vy += 1.25

      // 4 - cek ulang lagi

      if (ball.y + ball.r > canvas.height) {

        ball.y = canvas.height - ball.r;

        ball.vy = -Math.abs(ball.vy);

        ball.vy *= ball.elasticity;        

      };

//menggambar bola dengan metode arc

      ctx.save();

        ctx.translate(ball.x, ball.y);

        ctx.fillStyle = "#03fbfe";

        ctx.beginPath();

   ctx.arc(0, 0, ball.r, 0, Math.PI * 2, true);        

        ctx.closePath();

        ctx.fill();

      ctx.restore();

    }, 1000 / 77);

  </script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>**** Siman Mendrofa ***</title>

<script type="text/javascript">

    function animateTitle(){

        var title=document.title;

        document.title=title.substr(1,title.length)+title.substr(0,1);                

    }

    setInterval(animateTitle,100);

</script>

</head>

Seperti Berikut Hasilnya nanti, tapi ini hanya dalam bentuk gambar, yang aslinya dalam bentuk animasi bola memantul.