Tutorial Membuat Game Web dengan jQuery

jQuery adalah libary JavaScript yang bisa diunduh langsung melalui web resmi mereka. Dalam dunia pemrograman, library adalah kumpulan fungsi-fungsi yang bisa langsung digunakan untuk memudahkan pembuatan aplikasi. Jadi, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript. Ketika tutorial ini ditulis, versi terbaru dari jQuery adalah jQuery v3.1.1.

Pada tutorial ini, saya akan menjelaskan cara membuat game pada halaman web menggunakan jQuery. Sebenarnya sudah banyak tutorial pembuatan game seperti ini, saya sendiri membuat tutorial ini berdasarkan tutorial dari duniailkom.com, dengan ada beberapa bagian yang saya ubah pada gameplay nya.

(klik gambar untuk memperbesar)

Sebelum kita masuk ke tutorial pembuatannya, terlebih dahulu saya akan menjelaskan gameplay dari game yang akan kita buat. Ketika halaman diload, maka akan muncul 9 kotak berwarna silver yang menandakan bahwa kotak belum dibuka. Ketika kotak dibuka, terdapat 2 kemungkinan yaitu berubah menjadi warna hijau atau merah. Warna-warna tersebut selalu diacak setiap kali halaman diload, dari 9 kotak tersebut terdapat 7 kotak berwarna hijau dan 2 kota berwarna merah. Tujuan dari game ini yaitu membuka 5 kotak hijau tanpa membuka 2 kotak merah, jika terdapat 2 kotak merah yang dibuka maka permainan akan berakhir dengan kekalahan. Di bagian bawah terdapat pesan jumlah kotak yang terbuka untuk memudahkan user. Teman-teman dapat mencoba langsung gamenya terlebih dahulu melalui link atau melihat source codenya di bawah.

Tanpa berlama-lama lagi, mari kita langsung masuk ke tutorial secara bertahap ^^.

Tahap 1 (Persiapan) :

Pertama-tama persiapkan niat teman-teman, nyalakan komputer, buka text editor yang biasa kalian gunakan, kebetulan di sini saya menggunakan Notepad++. Dan pastikan pada komputer kalian terpasang web browser. Jika kalian belum memiliki web browser, silahkan browser terlebih dahulu, unduh kemudian instal. Kemudian siapkan halaman html kalian yang kosong.

(klik gambar untuk memperbesar)

Mohon maaf saya hanya akan menyediakan screenshot agar teman-teman bisa langsung mengetikkan kodenya sendiri, tapi teman-teman dapat mendownload source codenya yang sudah saya sediakan.

Tahap 2 (Membuat kotak/box) :

Di tahap ini kita akan membuat kotak/box yang akan digunakan sebagai objek utama dalam game kita. Kotak di sini kita definisikan pada div, jadi 1 div dianggap 1 kotak. Agar div terlihat menjadi kotak maka kita akan membuat css untuk mengatur tampilan div. Kemudian panggil kotak tersebut pada bagian body html dengan menggunakan tag div. Berikut ini adalah kode css yang akan ditambahkan beserta penjelasannya dan juga pemanggilan kotak.

(klik gambar untuk memperbesar)

Karena kita menggunakan 9 kotak, maka panggil sebanyak 9 kali seperti di bawah ini.

(klik gambar untuk memperbesar)

Hasilnya akan menjadi 1 baris, agar terlihat menjadi lebih bagus sebaiknya kita ganti menjadi 3x3 (3 baris 3 kolom). Caranya yaitu menambahkan tag br dengan ditambahkan css clear:both. Karena setiap kotak memiliki warna yang berbeda, kita beri nama masing-masing kotak dengan memberikan id. Hasilnya akan menjadi seperti berikut ini.

(klik gambar untuk memperbesar)

Tahap 3 (Ganti warna kotak) :

Ketika kotak diklik, maka kotak akan berganti warna hijau atau merah. Sesuai peraturan sebelumnya, terdapat 7 kotak hijau dan 2 kotak merah yang selalu diacak. Untuk mengganti warna kotak tiap kali diklik, kita akan membutuhkan jquery, jadi sebelum melanjutkan langkah berikutnya kita akan memasukkan jQuery terlebih dahulu. Pertama siapkan terlebih dahulu jQuery melalui https://jquery.com/ dan letakkan di direktori yang sama dengan file html yang dibuat. Kemudian panggil jQuery tersebut di halaman html kita dengan cara berikut ini.

(klik gambar untuk memperbesar)

Saya menyarankan cara 1 agar proses lebih cepat karena tidak menggunakan internet. Selanjutnya kita akan membuat kode JavaScript untuk mengacak warna kotak setiap kali halaman diload dan beri fungsi ketika kotak diklik maka kotak akan berganti warna dengan kode berikut.

(klik gambar untuk memperbesar)

(klik gambar untuk memperbesar)

Jadi jQuery yang kita gunakan pada game ini yaitu fungsi ready yang dieksekusi ketika halaman selesai diload, serta fungsi klik yang ditunjukkan untuk div/kotak.

Tahap 4 (Pemberitahuan) :

Di tahap ini kita akan menambahkan pemberitahuan, seperti pesan-pesan untuk mengetahui berapa jumlah kotak yang sudah dibuka serta pesan menang atau kalah. Jangan lupa juga untuk menambahkan tampilan lain seperti judul, sehingga jika sudah ditambahkan akan menjadi seperti berikut ini.

(klik gambar untuk memperbesar)

Kemudian berikan nilai awal/inisiasi pada pesan jumlah kotak. Karena pesan tersebut akan ditampilkan ketika halaman diload, maka buat kode seperti di bawah di dalam fungsi jQuery ready.

(klik gambar untuk memperbesar)

Tentunya kita membutuhkan variabel untuk menghitung jumlah kotak tadi, jadi kita akan membuat variabel tersebut seperti berikut.

(klik gambar untuk memperbesar)

Jangan lupa untuk menambahkan kode berikut agar setiap kali kotak diklik, maka pesan jumlah kotak akan diupdate sesuai dengan jumlah variabel tadi.

(klik gambar untuk memperbesar)

Dan ini adalah bagian terakhir, kita akan membuat pesan menang atau kalah kepada user. Kondisi menang didapat jika jumlah kotak hijau ada 5 sedangkan kondisi kalah didapat jika jumlah kotak merah ada 2. Masing-masing kondisi akan mengupdate header yang sudah diberi id "hasil" sesuai dengan pesan yang kita inginkan. Sertakan juga perintah alert jika ingin, serta ubah variabel selesai menjadi true.

(klik gambar untuk memperbesar)

Sekian tutorial singkat dari saya, selamat mencoba membuat game kalian. Berikut ini saya sertakan lagi link source code dan live demo.

Read More