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 :
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 | <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 :
1 2 3 4 5 6 7 | 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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <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