Rumah Keuangan Pribadi Bagaimana menambahkan Mouse Response ke Game HTML5 Anda untuk Akses Mobile - dummies

Bagaimana menambahkan Mouse Response ke Game HTML5 Anda untuk Akses Mobile - dummies

Video: Leap Motion SDK 2024

Video: Leap Motion SDK 2024
Anonim

Karena browser web tidak konsisten dalam cara melaporkan posisi mouse, masukan mouse di JavaScript normal rumit di HTML. dunia game. Perpustakaan simpleGame menangani hal ini dengan menambahkan metode getMouseX () dan getMouseY () ke objek Scene. Metode ini tidak selalu tepat, tapi cukup dekat untuk kebanyakan pemrograman game.

Setiap kali Anda ingin membaca mouse normal, cukup gunakan fungsi Scene getMouseX () dan getMouseY () untuk menentukan perkiraan posisi mouse.

Sebagian besar waktu ketika Anda menginginkan posisi mouse, itu karena Anda akan memindahkan objek di mana mouse berada atau mengarahkan objek ke arah mouse.

Seringkali, Anda ingin menyembunyikan kursor mouse, sehingga Anda dapat menggunakan metode hideCursor () obyek Scene untuk menyembunyikan kursor. (Tentu saja, Anda dapat mengambil kursor dengan metode showCursor ())

Jika Anda ingin membaca layar sentuh, ada satu langkah sederhana lagi. Perpustakaan simpleGame memiliki objek joystick virtual yang disebut Joy. Buat sebuah instance dari kelas ini untuk mengaktifkan fitur membaca layar sentuh.

Perhatikan bahwa antarmuka sentuh perangkat mobile tidak persis seperti mouse, jadi perlu antarmuka yang berbeda. Namun, begitu Anda membuat objek Sukacita, fungsi getMouseX () dan getMouseY () akan membuat input sentuhan bertindak seperti mouse biasa.

sentuhMouse. html menyembunyikan kursor mouse normal dan memindahkan bola ke mana pun mouse saat ini menunjuk. Contoh khusus ini bekerja dengan browser tradisional dan perangkat layar sentuh.

Perpustakaan simpleGame secara dramatis menyederhanakan proses kerja dengan penunjuk mouse dengan memberikan beberapa metode pemanggilan yang mudah. Inilah kodenya:

touchMouse. bola var html; permainan var; kegembiraan var; fungsi init () {game = new Scene (); ball = new Sprite (permainan, "redBall. png", 25, 25); bola. setSpeed ​​(0); permainan hideCursor (); sukacita = sukacita baru (); permainan start ();} // akhirin fungsi init update () {game. bersih(); followMouse (); bola update ();} // end update function followMouse () { x = game. getMouseX (); y = permainan getMouseY (); jika (permainan dapat disentuh) { // pindahkan benda sedikit lebih tinggi untuk layar sentuh y - = 100; } // akhiri tes layar sentuh bola. setPosition (x, y); }

Mendapatkan sprite untuk mengikuti mouse hanyalah soal mengetahui metode apa yang harus dihubungi.

  1. Sembunyikan kursor mouse.

    Objek Scene memiliki metode hideCursor ().Ini adalah cara termudah untuk menyembunyikan pointer mouse normal. Biasanya, saat Anda mengikuti mouse dengan objek, maksud Anda agar benda itu bertindak seperti penunjuk mouse baru, jadi Anda akan menyembunyikan panah normal.

  2. Buat variabel untuk joystick virtual.

    Jika Anda akan bekerja dengan perangkat touchpad, Anda memerlukan variabel berisi objek joystick virtual. (Jika permainan ini hanya akan digunakan pada mesin desktop dengan tikus normal, Anda tidak memerlukan benda joystick.)

  3. Inisialisasi joystick.

    Buat sebuah instance dari objek Joy di fungsi init (). Hanya dengan membuat joystick akan memberi tahu mesin untuk mengharapkan masukan sentuh dan memetakannya ke perintah mouse normal.

  4. Tambahkan fungsi followMouse ().

    Biasanya bagus untuk membuat fungsi baru untuk menangani input. Fungsi followMouse () akan memberitahu objek untuk mengikuti mouse. Tentu saja, jika Anda membangun objek yang mengikuti mouse, Anda dapat menjadikannya metode objek itu jika Anda mau.

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

    Objek Scene memiliki metode yang disebut getMouseX () dan getMouseY (). Gunakan metode ini untuk mendapatkan koordinat X dan Y mouse di tempat kejadian. Perhatikan bahwa koordinat tidak selalu tepat.

  6. Periksa untuk melihat apakah Anda memiliki layar sentuh.

    Objek Scene memiliki properti yang mudah disentuh yang benar jika browser memiliki layar sentuh. Anda biasanya tidak ingin objek disembunyikan oleh jari Anda, jadi sering Anda ingin mengimbangi sebuah benda saat menggunakan layar sentuh untuk masukan.

  7. Pindahkan benda lebih tinggi dari jari Anda.

    Di lingkungan layar sentuh, biasanya Anda ingin sprite tetap terlihat, sehingga Anda sering mengimbangi sumbu Y dengan jumlah tertentu sehingga tidak dikaburkan oleh jari pemain. Kurangi beberapa nilai dari Y untuk mendapatkan efek ini.

Bagaimana menambahkan Mouse Response ke Game HTML5 Anda untuk Akses Mobile - dummies

Pilihan Editor

Bagaimana Memeriksa Kinerja Sistem dengan AWS - dummies

Bagaimana Memeriksa Kinerja Sistem dengan AWS - dummies

AWS (Amazon Web Services) memberi Anda sejumlah metode untuk memantau layanan AWS-spesifik. Namun, Anda mungkin memiliki masalah kinerja sistem yang mendasarinya atau masalah aplikasi non-AWS yang harus dihadapi, yang berarti memiliki alat yang dapat bekerja di luar AWS. Paket grup Alat Kinerja berisi sejumlah alat khusus Linux untuk menyelesaikan tugas ini ...

Bagaimana Memilih Layanan AWS yang Anda Butuhkan - kenangan sehari-hari

Bagaimana Memilih Layanan AWS yang Anda Butuhkan - kenangan sehari-hari

Ingat bahwa Anda hanya memiliki 12 bulan kebebasan Anda percobaan untuk membuat keputusan tentang layanan AWS (Amazon Web Services) yang akan digunakan dalam bisnis Anda. Dua belas bulan mungkin tampak seperti banyak waktu, tapi Anda akan mendapati bahwa itu menguap di depan mata Anda saat Anda mencoba menyulap tanggung jawab, pertemuan, dan pertemuan sehari-hari Anda ...

Amazon Web Services For Dummies Cheat Sheet - dummies

Amazon Web Services For Dummies Cheat Sheet - dummies

Amazon Web Services (AWS) adalah penyedia layanan cloud yang menawarkan akses mudah ke berbagai sumber daya komputasi yang berguna, semuanya ditawarkan secara on-demand, dengan biaya yang efektif. Jika Anda seorang praktisi IT yang siap untuk merangkul Amazon Web Services, matikan kebiasaan desain aplikasi lama Anda dan terapkan pendekatan baru yang memanfaatkan karakteristik AWS dan ...

Pilihan Editor

GED Contoh Pertanyaan: Pertanyaan Ilmu Fisik - dummies

GED Contoh Pertanyaan: Pertanyaan Ilmu Fisik - dummies

Ketika Anda mencapai bagian Sains GED, Anda akan diharapkan memiliki pengetahuan umum di semua cabang Ilmu Pengetahuan, termasuk Ilmu Fisika. Berikut adalah contoh jenis pertanyaan yang mungkin Anda hadapi pada hari ujian. Kecepatan dan Kecepatan Ada perbedaan antara kecepatan dan kecepatan, meskipun terkadang Anda ...

Latihan GED RLA: Reading Comprehension - dummies

Latihan GED RLA: Reading Comprehension - dummies

Cara terbaik untuk mempersiapkan bagian pemahaman bacaan GED Tes RLA adalah melakukan sebanyak mungkin pertanyaan latihan. Simak sampel untuk melihat apa yang akan Anda hadapi pada hari ujian. Contoh Pertanyaan Pertanyaan 1-6 mengacu pada bagian berikut. Fasilitas untuk Akses ke Perusahaan Kreatif (FACE) Awalnya didirikan ...

GED Penalaran melalui Latihan Keterampilan Membaca Bahasa Seni - dummies

GED Penalaran melalui Latihan Keterampilan Membaca Bahasa Seni - dummies

Komponen bacaan Penalaran meskipun Bahasa Seni Bagian pada GED terdiri dari kutipan dari fiksi dan nonfiksi. Setiap kutipan diikuti oleh beberapa item pilihan berdasarkan bahan bacaan. Untuk pertanyaan di bagian ini, pilih satu jawaban terbaik untuk setiap pertanyaan. Bekerja dengan hati-hati, tapi jangan terlalu banyak menghabiskan waktu ...

Pilihan Editor

Bagaimana NaturallySpeaking Dapat Belajar dari Email Terkirim - dummies

Bagaimana NaturallySpeaking Dapat Belajar dari Email Terkirim - dummies

Menganalisis e-mail adalah salah satu cara untuk asisten NaturallySpeaking Anda untuk membangun kosa kata Anda. Proses ini membantu dalam dua cara. Ini belajar dari gaya e-mail Anda dan secara otomatis dapat menambahkan alamat e-mail yang Anda gunakan saat ini. Ia bekerja dengan Microsoft Outlook, Outlook. com, Lotus Notes, Gmail, Yahoo! , dan Windows Live Mail. Dari Pusat Akurasi, ...

Bagaimana NaturallySpeaking Berjalan di Latar Belakang - dummies

Bagaimana NaturallySpeaking Berjalan di Latar Belakang - dummies

Secara alamiSpeaking menggunakan beberapa jendela sekaligus. Biasanya, Anda meluncurkan aplikasi, Anda mendapatkan jendela aplikasi, dan Anda bekerja di jendela itu. Akhir dari cerita. Tidak demikian halnya dengan NaturallySpeaking, dan untuk alasan yang bagus: Anda ingin bisa menggunakan input suara di banyak tempat yang berbeda, tidak hanya di satu jendela saja. Inti ...

Bagaimana menambahkan perintah teks otomatis ke nuansa profesional - dummies

Bagaimana menambahkan perintah teks otomatis ke nuansa profesional - dummies

Menambahkan Fitur baru yang hebat yang akan membuat Anda semakin produktif saat menggunakan perintah Dragon Professional Individual Anda. Ini adalah kemampuan untuk menggunakan variabel dalam perintah auto-text Anda. Jadi bagaimana anda bisa menggunakannya? Setelah Anda membuat perintah baru dan menentukan isinya sehingga Anda tidak perlu mengetik ulang ...