Game
sederhana menggunakan jquery
Assalamualaikum
wr.wb
Pagi
kawan, pada hari ini saya akan sharing tentang Tutorial membuat game
sederhana menggunakan jquery
A.
Pengertian
jQuery hanyalah
sebuah “bantuan” ke dalam JavaScript. Untuk membuat kode program
yang kompleks seperti game ini, kita tetap memerlukan JavaScript
dasar (tidak bisa hanya dengan jQuery saja). Disini
saya memiliki 9 kotak berwarna abu-abu. Objektif dari game ini
adalah:Temukan
kotak warna hijau dalam 3 kali klik. Untuk
mengulangi game, silahkan klik tombol “RERUN”
di
bagian kanan bawah. Atau jika anda menjalankannya di web browser
sendiri, cukup refresh halaman.
Posisi kotak hijau akan random (diacak), sehingga selalu
berpindah-pindah.
B.
Latar belakang
Game
merupakan sebuah program yang cukup rumit untuk dirancang, belum lagi
aspek grafis atau suara untuk membuat permainan lebih menarik. Paling
tidak dari game sederhana ini anda bisa mendapat sedikit pemahaman
bagaimana membuat game berbasis web.
C.
Alat dan bahan
- Komputer / laptop
- Jquery.js
- Text editor
D.
Tujuan
Membuat
Game Tebak Kotak dari Jquery
E.
Langkah - langkah
1.
Membuat file index.html atau index.php
2.
Buat script html berikut:
<!DOCTYPE
html><html><head><meta
charset="UTF-8"><title>Belajar
Game JQuery</title>
</head>
<body>
</body>
</html>
3.
Tambahkan koneksi jquery.js di bawah tag <title>
</title>
<script
src="jquery-2.1.4.js"></script>
4.
Tambahkan script jquery nya di bawah script koneksi jquery
<script>
$(document).ready(function()
{ //
generate angka acak 1-9 var
angka
= Math.floor((Math.random() * 9) + 1); //
tambah awalan agar sesuai dengan id box, misal: box3 var
box_ajaib
= "box"+angka; //
siapkan variabel counter var
jumlah_klik
= 0; var
ketemu
= "belum"; $("div").click(function()
{ //
hitung jumlah klik jumlah_klik++; $("#hitung").html("Jumlah
Klik = "+jumlah_klik); //
ubah warna background box if
($(this).attr("id")==box_ajaib)
{ $(this).css("background-color","green"); ketemu
= "sudah"; } else
{ $(this).css("background-color","red"); } //
cek hasil game if
((ketemu=="sudah")
&& (jumlah_klik <= 3)) { $("#hasil").html("You
Win!"); } if
((ketemu=="belum")
&& (jumlah_klik >= 3)) { $("#hasil").html("Game
Over... coba lagi gan!"); } }); }); </script>
5.
Tambahkan CSS dibawah script jquery
<style> div
{ width:
70px; height:
70px; background-color:
silver; border:
2px solid black; padding:
0 10px; float:
left; margin:
5px; cursor:
pointer; } </style>
6.
Masukkan script HTML didalam tag <body> </body>
<h2>Game
"Kotak"
Duniailkom</h2><p>Anda
hanya punya 3 kali klik untuk menemukan kotak Hijau</p><div
id="box1"></div><div
id="box2"></div><div
id="box3"></div> <br
style="clear:both"><div
id="box4"></div><div
id="box5"></div><div
id="box6"></div> <br
style="clear:both"><div
id="box7"></div><div
id="box8"></div><div
id="box9"></div> <br
style="clear:both"><h3
id="hitung"></h3><h1
id="hasil"></h1>
7.
Kemudian Simpan file.
F.
Referensi
Sekian
Tutorial dari saya selamat mencoba dan semoga bermanfaat
Wassalamualaikum
wr.wb