Cara Membuat Joystick Virtual untuk Game HTML5 Anda - dummies

Banyak game HTML5 berbasis sentuhan menggunakan mekanisme joystick virtual. Pengguna menyentuh layar untuk mulai memasukkan masukan, lalu gesek untuk memberi masukan. Mengayunkan ke kiri dibaca seperti menggerakkan joystick ke kiri. Semakin jauh gesekan pengguna, semakin besar nilai inputnya. Perpustakaan simpleGame memiliki objek joystick virtual yang memudahkan penerapan joystick virtual pada perangkat berbasis sentuhan Anda.

Joystick virtual bekerja dengan mengembalikan data numerik. Sering kali paling mudah untuk memahami cara kerjanya dengan melihat output numerik sebelum memetakannya ke elemen visual.

joystick Uji permainan var; var output; joystick var; fungsi init () {game = new Scene (); output = dokumen getElementById ("output"); jika (permainan dapat disentuh) { joystick = Joy baru (); } lain { alert ("Tes ini memerlukan antarmuka berbasis sentuhan"); } permainan. start ();} // akhirin fungsi init update () { jika (game. touchable) { jx = joystick. getMouseX (); jy = joystick getMouseY (); jdx = joystick getDiffX (); jdy = joystick getDiffY (); result = "joystick x:" + jx + "

"; hasil + = "joystick y:" + jy + "
"; hasil + = "joystick dx:" + jdx + "
"; hasil + = "joystick dy:" + jdy + "
"; output innerxtML = hasil;} else {alert ("Contoh ini mengharapkan layar sentuh");}} // end update Tidak ada lagi di sini

Joystick virtual cukup mudah digunakan:

1. Buat variabel untuk joystick.

   Anda bisa menyebutnya joystick. Jenisnya menarik.

2. Buat joystick jika memungkinkan.

   Gunakan permainan. properti yang mudah disentuh untuk menentukan apakah ada antarmuka sentuh. Jika tidak, kirim pesan ke pengguna.

3. Dapatkan posisi mouse.

   Saat objek Joystick virtual mendeteksi sentuhan di layar, ia akan memicu nilai mouseX dan mouseY. Gunakan metode getmouseX () dan getMouseY () joystick untuk menentukan posisi X dan Y yang disentuh. Dengan cara ini, antarmuka sentuh bertindak seperti mouse tradisional.

4. Dapatkan diffX dan diffY reading dari joystick.

   Saat pengguna menyentuh layar, perpustakaan akan melacak koordinat sentuhan awal. Ini kemudian mengukur seberapa jauh pengguna telah menggesek. Perbedaan X disebut diffX, dan perbedaan Y disebut diffY. Gunakan metode getDiffX () dan getDiffY () dari objek joystick virtual untuk menentukan berapa banyak piksel di X dan Y yang telah dipindahkan pengguna sejak menyentuh layar.

5. Tampilkan nilai sekarang.

   Untuk lulus pertama ini, penting untuk memahami apa yang ditampilkan oleh joystick, jadi ambil nilainya dan cetak ke keluaran di layar.

Tentu saja, titik joystick virtual adalah memindahkan barang-barang di sekitar layar.

Inilah kodenya:

joystick Test var game; bola var; joystick var; fungsi init () {game = new Scene (); bola = sprite baru (permainan, "redBall. png", 50, 50); Jika (permainan dapat disentuh) {joystick = new joy ();} else {alert ("Game ini memerlukan layar sentuh");} // akhiri jika bola. setSpeed ​​(0); bola. setPosition (400, 300); permainan. start ();} // akhirin fungsi init update () {game. bersih(); jika (game. touchable) {bola setDX (joystick. getDiffX ()); bola. setDY (joystick getDiffY ());} // akhiri bola yang mudah disentuh. update ();} // end update

Contoh ini lebih sederhana dari yang sebelumnya.

1. Buat sprite bola sederhana.

   Untuk contoh ini, bola sederhana digunakan. Buat seperti sprite dasar lainnya.

2. Buat objek joystick.

   Buat objek joystick virtual.

3. Memetakan diffX joystick dan diffe ke nilai dx dan dy bola.

   Ini memberikan gerakan yang sangat sensitif, jadi Anda mungkin ingin menyesuaikan sensitivitas dengan membagi diffX dan diffy oleh beberapa faktor penskalaan.