Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Design
Gamedevelopment

Membuat Game Whack-a-Mole di HTML5 dengan Menggunakan EaselJS

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Kholisa Nurrahmah (you can also view the original English article)

Beberapa minggu yang lalu, saya telah menunjukkan cara membuat game Whack-a-Mole (atau, Whack-a-Worm) dengan menggunakan Flash dan AS3. Sekarang, ikutilah petunjuk mulai dari prakata hingga EaselJS saya, maka kita akan melihat bagaimana cara menggunakan pustaka itu untuk membuat game yang sama dengan kanvas HTML5 dan JavaScript.


Langkah 1: Tinjauan Singkat

Dengan menggunakan grafis yang dibuat sebelumnya kita akan membuat kode game Whack A Mole yang menghibur layaknya game di HTML5 menggunakan pustaka EaselJS.

Pemain akan dapat mengeklik cacing di layar dan mendapatkan poin.


Langkah 2: Antarmuka

Antarmuka yang sederhana dan ramah akan digunakan, ini akan melibatkan banyak bentuk, tombol, bitmap, dan lain-lain. Grafik cacing yang digunakan dalam tutorial ini bisa diunduh di sini di bawah Lisensi Creative Commons.

Sumber antarmuka grafis yang diperlukan untuk tutorial ini dapat ditemukan di unduhan yang terlampir.


Langkah 3: Dapatkan EaselJS

Perpustakaan EaselJS akan digunakan untuk membangun game kami - pastikan Anda membaca tutorial Memulai jika Anda baru di perpustakaan ini.

Anda dapat mengunduh EaselJS dari situs resminya.


Langkah 4: Struktur HTML

Mari siapkan dokumen HTML kita, dibawah ini adalah struktur HTML sederhana untuk mulai menulis aplikasi kita.


Langkah 5: Sembunyikan Hightlight Seluler

Mari tambahkan sedikit CSS juga, baris ini akan menghapus sorotan default saat Anda mengetuk elemen menggunakan browser seluler; tanpa mobile experience  (proses peningkatan kepuasan pengguna seluler) akan menurun drastis.


Langkah 6: Pustaka JavaScript

Kode di bawah ini merupakan pustaka JavaScript yang dibutuhkan agar aplikasi kita dapat bekerja.


Langkah 7: Panggil Fungsi Utama

Pada baris berikutnya yang kami sebut konstruktor kita, ini adalah fungsi utama yang akan dibuat nanti dalam kode JavaScript kita.


Langkah 8: Tag Canvas

Canvas ditambahkan di baris ini. Kita akan menetapkan ID untuk referensi nanti dan juga mengatur lebar dan tingginya.


Langkah 9: JavaScript

Mari mulai pembuatan aplikasi kita!

Bukalah editor JavaScript pilihan Anda (editor teks apa saja yang akan berfungsi, tetapi Anda tidak akan memiliki penyorotan sintaks) dan bersiaplah untuk menulis aplikasi Anda yang mengagumkan. Ingatlah untuk menyimpan file dengan ekstensi .js di folder proyek Anda.


Langkah 10: Definisikan Kanvas

Kita akan mulai dengan mendefinisikan semua variabel grafis dan variabel logika.

Variabel berikutnya mewakili elemen kanvas HTML dan tahap yang akan ditautkan dengannya. Variabel stage akan berfungsi mirip dengan stage AS3.


Langkah 11: Latar Belakang

Variabel ini akan menyimpan gambar latar belakang judul. (Anda dapat mengunduh gambar di atas, atau mendapatkannya dari tutorial file ZIP)


Langkah 12: Tampilan Judul

Ini adalah Tampilan Judul, yang akan menjadi layar interaktif pertama yang muncul di game kita. Variabel-variabel ini menyimpan komponennya:


Langkah 13: Kredit

Tampilan ini akan menunjukkan kredit, tahun dan hak cipta dari game, dan variabel-variabel ini akan digunakan untuk menyimpannya.


Langkah 14: Tampilan Latar Game

Latar belakang untuk Tampilan Game.


Langkah 15: Peringatan

Peringatan akan ditampilkan ketika semua Cacing telah muncul, dan akan menampilkan skor akhir yang dicapai pemain.


Langkah 16: Skor

Nilai skor akan ditangani oleh variabel berikutnya.


Langkah 17: Cacing

Variabel berikut digunakan untuk menyimpan grafik cacing dan merujuk ke cacing terakhir yang terlihat.


Langkah 18: Posisi Array

Array digunakan untuk menyimpan posisi akhir cacing. Ini digunakan untuk memindahkan cacing ke posisi lubang yang benar saat melakukan animasi pop-out.


Langkah 19: Variabel Tambahan

Ini adalah variabel lain yang akan kita gunakan; baca komentar di kode untuk mengetahui lebih banyak tentang mereka. (Beberapa sudah cukup jelas.)


Langkah 20: Fungsi Main ()

Fungsi Main() akan menjadi yang pertama dieksekusi ketika halaman web dimuat, karena ini disebut dalam atribut onload dari dokumen HTML (lihat Langkah 7).

Fungsi ini akan memanggil fungsi yang diperlukan untuk memulai game. Periksa fungsi-fungsi tersebut di langkah selanjutnya


Langkah 21: Tautkan Kanvas

Kode ini menghasilkan ID kanvas HTML dan menautkannya ke kelas EaselJS Stage. Ini akan membuat variabel stage berfungsi seperti kelas stage di AS3.


Langkah 22: Aktifkan Mouse Event

Mouse Event (sekumpulan perintah untuk menjalankan aksi saat pengguna mengeklik mousenya) dinonaktifkan secara default di EaselJS untuk meningkatkan kinerja; karena kita membutuhkan mereka dalam game, kita tambahkan baris berikut.


Langkah 23: Memuat Grafik

Kode ini digunakan untuk melakukan pramuat grafik dengan bantuan fungsi yang akan kami tulis nanti. Ini akan mengatur objek Gambar yang kita buat sebelumnya ke file PNG di folder dokumen kita. Nama diberikan untuk mendeteksi gambar mana yang dimuat dan pada akhirnya fungsi yang memuat gambar yang dimuat akan dipanggil.


Langkah 24: Mengatur Ticker

Objek Ticker menyediakan tick atau heartbeat terpusat, disiarkan pada interval yang ditentukan melalui ffungsi callback tick().
Kode berikut menetapkan laju bingkai ke 30 dan menentukan stage sebagai pendengar untuk tick.

Kelas TweenJS akan mendengarkan tick ini untuk melakukan animasi.


Langkah 25: Fungsi Preload

Setiap kali grafik dimuat, fungsi ini akan berjalan. Ini akan menetapkan setiap gambar ke objek bitmap dan memeriksa apakah semua elemen dimuat sebelum melanjutkan. Seperti yang Anda lihat, hanya lima gambar yang ditugaskan ke bitmap tetapi variabel gfxLoaded menunggu hingga tujuh item dimuat; ini menunggu sampai CreditsView dan Worms grafis diatur dalam memori.


Langkah 26: Tambahkan Tampilan Game

Ketika semua grafik dimuat, latar belakang game ditambahkan ke stage, nanti akan ditutupi oleh Tampilan Judul, ini untuk menunjukkan latar bagian belakang saat tampilan ini di-tween dan dihapus


Langkah 27: Tampilan Judul

Sekarang kita menempatkan TitleView di stage dan memanggil fungsi yang akan menambahkan pendengar mouse ke tombol.


Langkah 28: Mulai Tombol Pendengar

Fungsi ini menambahkan pendengar penting ke tombol TitleView.  


Langkah 29: Tunjukkan Kredit

Kredit layar ditampilkan ketika pengguna mengeklik tombol kredit, pendengar mouse ditambahkan ke gambar penuh untuk menghapusnya.


Langkah 30: Sembunyikan Kredit

Ketika layar Kredit diklik itu akan membuat tweened kembali dan dihapus dari stage.


Milestone

Mari kita berhenti di sini untuk melakukan tes cepat dan memastikan bahwa kode game kita berfungsi.

Lihatlah milestone di sini.

Perlu diingat bahwa beberapa baris telah dikomentari karena beberapa fungsi belum dibuat.

Ingat bahwa Milestones disertakan dalam file sumber, jadi jika karena alasan tertentu file Anda tidak sama dengan file yang satu ini, lihat sumbernya untuk melihat penyebabnya.


Langkah 31: Tampilkan Tampilan Game

Baris berikut menghapus layar Judul dan membiarkan Layar Game terlihat. Ini juga memanggil fungsi yang akan menampilkan cacing pertama.


Step 32: Score Text

Kode ini menciptakan Objek Teks yang akan memunculkan skor..


Step 33: Perikasa Game Over

Kode ini memeriksa apakah Worms yang ditampilkan telah melewati batas dan jika benar, kode ini juga akan memanggil Peringatan jika benar.


Step 34: Menghapus Cacing Terakhir

Kode ini mengecek apakah seekor cacing telah ditambahkan dan dihapus.


Langkah 35: Menghitung Cacing Acak

Baris berikutnya menghitung nomor acak yang akan digunakan dalam posisi array untuk menempatkan cacing di lubang acak.


Langkah 36: Mambahkan Cacing

Sekarang kita akan menciptakan cacing dan menempatkannya; pendengar mouse juga ditambahkan untuk menangani klik pemain.


Langkah 37: Animasi

Sedikit animasi akan ditampilkan ketika cacing keluar: tween kecil ke properti scaleY nya. Ketika animasi selesai, variabel currentWorms meningkat dan fungsi showWorm() dipanggil lagi; ini akan membuat loop yang akan berakhir setelah variabel currentWorms mencapai nilai totalWorms.


Langkah 38: Memukul Cacing

Fungsi ini menangani Cacing  yang diklik; pada dasarnya akan meningkatkan skor dan menghancurkan cacing yang diklik.


Langkah 39: Tampilkan Peringatan

Fungsi ini akan menghentikan game dan mengungkapkan skor akhir, menampilkan dan melipatgandakan latar belakang peringatan.


Langkah 40: Uji

Simpan pekerjaan Anda (jika belum Anda simpan dan buka file HTML di browser untuk melihat bagaimana game HTML5 Anda berfungsi!


Kesimpulan

Seperti yang Anda lihat, banyak variabel / parameter game dapat dimodifikasi dan disesuaikan dengan kebutuhan Anda, jadi cobalah membuat versi game Anda sendiri!

Saya harap Anda menyukai tutorial ini, terima kasih telah membaca!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.