Flash Sale! Up to 40% off on unlimited courses, tutorials and creative asset downloads Up to 40% off on unlimited assets SAVE NOW
Advertisement
  1. Game Development
  2. Game Design
Gamedevelopment

Membuat Permainan Space Shooter Sederhana di HTML5 dengan EaselJS

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Shoot-'Em-Up.
An Introduction to FlashPunk: Creating a Spaceship Shoot-'Em-Up
Build a Stage3D Shoot-'Em-Up: Sprite Test

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Tahun lalu, saya menunjukkan cara membuat permainan shoot-'em-up dengan Flash dan AS3. Dengan meningkatnya popularitas (dan kemampuan) HTML5, mari kita lihat cara melakukan hal yang sama dengan HTML5, JavaScript, dan EaselJS.


Pratinjau Hasil Akhir

Mari kita lihat hasil akhir yang akan kita jalani:

Klik untuk memainkan demonya.


Langkah 1: Ringkasan Singkat

Menggunakan sprite yang dibuat sebelumnya kita akan mengkode permainan Space Shooter yang menghibur di HTML5 menggunakan perpustakaan EaselJS.

Pemain akan dapat mengontrol pesawat ruang angkasa dan menembak beberapa musuh saat bepergian di luar angkasa.


Langkah 2: Antarmuka

Antarmuka yang sederhana dan futuristik akan digunakan, ini melibatkan bitmap dan banyak lagi. Saya telah menggunakan perpustakaan sprite yang sangat bagus dalam demo tutorial ini, ini adalah bagian dari Sinistar Clone Graphics yang gratis.

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


Langkah 3: Mendapatkan EaselJS

Perpustakaan EaselJS akan digunakan untuk membangun permainan kita, pastikan Anda membaca tutorial Getting Started jika Anda baru mengenal perpustakaan ini.

Anda dapat mengunduh EaselJS dari situs resminya.


Langkah 4: Struktur HTML

Mari siapkan dokumen HTML kita, ini adalah struktur HTML sederhana untuk mulai menulis aplikasi kita. Simpan ini sebagai Shooter.html.


Langkah 5: Menyembunyikan Sorotan Mobile

Mari tambahkan sedikit CSS juga, baris ini akan menghapus sorotan default saat Anda mengetuk elemen menggunakan browser mobile; tanpa ini, pengalaman mobile akan menurun drastis.


Langkah 6: Perpustakaan JavaScript

Kode berikut menambahkan perpustakaan JavaScript yang diperlukan agar aplikasi kita berfungsi.

Main.js adalah file yang akan kita gunakan untuk menyimpan semua fungsi kita sendiri untuk permainannya. Buat sekarang dan simpan di folder yang sama dengan Shooter.html. Anda juga harus mengunduh perpustakaan EaselJS yang terdaftar.


Langkah 7: Memanggil Fungsi Utama

Di baris berikutnya kita panggil fungsi utama kita; ini adalah fungsi yang akan memulai aplikasi kita, itu akan dibuat nanti di kode JavaScript kita.


Langkah 8: Elemen Canvas

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


Langkah 9: Memulai JavaScript

Mari kita mulai pembuatan permainan kita!

Buka editor JavaScript pilihan Anda (editor teks apa pun akan berfungsi, tetapi Anda tidak akan memiliki penyorotan sintaks) dan bersiap untuk menulis permainan Anda yang luar biasa. Buka file Main.js yang Anda buat sebelumnya.


Langkah 10: Mendefinisikan Canvas

Kita akan mulai dengan mendefinisikan semua variabel grafis dan logika.

Variabel berikutnya mewakili elemen canvas HTML dan tahap yang akan dikaitkan dengannya. (Variabel stage akan berperilaku dengan cara yang mirip dengan stage dalam proyek AS3 Flash.)


Langkah 11: Latar Belakang

Variabel berikutnya menyimpan gambar latar belakang. Dua ubin gambar digunakan untuk membuat latar belakang pengguliran yang tak terbatas.


Langkah 12: Pesawat

Ini adalah Pesawat yang akan digunakan sebagai karakter pemain atau pahlawan.


Langkah 13: Musuh

Beberapa musuh akan berada di panggung; mereka akan menggunakan ini sebagai grafik sumber.


Step 14: Bos

Seorang bos akan hadir dalam permainan, lebih besar dan dengan health yang lebih banyak daripada musuh lainnya. Variabel-variabel ini digunakan untuk instansiasi itu.


Langkah 15: Nyawa

Ikon "life". Tiga nyawa diberikan di awal, dan Anda kehilangan satu ketika terkena musuh.


Langkah 16: Peluru

Ini adalah senjata Anda: tembakkan peluru pada musuh untuk membunuh mereka. Variabel ini menyimpan gambar sumber.


Langkah 17: Grafik Peringatan

Dua peringatan digunakan dalam permainan, satu untuk saat Anda menang dan satu untuk saat Anda kalah. Kita akan melihat bagaimana menentukan kemenangan atau kekalahan nanti dalam tutorial ini.


Langkah 16: Variabel-variabel

Ini adalah variabel yang akan kita gunakan, baca komentar di kode untuk mengetahui lebih banyak tentang mereka. Beberapa nama mereka cukup jelas dan tidak memiliki komentar.


Langkah 17: Suara-suara

Kita akan menggunakan efek suara untuk meningkatkan rasa permainan. Anda dapat menemukan suara-suara yang digunakan dalam contoh ini di Soungle.com menggunakan kata kunci space, explosion dan laser.


Langkah 18: Fungsi Main

Fungsi Main() akan menjadi yang pertama dijalankan saat halaman web dimuat, karena dirujuk ke atribut onload dari dokumen HTML (lihat Langkah 7).

Ini memanggil fungsi yang diperlukan untuk memulai permainan. Kita akan membuat fungsi-fungsi itu di langkah selanjutnya - semuanya dari Langkah 19 hingga Langkah 23 harus masuk ke dalam fungsi ini.


Langkah 19: Tautan Canvas

Kode ini mendapatkan ID canvas HTML dan menghubungkannya ke kelas Stage EaselJS. Ini akan membuat variabel stage berperilaku seperti kelas stage di AS3.


Langkah 20: Mengaktifkan Event Mouse

Event Mouse dinonaktifkan secara default di EaselJS untuk meningkatkan kinerja; seperti yang kita butuhkan dalam permainan kita tambahkan baris berikut.


Langkah 21: Memuat Suara-suara

Kita akan menggunakan SoundJS untuk menambahkan suara ke permainan kita. Metode addBatch SoundJS menggunakan array tiga parameter untuk setiap panggilan:

  • name: Nama instance yang Anda inginkan untuk suaranya - ini akan digunakan untuk memainkan suara nanti.
  • src: URL file suara.
  • instances: Jumlah instance yang dapat diputar pada waktu yang sama.

Langkah 22: Memuat Grafis

Kode ini digunakan untuk melakukan pramuat grafik dengan bantuan fungsi yang akan kita tulis nanti. Ini menunjuk setiap objek Image yang kita buat sebelumnya ke file sumber PNG di folder dokumen kita. Sebuah nama diberikan untuk mendeteksi gambar mana yang dimuat, dan terakhir fungsi yang menangani gambar yang dimuat dipanggil.


Langkah 23: Menetapkan Ticker

Kelas Ticker menyediakan "tick" yang terpusat, disiarkan pada interval yang ditetapkan. Kita dapat menggunakan fungsi tick() untuk menjalankan kode tertentu pada frekuensi reguler.

Kode berikut menetapkan frame rate menjadi 30 dan mendefinisikan stage sebagai listener untuk ticks.

Kelas TweenJS akan melakukan listen kepada tick ini untuk melakukan animasi.


Langkah 24: Fungsi Preload

Setiap kali grafik dimuat fungsi ini akan berjalan. Ini akan menetapkan setiap gambar ke objek bitmap dan memeriksa bahwa semua elemen dimuat sebelum melanjutkan untuk memanggil addGameView.


Langkah 25: Menambahkan Tampilan Permainan

Ketika semua grafik dimuat, fungsi addGameView dipanggil. Fungsi ini akan menambahkan pesawat, penghitung nyawa, skor, dan latar belakang ke panggung.


Langkah 26: Memindahkan Pesawat

Pesawat pemain akan dikontrol dengan mouse, dan kita menggunakan fungsi ini untuk menanganinya:

e.stageX mengacu pada koordinat x dari mouse, dan fungsi ini dipanggil setiap kali mouse dipindahkan.


Langkah 27: Menembak

Pesawat kita akan dapat menembakkan peluru untuk menghancurkan dan melindungi diri dari musuh. Fungsi ini akan berjalan setiap kali pengguna mengklik panggung dan akan menempatkan peluru di depan pesawat yang nantinya akan dipindahkan oleh fungsi update(). Ini juga memainkan suara tembakan.


Langkah 28: Menambahkan Fungsi Musuh

Itu bukan penembak tanpa sesuatu untuk ditembak. Di sini, sebuah setInterval() digunakan untuk membuat musuh setiap 1000 milidetik (Anda dapat mengubah nilai itu di langkah berikutnya) yang kemudian dipindahkan oleh fungsi update().


Langkah 29: Mulai Permainan

Baris-baris ini akan menambahkan listener yang diperlukan ke panggung dan pengatur waktu; ini termasuk event mouse, event yang dibatasi waktu (melalui setInterval) dan event Ticker yang akan memperbarui permainan setiap frame.


Langkah 30: Memindahkan Latar Belakang

Latar belakang dipindahkan setiap frame untuk mensimulasikan perjalanan ruang angkasa; ketika sprite latar belakang yang lebih rendah mencapai batas panggung ia dipindahkan kembali ke atas, menciptakan perulangan tak terbatas.


Langkah 31: Memindahkan Peluru

Baris kode berikutnya memeriksa apakah ada peluru di panggung; jika demikian, peluru akan bergerak ke atas.


Langkah 32: Menghapus Peluru di Luar Panggung

Mari tambahkan beberapa baris untuk mendeteksi posisi peluru, dan gunakan ini untuk menghancurkan peluru ketika tidak lagi terlihat.


Langkah 33: Menunjukkan Bos

Kita akan menambahkan bos besar yang buruk ke dalam permainan. Ketika pengguna mencapai skor tertentu, bos akan muncul:


Langkah 34: Memindahkan Musuh-musuh

Musuh-musuh, seperti peluru, juga dipindahkan setiap frame. Kode ini menemukan semua musuh di panggung menggunakan kontainer enemies, dan menggerakkan mereka masing-masing 5px ke bawah.


Langkah 35: Menghapus Musuh di Luar Panggung

Kita juga memeriksa posisi musuh untuk menghancurkan mereka ketika tidak lagi terlihat.


Langkah 36: Tabrakan Peluru - Musuh

Peluru di kontainer diuji untuk bertabrakan dengan musuh; ketika ini terjadi, keduanya dihapus dari panggung, suara dimainkan dan skor diperbarui.


Langkah 37: Tabrakan Peluru - Bos

Kode berikut menangani tabrakan bos, itu menggunakan metode yang sama yang digunakan dalam perulangan tabrakan peluru-musuh. Di sini kita menggunakan variabel bossHealth untuk menentukan kapan bos sudah dikalahkan.


Langkah 38: Tabrakan Pesawat - Musuh

Di sini kita memeriksa apakah musuh bertabrakan dengan kapal pemain; jika itu terjadi, suara dimainkan, nyawa dihapus, dan pesawat itu dianimasikan.


Langkah 39: Periksa untuk Menang atau Kalah

Pemain menang ketika bos kehilangan semua health dan kalah jika semua nyawa mereka hilang. Baris berikutnya mendeteksi situasi tersebut dan memanggil fungsi peringatan menggunakan parameter yang benar.


Langkah 40: Peringatan

Peringatan menunjukkan informasi pemain tentang status permainan; ini ditunjukkan saat tercapai event permainan. Ini menghapus listener permainan dan menunjukkan pesan yang sesuai.


Langkah 41: Pengujian



Simpan pekerjaan Anda (jika Anda belum) dan buka file HTML di browser untuk melihat permainan HTML5 Anda berfungsi!


Kesimpulan

Anda telah belajar cara membuat permainan Space Shooter dengan semua fitur dasarnya, cobalah untuk memperluasnya menggunakan apa yang sudah Anda ketahui. Awal yang baik adalah membuat musuh atau bos membalas tembakan pemain.

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.