Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Games
Code

Mempelajari CreateJS dengan Membangun Permainan Pong HTML5

by
Difficulty:BeginnerLength:LongLanguages:

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

Web bergerak cepat - begitu cepat sehingga tutorial EaselJS asli kami sudah ketinggalan zaman! Dalam tutorial ini, Anda akan belajar bagaimana menggunakan suite CreateJS terbaru dengan membuat klon Pong sederhana.


Pratinjau Hasil Akhir

Mari kita lihat hasil akhir yang akan kita jalani:

The PONG game

Klik untuk bermain

Tutorial ini didasarkan pada Membuat Permainan Pong di HTML5 Dengan EaselJS oleh Carlos Yanez, yang dibangun dengan panduan Memulai Dengan EaselJS-nya. Efek grafis dan suara semua diambil dari tutorial sebelumnya.


Langkah 1: Membuat index.html

Ini akan menjadi file index.html utama kita:

Seperti yang Anda lihat, ini cukup singkat dan terutama terdiri dari pemuatan perpustakaan CreateJS.

Sejak diluncurkannya CreateJS (yang pada dasarnya menggabungkan semua perpustakaan EaselJS yang terpisah), kita tidak lagi harus mengunduh file JS dan meng-hostnya di situs kita; file tersebut sekarang ditempatkan di CDN (Content Delivery Network) yang memungkinkan kita memuat file-file ini dari jarak jauh secepat mungkin.

Mari meninjau kodenya:

Baris ini menghilangkan sorotan mobile yang mungkin muncul saat Anda mencoba memainkan game di mobile. (Sorotan mobile menyebabkan objek canvas disorot sehingga mengabaikan gerakan jari Anda.)

Selanjutnya, kita memiliki pemuatan perpustakaan CreateJS:>

Kode ini memuat file JS dari CDN CreateJS dan pada dasarnya memungkinkan kita untuk menggunakan salah satu fungsi CreateJS dalam kode kita

Selanjutnya, kita akan memuat plugin SoundJS Flash, yang memberikan dukungan suara untuk browser yang tidak mendukung Audio HTML5. Ini dilakukan dengan menggunakan SWF (objek Flash) untuk memuat suara.

Dalam hal ini kita tidak akan menggunakan CDN; sebagai gantinya, kita akan mengunduh perpustakaan SoundJS dari http://createjs.com/#!/SoundJS/download dan letakkan file soundjs.flashplugin-0.2.0.min.js dan FlashAudioPlugin.swf di folder lokal yang diberi nama assets.

Terakhir di antara file JS, kita akan memuat file Main.js yang berisi semua kode ke permainan kita:

Akhirnya, mari kita letakkan objek canvas di atas panggung kita.

Sekarang kita bisa mulai mengerjakan kode permainannya.


Langkah 2: Variabel-variabel

Kode permainan kita akan berada di dalam sebuah file bernama Main.js, jadi buat dan simpan sekarang.

Pertama-tama, mari kita definisikan variabel-variabel untuk semua objek grafis dalam permainan:

Saya telah menambahkan komentar untuk setiap variabel sehingga Anda tahu apa yang akan kita muat di variabel tersebut

Selanjutnya, skornya:

Kita akan, membutuhkan variabel untuk kecepatan bola:

Anda dapat mengubah nilai ini menjadi apapun yang Anda inginkan, jika Anda ingin membuat permainan menjadi lebih mudah atau lebih sulit.

Jika Anda adalah pengembang Flash, Anda tahu onEnterFrame dari Flash sangat berguna saat membuat permainan, karena ada hal-hal yang perlu terjadi di setiap bingkai yang diberikan. (Jika Anda tidak terbiasa dengan ide ini, lihat artikel ini di Game Loop.)

Kita memiliki persamaan untuk onEnterFrame di CreateJS, dan itu adalah objek ticker, yang dapat menjalankan kode setiap fraksi dalam sedetik. Mari buat variabel yang akan menautkannya:

Selanjutnya kita memiliki preloader, yang akan menggunakan metode PreloadJS yang baru.

  • preloader - akan berisi objek PreloadJS.
  • manifest - akan menyimpan daftar file yang perlu kita muat.
  • totalLoaded - variabel ini akan menyimpan sejumlah file yang sudah termuat.

Yang tidak kalah penting dalam daftar variabel kita, kita memiliki TitleView, yang akan menyimpan beberapa grafis untuk menampilkannya bersama-sama (seperti DisplayObjectContainer dari Flash).

Mari beralih ke fungsi Main...


Langkah 3: Fungsi Main()

Fungsi ini adalah fungsi pertama yang berjalan setelah semua file JS dari index.html dimuat. Tapi apa yang memanggil fungsi ini?

Nah, ingat baris ini dari file index.html?

Cuplikan kode ini menyatakan bahwa begitu HTML (dan perpustakaan JS) dimuat, fungsi Main harus dijalankan.

Mari kita tinjau:

Mari kita rinci setiap bagian:

Di sini kita menghubungkan objek Canvas PongStage dari file index.html ke variabel canvas, dan kemudian membuat objek Stage dari canvas tersebut. (Panggungnya akan memungkinkan kita untuk menempatkan objek di atasnya.)

mouseEventsEnabled memungkinkan kita untuk menggunakan event mouse, jadi kita bisa mendeteksi gerakan dan klik mouse.

Di sini kita mengkonfigurasi dimana plugin suara Flash berada pada browser yang tidak didukung Audio HTML5

Dalam variabel manifest kita menempatkan sebuah array dari file-file yang ingin kita muat (dan memberikan ID unik untuk masing-masing). Setiap suara memiliki dua format - MP3 dan OGG - karena browser yang berbeda (tidak)kompatibel dengan format yang berbeda.

Di sini kita mengkonfigurasi objek preloader menggunakan PreloadJS. PreloadJS adalah tambahan baru untuk perpustakaan CreateJS dan cukup berguna.

Kita membuat objek PreloadJS baru dan menempatkannya di variabel preloader, kemudian menetapkan sebuah metode ke setiap event (onProgress, onComplete, onFileLoad). Akhirnya kita menggunakan preloader untuk memuat manifest yang kita buat sebelumnya.

Di sini kita menambahkan objek Ticker ke atas panggung dan mengatur frame rate menjadi 30 FPS; kita akan menggunakannya nanti di permainan untuk fungsi enterFrame.


Langkah 4: Membuat Fungsi Preloader

Mari kita tinjau fungsinya:

  • handleProgress - Dalam fungsi ini Anda dapat mengikuti persentase kemajuan pemuatan menggunakan parameter ini: event.loaded. Anda bisa menggunakan ini untuk misalnya membuat progress bar.
  • handleComplete - Fungsi ini dipanggil sekali begitu semua file telah dimuat (jika Anda ingin menempatkan sesuatu di sana).
  • handleFileLoad - Karena kita memuat dua jenis file - gambar dan suara - kita memiliki fungsi ini yang akan menangani masing-masing secara terpisah. Jika itu adalah gambar, kita membuat gambar bitmap dan menempatkannya dalam variabel (yang namanya sama dengan ID gambar yang dimuat) dan kemudian memanggil fungsi handleLoadComplete (yang akan kita tulis selanjutnya); jika itu suara maka kita langsung saja memanggil handleLoadComplete.

Sekarang mari kita bahas fungsi handleLoadComplete yang baru saja saya sebutkan:

Ini adalah fungsi yang cukup sederhana; kita meningkatkan variabel totalLoaded (yang menyimpan jumlah aset yang dimuat sejauh ini) dan kemudian kita memeriksa apakah jumlah item dalam manifest kita sama dengan jumlah aset yang dimuat, dan jika demikian, masuk ke layar Main Menu.


Langkah 5: Membuat Main Menu

The Main Menu

Main MenuTidak ada yang spesial disini. Kita menempatkan gambar Background, Start Button dan Credits Button di atas panggung dan menautkan event handler onPress ke tombol Start dan Credits.

Berikut adalah fungsi yang menampilkan dan menghapus layar kredit dan tweenTitleView yang memulai permainannya:


Langkah 6: Kode Permainan

The PONG game

Kita telah mencapai bagian utama dari tutorial ini yang merupakan kode permainan itu sendiri.

Pertama-tama, kita perlu menambahkan semua aset yang dibutuhkan ke atas panggung, jadi kita melakukannya di fungsi addGameView:

Sekali lagi, fungsi yang cukup sederhana yang menempatkan objek-objek di layar dan menambahkan mouseEvent ke gambar latar belakang, sehingga saat pengguna mengkliknya, permainan akan dimulai (kita akan memanggil fungsi startGame).

Mari kita tinjau fungsi startGame:

Disini, seperti yang bisa Anda lihat, selain menambahkan event onMouseMove yang akan menggerakkan bat kita. Kita menambahkan event tick, yang akan memanggil fungsi update di setiap frame.

Mari tinjau fungsi movePaddle and reset:

Di movePaddle, pada dasarnya kita menempatkan bat pengguna pada koordinat y mouse.

Di reset, kita melakukan sesuatu yang mirip dengan addGameView, kecuali disini kita tidak menambahkan elemen grafis karena sudah ada di layar.

Dengan menggunakan fungsi alert, kita akan menampilkan popup yang menang dan kalah.


Langkah 7: Perulangan Permainan

Sekarang, untuk bagian akhir tutorial kita, kita akan mengerjakan fungsi update (yang terjadi di setiap frame permainan - mirip dengan onEnterFrame dari Flash):

Tampak menakutkan, bukan? Jangan khawatir, kami akan mengulas setiap bagian dan mendiskusikannya.

Di setiap frame, bola akan bergerak sesuai dengan nilai kecepatan x dan y-nya

Di sini kita memiliki dasar AI dari komputer, di mana bat komputer hanya mengikuti bola tanpa logika khusus. Kita hanya membandingkan lokasi pusat bat (oleh karena itu kami menambahkan 32 piksel ke nilai cpu Y) ke lokasi bola, dengan offset kecil, dan memindahkan bat ke atas atau bawah seperlunya.

Jika bola menyentuh batas atas atau batas bawah layar, bola akan berubah arah dan kita memainkan suara Wall Hit.

Login skor sederhana: jika bola melewati batas kiri atau kanan, ia meningkatkan skor pemain atau CPU masing-masing, memainkan suara, dan me-reset lokasi objek menggunakan fungsi reset yang telah kita bahas sebelumnya.

Di sini kita berhadapan dengan tabrakan bola dengan bat; setiap kali bola menyentuh salah satu bat, bola akan berubah arah dan suara dimainkan

Jika bat pemain keluar dari batas, kita menempatkannya kembali dalam batas.

Dalam cuplikan ini, kita memeriksa apakah salah satu dari skor pemain telah mencapai 10 poin, dan jika demikian, kita menampilkan popup kemenangan atau kekalahan pada pemain (sesuai status kemenangannya).


Kesimpulan

Itu saja, Anda telah membuat keseluruhan permainan pong menggunakan CreateJS. Terima kasih telah meluangkan waktu untuk membaca tutorial ini.

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.