Bagaimana Membuat Joystick Maya untuk Permainan HTML5 Anda

Banyak permainan HTML5 yang berasaskan sentuh menggunakan mekanisme joystick maya. Pengguna menyentuh skrin untuk memulakan input, dan kemudian swipes untuk memberikan input. Meleret ke kiri dibaca sama seperti memindahkan joystick ke kiri. Lebih jauh swipes pengguna, semakin besar nilai masukan adalah. Pustaka simpleGame mempunyai objek joystick maya yang memudahkan untuk melaksanakan joystick maya pada peranti berasaskan sentuhan anda.

Joystick maya berfungsi dengan memulangkan data berangka. Ia sering paling mudah untuk memahami bagaimana ia berfungsi dengan melihat output angka sebelum memetakannya ke elemen visual.

joystick Test var game; var output; var joystick; fungsi init () {game = scene baru (); output = dokumen. getElementById ("output"); jika (permainan sentuh) { joystick = Joy baru (); } else { alert ("ujian ini memerlukan antara muka berasaskan sentuhan"); Permainan } . mulakan ();} / / akhir kemas kini fungsi init () { jika (permainan. sentuh) { jx = joystick. getMouseX (); jy = joystick. getMouseY (); jdx = joystick. getDiffX (); jdy = joystick. getDiffY (); result = "joystick x:" + jx + "

"; hasil + = "joystick y:" + jy + "
"; result + = "joystick dx:" + jdx + "
"; result + = "joystick dy:" + jdy + "
"; output. innerHTML = result;} else {alert ("contoh ini menjangkakan skrin sentuh");}} // akhir mengemas kini Tidak ada di sini lagi

--2 ->

Buat pembolehubah untuk joystick.

1. Anda boleh memanggilnya joystick. Jenis menarik.

   Buat kayu bedik jika boleh.

2. Gunakan permainan. harta yang dapat disentuh untuk menentukan sama ada antara muka sentuhan hadir. Jika tidak, hantar mesej kepada pengguna.

   Dapatkan kedudukan tetikus.

3. Apabila objek Joystick maya mengesan sentuhan pada skrin, ia mencetuskan nilai tetikusX dan tetikus. Gunakan kaedah getMouseX () dan getMouseY () untuk menentukan kedudukan sentuhan X dan Y. Dengan cara ini, antara muka sentuhan bertindak seperti tetikus tradisional.

   Dapatkan bacaan diffX dan diffY dari joystick.

4. Apabila pengguna menyentuh skrin, perpustakaan menjejaki koordinat sentuhan awal. Ia kemudiannya mengukur sejauh mana pengguna telah meleret. Perbezaan dalam X dipanggil diffX, dan perbezaan dalam Y disebut diffY. Gunakan kaedah getDiffX () dan getDiffY () kaedah objek joystick maya untuk menentukan berapa piksel di X dan Y pengguna telah berpindah sejak menyentuh skrin.

   Paparkan nilai semasa.

5. Untuk lulus pertama ini, penting untuk memahami apa yang dimainkan oleh kayu bedik itu, jadi hanya ambil nilai-nilai dan cetaknya ke output pada skrin.

   Sudah tentu, titik kayu bedik maya adalah untuk bergerak di sekitar skrin.

Berikut adalah kod:

joystick Test var game; var bola; var joystick; fungsi init () {game = scene baru (); bola = Sprite baru (permainan, "redBall. png", 50, 50); jika permainan (touchable) {joystick = Joy baru ();} else {alert ("Permainan ini memerlukan skrin sentuh");} // akhir jika bola. setSpeed ​​(0); bola. setPosition (400, 300); permainan. mulakan ();} / update akhir fungsi panas () {permainan. jelas (); jika (permainan. sentuh) {bola. setDX (joystick. getDiffX ()); bola. setDY (joystick. getDiffY ());} // akhir bola yang boleh disentuh. kemas kini ();} // end update

Contoh ini lebih mudah daripada sebelumnya.

Buat sprite bola yang mudah.

1. Untuk contoh ini, bola sederhana digunakan. Buatnya seperti mana-mana asas asas lain.

   Membina objek joystick.

2. Buat objek joystick maya.

   Map diffX dan joystick untuk nilai dx dan dy bola.

3. Ini memberikan pergerakan yang sangat sensitif, jadi anda mungkin mahu menyesuaikan kepekaan dengan membahagikan diffX dan diffY dengan beberapa faktor pengukur.