JavaScript & HTML5 : Menggerakan Objek dengan Acuan Waktu

Oleh : Reza Ervani

بسم الله الرحمن الرحيم

Sekarang mari kita coba bereksperimen dengan fungsi pewaktuan di JavaScript untuk memperkaya pengetahuan kita tentang HTML5.

Di JavaScript kita bisa menggunakan objek Date

Memanfaatkan objek Date, kita dapat memanggil detik jam seperti contoh berikut ini :


<html>
<head>
<title>Contoh Game Berbasis Waktu | Rumah Ilmu Indonesia</title>
<script type="text/javascript">
function waktu() {
var nilai = new Date();
var detik = nilai.getSeconds();

var bidang = document.getElementById("tampilkantanggal");

bidang.innerHTML = detik;
setTimeout(function(){waktu()},1000);
}
</script>
</head>
<body onload="waktu()" >
<p id="tampilkantanggal"></p>
</body>

Contohnya dapat anda lihat di : http://rumahilmu.net/contoh/html5/pewaktu.html

Selanjutnya kita manfaatkan keluaran dari sana untuk mengatur posisi objek di canvas seperti berikut :


if (detik < 59) {
anm.fillStyle = 'green';
anm.fillRect(50,geser,50,50);
anm.clearRect(50,(geser-1),50,5);
} else {
anm.clearRect(50,295,50,50);
}

Sehingga kode lengkapnya menjadi


<html>
<head>
<title>Contoh Game Berbasis Waktu | Rumah Ilmu Indonesia</title>
<style>
#inikanvas {
border: 1px solid blue;
}

</style>
<script type="text/javascript">
function waktu() {
var nilai = new Date();
var detik = nilai.getSeconds();

var bidang = document.getElementById("tampilkantanggal");

var kanvas = document.getElementById("inikanvas");

bidang.innerHTML = detik;
setTimeout(function(){waktu()},1000);

var anm = kanvas.getContext('2d');

var geser = detik*5;

if (detik < 59) {
anm.fillStyle = 'green';
anm.fillRect(50,geser,50,50);
anm.clearRect(50,(geser-1),50,5);
} else {
anm.clearRect(50,295,50,50);
}

}
</script>
</head>
<body onload="waktu()" >
<h1 id="tampilkantanggal"></h1>
<canvas id="inikanvas" width="500" height="350"></canvas>

</body>
</html>

Tampilan animasi sederhana kita tersebut akan tampak seperti pada gambar berikut :

Screenshot from 2014-05-11 20:48:24

Bisa dilihat di : http://nl02.rumahilmu.or.id/contoh/html5/gamewaktu.html

Selamat bereksperimen. (reza@rumahilmu.or.id)

About Reza Ervani
Adalah pendiri programming.rezaervani.com -

About Reza Ervani 381 Articles
Adalah pendiri programming.rezaervani.com -

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.