Tugas Praktikum 9 – Membuat Animasi Bola Memantul dengan Canvas Browser

Tugas Praktikum ini akan Memodifikasi file HTML dan membuat Animasi bola memantul secara acak dan bila bola membentur dinding maka akan mengeluarkan bunyi dan dengan memanfaatkan fungsi Canvas pada sebuah web browser. Canvas ini dapat digunakan untuk menggambar secara langsung pada fungsi Layar web browser. Untuk menjalankan file ini dapat dipanggil secara langsung melalui browser dan apabila terdapat masalah maka dengan cara memanggil lewat server offline seperti XAMPP atau AppServ dengan file tersebut diletakkan pada folder htdocs.

Berikut ini adalah Screen Shoot yang dihasilkan

Untuk Mendownload Source dan Komponennya silahkan klik download di bawah ini

Download

Download

 

 

 

Source Code HTML

<html lang="en">
<head>
 <title>Animasi Bola Memantul pada Canvas Browser</title>
 <style type="text/css">
 canvas {
 border: 4px outset lime;
 background:url(Background.jpg);
 }
 </style>

</head>

<body bgcolor="#000000">
 <div>
 <canvas id="canvas" width="400" height="300"></canvas>
 </div>

 <script type="text/javascript" >
 var Dom = {
 get: function(el) {
 if (typeof el === 'string') {
 return document.getElementById(el);
 } else {
 return el;
 }
 },
 add: function(el, dest) {
 var el = this.get(el);
 var dest = this.get(dest);
 dest.appendChild(el);
 }
 };
 var cv;
 var wav;
 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.beginPath();
 a.arc(x,y,r,0,Math.PI*2,true);
 a.fillStyle='yellow';
 a.fill();
 a.strokeStyle='Black';
 a.stroke();
 a.closePath();
 }
 function clear(a) {
 a.clearRect(0,0,w,h);
 }
 function move() {
 y += dy;
 if (y > h || y < 0) {
 dy = -dy;
 wav = document.createElement('div');
 wav.innerHTML = '<audio src="ball.wav" autoplay autobuffer></audio>';
 Dom.add(wav, 'add');
 }
 x += dx;
 if (x > w || x < 0) {
 dx = -dx;
 wav = document.createElement('div');
 wav.innerHTML = '<audio src="ball.wav" autoplay autobuffer></audio>';
 Dom.add(wav, 'add');
 }
 }
 function animation() {
 clear(cv);
 create(cv,x,y,10);
 move();
 }
 function animate() {
 cv = document.getElementById('canvas').getContext('2d');
 if (cv == 'undefined') alert('canvas failed');       
 return setInterval (animation,50);
 }
 animate();
 </script>
 <div id="add"></div>
</body>
</html>

 

About bagusware

Aku adalah aku, dan kamu adalah kamu... Aku dan kamu pasti bisa...

Posted on 7 April 2011, in PTI478. Bookmark the permalink. 2 Komentar.

  1. wahhhhhhhhh, kamu anak IT ya brooowwww??? keren bgt.

    • Iya sob… aq anak s1 Informatika…..
      ini tugas kuliah ku…. sama Dosennya disuruh upload di Blog….hehe..
      Thank kunjungannya…🙂

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: