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 Pong di HTML5 dengan EaselJS

by
Difficulty:BeginnerLength:LongLanguages:

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

Dalam tutorial ini, kita akan membuat tiruan permainan klasik, Pong, di HTML5, menggunakan perpustakaan EaselJS. Permainan ini akan memiliki banyak layar, efek suara, dan lawan AI (yang sangat sederhana).

Langkah 1: Ikhtisar Singkat

Dengan menggunakan grafis pra-dibuat, kita akan mengkode permainan Pong yang menghibur di HTML5 menggunakan perpustakaan EaselJS, yang menyediakan antarmuka mirip Flash untuk kanvas HTML5. Untuk pengantar EaselJS, lihat artikel Activetuts+ ini.

Pemain akan bisa mengendalikan dayung menggunakan mouse dan bermain melawan lawan yang dikendalikan komputer untuk mendapatkan poin.


Langkah 2: Antarmuka

Antarmuka sederhana dengan gaya neo-futuristik akan digunakan; ini melibatkan banyak bentuk, tombol, bitmap dan banyak lagi.

Grafis yang dibutuhkan 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 bisa mengunduh versi terbaru dari EaselJS dari situs resminya. Namun, ini mungkin tidak sesuai dengan kode di sini, jadi saya sarankan untuk menggunakan versi perpustakaan yang disertakan dengan unduhan sumber.


Langkah 4: Struktur HTML

Mari kita siapkan dokumen HTML kita. Kita akan mulai dengan dasar-dasarnya, hanya garis besar barebones:


Langkah 5: Menyembunyikan Sorotan Mobile

Kita juga harus menambahkan sedikit CSS juga, untuk menghapus sorotan default yang diterapkan saat Anda menyentuh elemen di browser mobile. Tanpa ini, pengalaman mobile akan menurun drastis.


Langkah 6: Perpustakaan Javascript

Kode berikut menambahkan perpustakaan javascript yang diperlukan agar aplikasi kita dapat bekerja.

Beserta EaselJS, kita juga akan menggunakan TweenJS (untuk menangani transisi layar dan perulangan permainan) dan SoundJS (untuk efek suara).

Main.js adalah file yang akan kita gunakan untuk menyimpan kode JS kita sendiri.


Langkah 7: Memanggil Fungsi Utama

Pada baris berikutnya kita memanggil fungsi Main() kita. Ini adalah fungsi yang akan memulai aplikasi kita; itu akan dibuat nanti di tutorial, di dalam Main.js.


Langkah 8: Tag Canvas

Kanvas HTML5 dibuat di baris ini; kita menetapkan sebuah ID sehingga kita bisa mereferensikannya nanti dan juga mengatur lebar dan tingginya.


Langkah 9: Membuat Main.js

Mari kita mulai pembuatan permainan kita!

Buka editor JavaScript pilihan Anda (editor teks akan bekerja, namun Anda tidak akan memiliki penyorotan sintaks) dan bersiap untuk menulis kode. Ingatlah untuk menyimpan file sebagai Main.js di folder proyek Anda.


Langkah 10: Mendefinisikan Kanvas

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 serupa dengan stage AS3.


Langkah 11: Latar Belakang

Variabel ini menyimpan judul gambar latar belakang.


Langkah 12: Tampilan Judul

Ini adalah Tampilan Judul, layar interaktif pertama yang muncul dalam permainan kita. Variabel-variabel ini menyimpan komponennya.


Langkah 13: Kredit

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


Langkah 14: Tampilan Permainan

Variabel berikutnya menyimpan grafis individu yang muncul di Game View:


Langkah 15: Skor

Nilai skor akan ditangani oleh variabel-variabel berikutnya:


Langkah 16: Variabel-variabel

Ini adalah variabel yang akan kita gunakan, baca komentar di kode untuk memahami tujuan mereka:


Langkah 17: Membuat Efek Suara

Kita akan menggunakan efek suara untuk meningkatkan rasa permainan. Suara dalam contoh ini dibuat dengan menggunakan alat as3sfxr yang sangat bagus dan dikonversi ke MP3 menggunakan Audacity.

Suara yang dibutuhkan semuanya bisa ditemukan di unduhan sumber. Jika Anda ingin membuat sendiri, Anda memerlukan empat:

  • hit.mp3: dimainkan saat bola menyentuh dayung
  • playerScore.mp3: dimainkan saat pemain mencetak skor
  • enemyScore.mp3: dimainkan saat musuh mencetak skor
  • wall.mp3: dimainkan saat bola menyentuh batas atas atau bawah

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 akan memanggil fungsi yang diperlukan untuk memulai permainan.


Langkah 19: Tautan Kanvas

Kode ini mendapatkan ID kanvas HTML dan menghubungkannya ke kelas Stage EaselJS. Ini akan membuat variabel stage berperilaku seperti kelas stage di AS3. Tambahkan ini ke Main().


Langkah 20: Mengaktifkan Event Mouse

Event mouse dinonaktifkan secara default di EaselJS untuk meningkatkan kinerja. Karena kita membutuhkannya dalam permainan, kita tambahkan baris berikut. Tambahkan ini ke Main().


Langkah 21: Memuat Suara

Kita akan menggunakan SoundJS untuk menambahkan suara pada permainan kita; tulis kode berikut untuk mengimpor suara yang akan kita gunakan. Tambahkan ini ke Main().


Langkah 22: Memuat Grafis

Kode ini digunakan untuk pemuatan awal grafis, dengan bantuan fungsi yang akan kita tulis nanti. Ini menetapkan objek Image yang kita buat sebelumnya untuk menunjuk ke file PNG sumber yang relevan di folder dokumen kita.

Sebuah nama diberikan untuk masing-masing, jadi kita bisa mendeteksi gambar mana yang dimuat nanti, dan terakhir fungsi yang menangani gambar yang dimuat dipanggil.

Tambahkan ini ke Main().


Langkah 23: Menetapkan Ticker

Kelas Ticker menyediakan penyiaran tick atau heartbeat terpusat pada interval yang ditentukan. Ini bisa digunakan untuk memicu perulangan permainan.

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. Tambahkan ini ke Main().


Langkah 24: Fungsi Preload

Setiap kali grafik dimuat fungsi ini akan berjalan. Ini akan menugaskan setiap gambar ke objek bitmap dan memeriksa apakah semua elemen dimuat sebelum melanjutkan.


Langkah 25: Menambahkan Judul Tampilan

Saat semua grafis dimuat, Title View ditambahkan ke atas panggung dengan fungsi berikut:


Langkah 26: Listener Tombol Mulai

Fungsi ini menambahkan listener yang diperlukan ke tombol TitleView (ini adalah bagian dari addTitleView()):


Langkah 27: Menampilkan Credits

Layar Credits ditampilkan saat pengguna mengklik tombol credits; listener mouse ditambahkan ke gambar penuh untuk menghapusnya.


Langkah 28: Menyembunyikan Kredit

Saat layar Credits diklik maka akan di-tween kembali dan dihapus dari atas stage.

Mari kita berhenti di sini untuk menguji apa yang telah kita lakukan sejauh ini. Klik di sini untuk demo milestone.

Ingatlah bahwa beberapa baris telah dikomentari karena beberapa fungsi belum dibuat.

Ingat bahwa milestone disertakan dalam file sumber, jadi jika karena alasan tertentu file Anda tidak meniru yang ini, bandingkan sumber Anda dengan milik saya untuk melihat apa yang bisa menyebabkannya.


Langkah 29: Menampilkan Tampilan Permainan

Baris berikut menghapus TitleView dari atas stage dan menambahkan item GameView ke atas stage. Listener mouse ditambahkan ke latar belakang, untuk memulai permainan saat diklik.


Langkah 30: Gerakan Pemain

Pemain akan bergerak seiring dengan posisi vertikal mouse:


Langkah 31: Memulai Permainan

Kode ini berjalan saat pemain mengklik latar belakang permainan, ia menambahkan listener mouse yang memicu fungsinya pada langkah sebelumnya, dan menambahkan Ticker untuk mengendalikan perulangan permainan.

Perhatikan cara ticker dibuat: ini setara dengan event Timer di AS3.


Langkah 32: Reset

Bila ada yang mencetak gol (oleh pemain atau komputer), dayung dan bola akan kembali ke posisi semula dan permainan akan dihentikan sementara:


Langkah 33: Pergerakan Bola

Jika permainan tidak dijeda, bola akan dipindahkan setiap frame dengan menggunakan variabel yang telah kita buat sebelumnya.


Langkah 34: Pergerakan CPU

Kode ini mengendalikan gerakan komputer; dayung dipindahkan dengan cara yang akan mengikuti bola sambil tetap memiliki beberapa batas kesalahan.


Langkah 35: Tabrakan Tembok

Di sini kita periksa apakah bola berada di batas atas atau bawah kanvas; jika demikian, kecepatan vertikal dibalik dan suara diputar.


Langkah 36: Skor

Sekarang sisi kiri dan kanan. Kode ini juga memodifikasi skor, memanggil fungsi reset dan memainkan suara yang berbeda tergantung pada sisi yang disentuh bola.


Langkah 37: Tabrakan Bola-Dayung

Kode berikut memeriksa apakah bola bertabrakan dengan dayung, dengan membandingkan posisi dayung dengan koordinat bola. Jika kotak pembatas keduanya berpotongan, ada tabrakan, jadi kita membalikkan kecepatan x bola dan memainkan suara.


Langkah 38: Periksa Win/Game Over

Anda dapat memodifikasi kondisi akhir pada baris berikutnya - ini diatur menjadi 10 poin secara default.


Langkah 39: Peringatan

Fungsi ini akan menghentikan permainan dan menunjukkan peringatan, isinya yang bergantung pada hasil permainan.


Langkah 40: Pengujian

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


Kesimpulan

Cobalah memodifikasi variabel-variabel permainan untuk membuat versi permainan 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.