Membuat Permainan Sederhana dengan JQuery
Mohamad Mansur 14 November 2016
Game yang akan saya buat terbilang sangat sederhana agar kode programnya juga tidak kompleks.
Perlu juga saya informasikan, 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). Baik, sebelum membahas kode progamnya, langsung saja anda praktek ”Game Kotak WoW”. Disini saya memiliki 12 kotak berwarna abu-abu. Objektif dari game ini adalah: Temukan kotak warna kuning dalam 5 kali klik:
Untuk mengulangi game, jika anda menjalankannya di web browser sendiri, cukup refresh halaman. Posisi kotak kuning akan random (diacak), sehingga selalu berpindah-pindah. Bisakah anda menebak apa saya yang diperlukan untuk membuat game seperti ini? Pertama, tentunya saya harus menyiapkan 12 ‘kotak’. Ini bisa dibuat dengan tag <div id=”box”></div> seperti ini. Selanjutnya, saya menggunakan event click pada setiap box agar ketika di klik, warnanya berubah, ini bisa dilakukan dengan method css() jQuery. Untuk seluruh keterangan yang tampil, saya menggunakan method html(). Misalnya memampilkan hasil counter (berapa banyak klik) dan hasil game, apakah itu “gameover” atau “you win!”.
Yang cukup susah adalah membuat aturan game-nya. Disini saya menggunakan perintah JavaScript dasar. Misalnya untuk menghasilkan angka acak, saya menggunakan method Math.random(). Ini adalah fungsi bawaan JavaScript untuk membuat angka acak.
Baik, berikut kode lengkap “Game Kotak WoW”:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery untuk permainan</title>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() {
// generate angka acak 1-12
var angka = Math.floor((Math.random() * 12) + 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","yellow");
ketemu = "sudah";
}
else {
$(this).css("background-color","black");
}
// cek hasil game
if ((ketemu=="sudah") && (jumlah_klik <= 5)) {
$("#hasil").html("You Win!");
}
if ((ketemu=="belum") && (jumlah_klik >= 5)) {
$("#hasil").html("Game Over...Silakan coba lagi!");
}
});
});
</script>
<style>
div {
width: 70px;
height: 70px;
background-color: silver;
border: 2px solid black;
padding: 0 10px;
float: left;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Game "Kotak WoW" </h2>
<p>Anda hanya punya 5 kali klik untuk menemukan kotak Kuning</p>
<p>Created By:Mohamad Mansur</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">
<div id="box10"></div>
<div id="box11"></div>
<div id="box12"></div>
<br style="clear:both">
<h3 id="hitung"></h3>
<h1 id="hasil"></h1>
</body>
</html>
Kode JavaScript yang dibutuhkan sekitar 50-70 baris.. Namun untuk dapat memahami kode program tersebut anda mesti memiliki pengetahuan tentang HTML, CSS, JavaScript, jQuery dan dasar-dasar programming seperti variabel dan kondisi if. Keduabelas kotak <div> memiliki id dari box1, box2, hingga box12. Melalui kode CSS, saya mewarnai semua box dengan abu-abu (background-color: silver). Ketika di klik, perintah jQuery berikut akan dijalankan:
Pada baris pertama, saya membuat sebuah kondisi if untuk memeriksa apakah kotak saat ini memiliki id = box_ajaib. Disini saya menggunakan jQuery selector $(this).attr(“id”). Jika id-nya sama sama dengan isi variabel box_ajaib, kotak akan berwarna kuning. Jika tidak, kotak akan berwarna hitam. Tapi, apa isi variabel box_ajaib ini?Variabel box_ajaib adalah sebuah variabel yang digenerate secara acak menggunakan perintah JavaScript:
Variabel angka dari perintah diatas akan menghasilkan angka acak antara 1-12. Variabel ini kemudian saya berikan awalan “box”, sehingga variabel box_ajaib akan berisi string seperti “box1”, “box5” atau “box12”. String ini akan berubah-ubah setiap kali kode program dijalankan. Misalkan isi variabel box_ajaib adalah “box7”. Maka ketika masuk ke kondisi if, hanya ketika box7 di klik lah, akan berubah menjadi kuning. Inilah box yang harus di klik untuk memenangkan permainan. Ketika box yang benar ditemukan, saya juga men-set sebuah variabel ketemu = “sudah”. Ini akan dijadikan patokan apakah game berhasil di selesaikan atau tidak. Pengecekan ini saya lakukan dengan kode program berikut:
Game hanya dimenangkan jika variabel ketemu berisi string “sudah”, dan jumlah_klik kurang dari 3. Selain itu, berarti gameover. Untuk menghitung jumlah klik, saya membuat kode program JavaScript berikut di dalam event click() box:
Dengan demikian, setiap kali box di klik, variabel jumlah_klik akan bertambah sebanyak 1 angka. Jumlah klik ini kemudian saya tampilkan menggunakan method html().
Hasilnya: Sebuah Game Tebak Kotak :)
Kesimpulan :
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.
Tutorial ini ditujukan untuk kompetisi kontes Menulis Tutorial oleh:
