Bagaimana Menambah Gerak Realistis ke Game HTML5 Anda

Lihatlah ruang. html Game sederhana ini memberikan contoh bagus untuk menerapkan gerak realistis ke game HTML5 Anda. Ini memanfaatkan skema kontrol yang dibuat terkenal di game klasik Asteroid dan Spacewar! (Meskipun Asteroid lebih dikenal, Spacewar! sejauh ini merupakan game yang sebelumnya lebih berpengaruh.)

Klik disini untuk mendapatkan pengalaman penuh.

Bagaimana menambahkan vektor kekuatan ke objek permainan Anda

Kapal dikendalikan oleh tombol panah, namun efek Newton lebih mudah dilihat di luar angkasa daripada di lapangan (tidak ada kekuatan seret yang menyimpang untuk menghalangi). Tombol panah kiri dan kanan memutar kapal, tapi tidak mempengaruhi gerak kapal. Panah atas menyalakan roket, yang menambahkan sebuah vektor gaya ke arah yang sedang dihadapi kapal tersebut.

Inilah kodenya:

ruang var ship; permainan var; fungsi Ship () {tShip = new Sprite (permainan, "kapal png", 25, 25); tShip. setSpeed ​​(3); tShip. checkKeys = function () {if (keysDown [K_LEFT]) { ini. changeImgAngleBy (-5); } jika (keysDown [K_RIGHT]) { ini. changeImgAngleBy (5); } jika (keysDown [K_UP]) { ini. addVector (ini getImgAngle (), 1); }} // fungsi akhir kembali tShip;} // fungsi definisi objek init () {game = new Scene (); kapal = kapal baru (); permainan. setBG ("hitam"); permainan. start ();} // akhirin fungsi init update () {game. bersih(); kapal. checkKeys (); kapal. update ();} // end update

Bagaimana mensimulasikan ruang dalam permainan Anda

Inilah rundownnya:

1. Mulailah teladan dengan cara biasa.

   Seperti kebanyakan demo simpleGame, mulailah dengan sprite dan sebuah adegan. Karena kapal akan memiliki metode custom, Anda menjadikannya obyek yang unik.

2. Berikan kapal itu sebuah metode checkKeys ().

   Metode checkKeys () mencari penekanan tombol dan mengubah perilaku kapal sesuai dengan itu.

3. Ubah sudut gambar.

   Sprite sebenarnya memiliki dua sudut yang berbeda. Ini bisa memiliki sudut yang mengarah (disebut imgAngle di simpleGame) dan sudutnya bergerak (disebut moveAngle). Saat Anda mengubah sudut, Anda mengubah kedua gerakan dan sudut gambar dengan asumsi bahwa objek hanya akan berjalan ke arah yang dihadapinya.

   Untuk contoh sederhana, ini bagus, tapi banyak jenis gerak memerlukan decoupling gambar dan sudut gerak. Metode changeImgAngleBy () memungkinkan Anda untuk mengubah arah gambar menunjuk tanpa mengubah sudut gerak. (Ada juga metode changeMotionAngle (), tapi tidak sering digunakan.)

4. Tambahkan vektor gaya untuk mensimulasikan dorong.

   Saat pengguna menekan panah ke atas, kapal akan menembakkan roket utamanya. Ini menambahkan vektor kekuatan kecil ke arah yang sedang dihadapi kapal. Gunakan metode getImgAngle () untuk menentukan arah kapal saat ini menghadapinya, dan gunakan nilai ini untuk menentukan di mana gaya harus ditambahkan.

   Karena kode ini terjadi dalam lingkaran animasi dan diperkuat saat tombol panah ditekan, hanya dibutuhkan gaya yang sangat kecil.