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

Posted on

Panduan kali ini dapat 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.


Mendesain Game “Kotak” dengan jQuery

Game yang akan saya bikin terbilang amat sederhana agar kode programnya pun tak kompleks:

Perlu pun saya informasikan, jQuery hanyalah sebuah “bantuan” ke di JavaScript. Untuk membangun kode program yang kompleks seperti game ini, kita tetap memerlukan JavaScript basic (tak dapat hanya dengan jQuery saja).

Bagus, sebelum membahas kode progamnya, seketika saja rekan-rekan praktek ”Game Kotak Duniailkom”. Disini saya mempunyai 9 kotak berwarna abu-abu. Objektif dari game ini yaitu: Dapatkan kotak warna hijau di 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 seandainya rekan-rekan menjalankannya di web browser sendiri, lumayan refresh halaman. Posisi kotak hijau akan random (diacak), sehingga selalu berpindah-pindah.

Bisakah rekan-rekan menebak apa saya yang diperlukan untuk membangun game seperti ini?

Pertama-tama-tama, pastinya saya mesti menyiapkan 9 ‘kotak’. Ini dapat dikerjakan dengan tag <div id=”box”></div> seperti yang sering saya gunakan sepanjang panduan jQuery Duniailkom ini. Berikutnya, saya menggunakan event click di setiap box agar ketika di klik, warnanya berubah, ini dapat 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 lumayan susah yaitu membangun aturan game-nya. Disini saya menggunakan pedoman JavaScript basic. Misalnya untuk menghasilkan angka acak, saya menggunakan method Math.random(). Ini yaitu kegunaan bawaan JavaScript untuk membangun angka acak.

Bagus, berikut kode komplit “Game Kotak Duniailkom”:

Kode JavaScript yang dibutuhkan sekitar 30-40 baris. Bila saya menghapus bagian komentar, totalnya hanya 20 baris kode program. Namun untuk dapat memahami kode program tersebut rekan-rekan mesti mempunyai pengetahuan mengenai HTML, CSS, JavaScript, jQuery dan dasar-dasar programming seperti variabel dan kondisi if.

Kesembilan kotak <div> mempunyai id dari box1, box2, hingga box9. Via kode CSS, saya mewarnai semua box dengan abu-abu (background-color: silver). Ketika di klik, pedoman jQuery berikut akan dijalankan:

Di baris pertama-tama, saya membangun sebuah kondisi if untuk memeriksa apakah kotak ketika ini mempunyai id = box_ajaib. Disini saya menggunakan jQuery selector $(this).attr(“id”). Bila id-nya sama sama dengan isi variabel box_ajaib, kotak akan berwarna hijau. Bila tak, kotak akan berwarna merah.

Namun, apa isi variabel box_ajaib ini?

Variabel box_ajaib yaitu sebuah variabel yang digenerate secara acak menggunakan
pedoman JavaScript:

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

Variabel angka dari pedoman 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 yaitu “box7”. Karenanya ketika masuk ke kondisi if, hanya ketika box7 di klik lah, akan berubah menjadi hijau. Inilah box yang mesti di klik untuk memenangkan permainan.

Ketika box yang benar ditemukan, saya pun men-set sebuah variabel ketemu = “telah”. Ini akan dijadikan patokan apakah game berhasil di selesaikan atau tak. Pengecekan ini saya lakukan dengan kode program berikut:

Game hanya dimenangkan seandainya variabel ketemu berisi string “telah”, dan jumlah_klik kurang dari 3. Selain itu, berarti gameover.

Untuk menghitung jumlah klik, saya membangun kode program JavaScript berikut di di 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 Duniailkom! 🙂


Game yaitu sebuah sebuah program yang lumayan rumit untuk dirancang, belum lagi aspek grafis atau suara untuk membangun permainan lebih menarik. Betul-betul tak dari game sederhana ini rekan-rekan dapat mendapat sedikit pemahaman bagaimana membangun game dengan menggunakan web.

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

Bila rekan-rekan belum dapat memahami alur kode program diatas, kemungkinan besar rekan-rekan belum “lumayan” belajar HTML, CSS, atau JavaScript. Dikala ini saya telah membangun eBook HTML Uncover dan CSS Uncover yang membahas dengan detail seputar HTML dan CSS. eBook JavaScript mudah-mudahan dapat segera menyusul.

Panduan kali ini menutup seri tutorial belajar jQuery Duniailkom. Panduan terkait jQuery lainnya akan dipisah ke di Panduan jQuery Lanjutan. Semoga banyak manfaat yang dapat rekan-rekan ambil dari panduan Part 1 hingga panduan Part 21 ini.

Tentu saja masih banyak aspek lain dari jQuery yang belum saya bahas, terutama bahan lanjutan seperti jQuery UI dan beragam tips dan trik menarik lainnya. Bila tak ada halangan, saya akan membangun eBook khusus: jQuery Uncover yang akan membahas jQuery dengan lebih detail dan mendalam.

Terimakasih atas dukungannya untuk Duniailkom 🙂


Sumber https://www.duniailkom.com/