Cara Tambah Motion Realistis ke Permainan HTML5 Anda - dummies

Lihat ruang. html. Permainan mudah ini memberikan contoh yang baik untuk menerapkan gerakan realistik ke permainan HTML5 anda. Ia menggunakan skema kawalan yang terkenal dalam permainan klasik Asteroid dan Spacewar! (Walaupun Asteroid lebih dikenali, Spacewar! adalah permainan yang lebih awal dan lebih berpengaruh.)

Klik di sini untuk mendapatkan pengalaman penuh.

Bagaimana untuk menambah vektor daya ke objek permainan anda

Kapal dikawal oleh kekunci anak panah, tetapi kesan Newton lebih mudah dilihat di angkasa daripada di atas tanah (tidak ada daya seret menjengkelkan untuk mendapatkan di jalan). Kekunci anak panah kiri dan kanan memutarkan kapal, tetapi ia tidak menjejaskan pergerakan kapal. Anak panah atas membakar roket, yang menambahkan vektor daya ke arah yang sedang dihadapi kapal.

Berikut ialah kod:

kapal var ruang; permainan var; fungsi Kapal () {tShip = Sprite baru (permainan, "kapal.png", 25, 25); tShip. setSpeed ​​(3); tShip. checkKeys = function () {if (keysDown [K_LEFT]) { this. changeImgAngleBy (-5); } jika (keysDown [K_RIGHT]) { ini. changeImgAngleBy (5); } jika (keysDown [K_UP]) { ini. addVector (this getImgAngle (),. 1); }} // end function return tShip;} // function definition object init () {game = Scene (new); kapal = Kapal baru (); permainan. setBG ("hitam"); permainan. mulakan ();} / update akhir fungsi panas () {permainan. jelas (); kapal. checkKeys (); kapal. kemas kini ();} // end update

Bagaimana untuk mensimulasikan ruang dalam permainan Anda

Berikut adalah contoh:

1. Mulailah contoh dengan cara biasa.

   Seperti kebanyakan demo mudahGame, mulakan dengan sprite dan adegan. Kerana kapal itu akan mempunyai kaedah tersuai, anda menjadikannya objek yang unik.

2. Berikan kapal satu kaedah checkKeys ().

   Kaedah checkKeys () mencari penekan utama dan mengubah tingkah laku kapal dengan sewajarnya.

3. Tukar sudut imej.

   Sprit sebenarnya mempunyai dua sudut berbeza. Ia boleh mempunyai sudut yang menunjuk (dipanggil imgAngle dalam simpleGame) dan sudut yang bergerak (dipanggil moveAngle). Apabila anda menukar sudut, anda menukar kedua-dua pergerakan dan sudut imej pada andaian bahawa objek hanya akan bergerak ke arah yang ia hadapi.

   Untuk contoh mudah ini baik-baik saja, tapi banyak jenis gerakan memerlukan decoupling imej dan sudut gerak. Kaedah changeImgAngleBy () membolehkan anda menukar arah yang ditunjukkan oleh gambar tanpa mengubah sudut gerakan. (Terdapat kaedah changeMotionAngle () juga, tetapi ia tidak digunakan dengan kerap.)

4. Tambah vektor daya untuk mensimulasikan tujah.

   Apabila pengguna menekan anak panah atas, kapal itu melancarkan roket utamanya. Ini menambah vektor daya kecil ke arah yang sedang dihadapi kapal. Gunakan kaedah getImgAngle () untuk menentukan arah yang sedang dihadapi oleh kapal, dan gunakan nilai ini untuk menentukan di mana daya harus ditambah.

   Oleh kerana kod ini berlaku dalam gelung animasi dan dikuatkan sebagai kekunci anak panah ditekan, hanya satu kekurangan kecil diperlukan.