Bagaimana Menambah Tindak Mouse ke Permainan HTML5 Anda untuk Akses Mudah Alih - dummies

Oleh kerana penyemak imbas web tidak konsisten dengan cara mereka melaporkan kedudukan tetikus, input mouse dalam JavaScript biasa adalah rumit dalam HTML dunia permainan. Perpustakaan simpleGame mengendalikannya dengan menambah kaedah getMouseX () dan getMouseY () ke objek Scene. Kaedah-kaedah ini tidak selalu tepat, tetapi mereka cukup dekat untuk kebanyakan pengaturcaraan permainan.

Pada bila-bila masa anda ingin membaca tetikus biasa, cuma gunakan fungsi getMouseX () dan getMouseY () objek Scene untuk menentukan kedudukan tetikus anggaran.

Kebanyakan masa apabila anda ingin kedudukan tetikus, itu kerana anda akan memindahkan objek di mana tetikus atau menunjuk objek ke arah tetikus.

Sering kali, anda ingin menyembunyikan kursor tetikus, supaya anda boleh menggunakan kaedah hideCursor () objek Scene untuk menyembunyikan kursor. (Sudah tentu, anda boleh mengambil kursor dengan kaedah showCursor ().)

Jika anda ingin membaca skrin sentuh, ada satu langkah yang lebih mudah. Perpustakaan mudahGame mempunyai objek joystick maya yang dipanggil Joy. Buat contoh kelas ini untuk menghidupkan ciri bacaan skrin sentuh.

Perhatikan bahawa antara muka sentuh peranti mudah alih tidak betul-betul seperti tetikus, jadi memerlukan antara muka yang berbeza. Walau bagaimanapun, sebaik sahaja anda mencipta objek Joy, fungsi getMouseX () dan getMouseY () akan membuat tindakan input sentuhan sama seperti tetikus biasa.

touchMouse. html menyembunyikan kursor tetikus normal dan menggerakkan bola ke mana-mana tetikus sedang menunjuk. Contoh khusus ini berfungsi dengan kedua-dua pelayar tradisional dan peranti skrin sentuh.

Perpustakaan simpleGame secara mendadak menyederhanakan proses kerja dengan penunjuk tetikus dengan menyediakan beberapa panggilan kaedah mudah. Berikut adalah kod:

touchMouse. html var bola; permainan var; var kegembiraan; fungsi init () {game = scene baru (); bola = Sprite baru (permainan, "redBall. png", 25, 25); bola. setSpeed ​​(0); Permainan . hideCursor (); kegembiraan = kegembiraan baru (); Permainan . mulakan ();} / update akhir fungsi panas () {permainan. jelas (); followMouse (); Bola . update ();} // end update function followMouse () { x = game. getMouseX (); y = permainan. getMouseY (); jika (game touchable) { // move object sedikit lebih tinggi untuk skrin sentuh y - = 100; } // ujian skrin sentuh akhir bola. setPosition (x, y); }

Mendapatkan sprite untuk mengikuti tetikus adalah hanya satu perkara untuk mengetahui kaedah yang hendak dipanggil.

1. Sembunyikan kursor tetikus.

   Objek Scene mempunyai kaedah hideCursor ().Ini adalah cara paling mudah untuk menyembunyikan penunjuk tetikus biasa. Biasanya, apabila anda mengikuti tetikus dengan objek, maksudnya untuk objek itu bertindak seperti penunjuk tetikus baru, jadi anda akan menyembunyikan anak panah biasa.

2. Buat pemboleh ubah untuk joystick maya.

   Jika anda akan bekerjasama dengan peranti touchpad, anda perlu pembolehubah untuk mengandungi objek kayu jati maya. (Jika permainan ini akan digunakan hanya pada mesin desktop dengan tikus normal, anda tidak perlu objek kayu bedik.)

3. Mulakan semula batang kayu bedik.

   Buat contoh objek Joy dalam fungsi init (). Hanya mencipta kayu bedik akan memberitahu enjin untuk mengharapkan input sentuhan dan memetakannya kepada perintah tetikus biasa.

4. Tambah fungsi followMouse ().

   Secara amnya baik untuk membuat fungsi baru untuk mengendalikan input. Fungsi followMouse () akan memberitahu objek untuk mengikuti tetikus. Sudah tentu, jika anda membina objek yang mengikuti mouse, anda boleh membuat kaedah ini objek jika anda lebih suka.

5. Gunakan kaedah getMouseX () dan getMouseY ().

   Objek Scene mempunyai kaedah yang dipanggil getMouseX () dan getMouseY (). Gunakan kaedah ini untuk mendapatkan koordinat X dan Y pada tetikus di tempat kejadian. Perhatikan bahawa koordinat tidak selalu tepat.

6. Semak untuk melihat sama ada anda mempunyai skrin sentuh.

   Objek Scene mempunyai harta yang boleh dikesan yang benar jika penyemak imbas mempunyai skrin sentuh. Anda biasanya tidak mahu objek disembunyikan oleh jari anda, selalunya anda ingin mengimbangi objek apabila anda menggunakan skrin sentuh untuk input.

7. Gerakkan objek lebih tinggi daripada jari anda.

   Dalam persekitaran skrin sentuh, anda biasanya mahu sprit masih dapat dilihat, jadi anda sering mengimbangi paksi Y dengan beberapa jumlah supaya tidak dikalahkan oleh jari pemain. Kurangkan beberapa nilai dari Y untuk mendapatkan kesan ini.