H5 Peranti Peranti dan Orientasi untuk Permainan Interaktif

Pergerakan dan orientasi peranti adalah API yang digunakan untuk mengesan pergerakan dan orientasi peranti dalam permainan interaktif H5, dan didengar melalui peristiwa penyembuhan dan peranti. 1. DevicemotionEvent menyediakan data pecutan, sesuai untuk mengesan tindakan gemetar; 2. DeviceorientationEvent menyediakan nilai alpha, beta, dan gamma untuk kawalan kecondongan. Apabila menggunakannya, anda perlu mendaftarkan pendengar acara dan memberi perhatian kepada keserasian penyemak imbas dan pengoptimuman prestasi. Sebagai contoh, anda boleh mengawal kadar bingkai dengan RequestAnimationFrame, dan "Shake" dan fungsi lain dapat dicapai dengan mengira jumlah nilai pecutan dan menetapkan ambang.

Apabila membangunkan permainan interaktif berdasarkan H5, gerakan peranti dan orientasi adalah dua API yang sangat praktikal yang dapat menjadikan permainan anda lebih dekat dengan operasi fizikal pengguna. Sebagai contoh, kesan menggoncang dan mengawal lompatan watak, memiringkan stereng telefon semuanya dicapai melalui API ini. Seterusnya, saya akan bercakap tentang cara menggunakan kedua -dua fungsi ini dari perspektif penggunaan sebenar.

Apakah gerakan dan orientasi peranti?

Ringkas:

• DeviceMotionEvent memberikan maklumat mengenai percepatan peranti, termasuk perubahan pecutan di bawah pengaruh graviti, dan sesuai untuk mengesan tindakan "berjabat" dan "bergerak".
• DeviceOrientationEvent menyediakan maklumat arah peranti dalam ruang tiga dimensi, terutamanya alpha, beta, dan gamma. Ia sering digunakan untuk mengawal sudut tontonan permainan atau pergerakan watak mengikut sudut kecondongan peranti.

Kedua -dua API memerlukan kebenaran pengguna aktif untuk didayakan, terutamanya dalam pelayar mudah alih. Mereka mungkin tidak diaktifkan secara lalai atas sebab keselamatan dan prestasi.

Bagaimana memantau tindakan peranti?

Untuk menggunakan fungsi ini, anda mesti terlebih dahulu mendaftarkan pendengar acara. Inilah kaedah penulisan asas:

 window.addeventListener ('deviceMotion', function (event) {
    // Dapatkan data pecutan const acceleration = event.acceleration;
    console.log (acceleration.x, acceleration.y, acceleration.z);
});

window.addeventListener ('deviceOtrientation', function (event) {
    // Dapatkan Data Arah Console.log (event.alpha, event.beta, event.gamma);
});

Apa yang harus diperhatikan ialah:

• event.acceleration adalah pecutan selepas mengeluarkan graviti (beberapa pelayar seperti iOS mungkin mengandungi graviti)
• Sekiranya anda mahukan pengesanan "gemetar" yang lebih tepat, anda boleh menghukumnya berdasarkan perbezaan pecutan antara beberapa kali sebelumnya dan akan datang

Bagaimana untuk menerapkannya dalam permainan?

Untuk contoh yang mudah: anda mahu melakukan tindakan yang mencetuskan "goncang", seperti melangkau halangan.

Anda boleh menilai dengan cara ini:

• Dengarkan Devicemotion
• Dapatkan nilai pecutan pada paksi x/y/z setiap kali
• Kirakan jumlah pecutan semasa: Math.sqrt(x^2 y^2 z^2)
• Sekiranya nilai ini melebihi ambang tertentu dan terdapat selang waktu tertentu dari pencetus terakhir, tindakan lompat akan dilakukan

Rajah Kod:

 Biarkan LastShakeTime = 0;

window.addeventListener ('deviceMotion', function (event) {
    const acceleration = event.acceleration;
    const totalAcceleration = Math.sqrt (
        acceleration.x ** 2  
        acceleration.y ** 2  
        acceleration.z ** 2
    );

    jika (totalAcceleration> 15 && date.now () - lastShakeTime> 1000) {
        // Lompat pencetus atau lompat tindakan lain ();
        lastShakeTime = date.now ();
    }
});

Jika ia adalah permainan kawalan arah, seperti stereng kereta lumba kiri dan kanan, anda boleh menggunakan nilai gamma (kecondongan kiri dan kiri) dalam peranti untuk membuat penghakiman.

Nota dan keserasian

Walaupun ciri -ciri ini disokong dengan baik dalam pelayar moden, masih terdapat beberapa perkara yang perlu diperhatikan:

• IOS Safari tidak membolehkan peristiwa ini secara lalai. Pengguna perlu mencetuskan permintaan kebenaran secara manual selepas mengklik pada halaman.
• Peranti yang berbeza mempunyai ketepatan sensor yang berbeza, jadi lebih baik untuk mencuba beberapa model lagi semasa ujian.
• Jangan kerap melakukan pengiraan yang rumit untuk mengelakkan menjejaskan kadar bingkai
• Anda boleh menggunakan permintaan yang diminta untuk pemprosesan pendikit

Di samping itu, pastikan untuk menguji tingkah laku mesin sebenar sebelum pergi dalam talian, dan simulator kadang -kadang memberikan data yang mengelirukan.

Pada dasarnya itu sahaja. Selepas menggunakan API ini dengan mahir, anda akan mendapati bahawa kaedah interaksi permainan H5 sebenarnya boleh menjadi kaya dan lebih mendalam bagi pengguna.

Atas ialah kandungan terperinci H5 Peranti Peranti dan Orientasi untuk Permainan Interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!