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 :
Bisa dilihat di : http://nl02.rumahilmu.or.id/contoh/html5/gamewaktu.html
Selamat bereksperimen. (reza@rumahilmu.or.id)
Leave a Reply