Tutorial Belajar jQuery Part 21: Cara Membuat Game Sederhana dengan jQuery

Tutorial kali ini bisa dibilang merangkum semua hal yang telah dipelajari dari Tutorial Belajar jQuery Duniailkom dari part 1 hingga 20. Kali ini saya akan membahas cara membuat sebuah game sederhana menggunakan jQuery.

---

Membuat Game “Kotak” dengan jQuery

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 Duniailkom”. Disini saya memiliki 9 kotak berwarna abu-abu. Objektif dari game ini adalah: Temukan kotak warna hijau dalam 3 kali klik:

See the Pen Cara Membuat Game Kotak Duniailkom dengan jQuery by duniailkom (@duniailkom) on CodePen.10206

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.

Bisakah anda menebak apa saya yang diperlukan untuk membuat game seperti ini?

Pertama, tentunya saya harus menyiapkan 9 ‘kotak’. Ini bisa dibuat dengan tag

seperti yang sering saya gunakan sepanjang tutorial jQuery Duniailkom 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 Duniailkom”:

   


Game "Kotak" Duniailkom
Anda hanya punya 3 kali klik untuk menemukan kotak Hijau



   




   




   

Kode JavaScript yang dibutuhkan sekitar 30-40 baris. Jika saya menghapus bagian komentar, totalnya hanya 20 baris kode program. 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.

Kesembilan kotak

memiliki id dari box1, box2, hingga box9. Melalui kode CSS, saya mewarnai semua box dengan abu-abu (background-color: silver). Ketika di klik, perintah jQuery berikut akan dijalankan:

if ($(this).attr("id")==box_ajaib) {
  $(this).css("background-color","green");
  ketemu = "sudah";
}
else {
  $(this).css("background-color","red");
}

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 hijau. Jika tidak, kotak akan berwarna merah.

Tapi, apa isi variabel box_ajaib ini?

Variabel box_ajaib adalah sebuah variabel yang digenerate secara acak menggunakan perintah JavaScript:

var angka = Math.floor((Math.random() * 9) + 1);
var box_ajaib = "box"+angka;

Mengenai method atau fungsi Math.random() JavaScript, pernah saya bahas di Tutorial Belajar JavaScript: Konstanta dan Method (fungsi) Objek Math dalam JavaScript.

Variabel angka dari perintah diatas akan menghasilkan angka acak antara 1-9. Variabel ini kemudian saya berikan awalan “box”, sehingga variabel box_ajaib akan berisi string seperti “box1”, “box5” atau “box9”. 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 hijau. 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:

// 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!");
}

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:

jumlah_klik++;
$("#hitung").html("Jumlah Klik = "+jumlah_klik);

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 Duniailkom! :)

---

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.

Saya juga menyarankan untuk mencoba mengutak-atik kode program diatas, misalkan bagaimana jika kotaknya bukan 9, tetapi 16. Atau bagaimana jika kotak yang dicari ada 2 buah, misalnya warna hijau dan warna biru. Atau bisakah anda mengganti warna kotak merah dengan sebuah gambar. Silahkan berkreasi!

Jika anda belum bisa memahami alur kode program diatas, kemungkinan besar anda belum “cukup” belajar HTML, CSS, atau JavaScript. Saat ini saya telah membuat eBook HTML Uncover dan CSS Uncover yang membahas dengan detail seputar HTML dan CSS. eBook JavaScript mudah-mudahan bisa segera menyusul.

Tutorial kali ini menutup seri tutorial belajar jQuery Duniailkom. Tutorial terkait jQuery lainnya akan dipisah ke dalam Tutorial jQuery Lanjutan. Semoga banyak manfaat yang bisa anda ambil dari tutorial Part 1 hingga tutorial Part 21 ini.

Tentu saja masih banyak aspek lain dari jQuery yang belum saya bahas, terutama materi lanjutan seperti jQuery UI dan berbagai tips dan trik menarik lainnya. Jika tidak ada halangan, saya akan membuat eBook khusus: jQuery Uncover yang akan membahas jQuery dengan lebih detail dan mendalam.

Terimakasih atas dukungannya untuk Duniailkom :)

Sumber wk.com