Cara Tambah Butang ke Permainan HTML5 Anda untuk Akses Mudah Alih - dummies

Perpustakaan simpleGame mempunyai ciri berguna yang dipanggil GameButton untuk menambah butang ke skrin peranti mudah alih untuk permainan HTML5 anda. Papan kekunci adalah salah satu cara paling mudah untuk mendapatkan input dalam pelayar biasa, tetapi kebanyakan peranti mudah alih tidak mempunyai papan kekunci. Masalah pertama ialah mencari cara untuk mendapatkan input pengguna apabila tiada papan kekunci.

Objek butang adat GameButton bermula dengan ciri-ciri butang HTML standard tetapi kemudian menambah beberapa helah untuk menjadikannya sesuai untuk permainan. Anda boleh mengaktifkan butang dengan tetikus biasa atau dengan kawalan sentuh, menjadikannya sesuai untuk permainan yang boleh dimainkan pada kedua-dua jenis peranti. Butang. halaman html menggambarkan butang dalam tindakan:

butang. html var btnMove; Permainan var; var bola; fungsi init () {game = scene baru (); permainan. setSize (200, 200); bola = Sprite baru (permainan, "redBall. png", 25, 25); bola. setSpeed ​​(0); bola. setPosition (100, 100); btnMove = GameButton baru ("Pindah"); btnMove. setPos (70, 150); btnMove. setSize (60, 30); Permainan . mulakan ();} / update akhir fungsi panas () {permainan. jelas (); checkButtons (); Bola . update ();} // end update function checkButtons () { if (btnMove isClicked ()) { ball. setSpeed ​​(3); } lain { bola. setSpeed ​​(0); } // akhir jika } // end checkButton

Seperti biasa, elemen baru dan menarik ditunjukkan dalam huruf tebal. Berikut adalah cara anda menambah butang permainan ke permainan:

1. Buat pembolehubah untuk butang tersebut.

   Seperti elemen permainan lain, anda mulakan dengan membuat pembolehubah untuk merujuk kepada butang.

2. Bina objek GameButton.

   Bina objek GameButton dalam kaedah init (). Parameter tunggal menunjukkan tajuk butang.

3. Tetapkan saiz dan kedudukan butang.

   Anda akan fikir sedikit tentang bagaimana permainan anda akan berfungsi pada peranti mudah alih. Letakkan butang anda di mana mereka dapat dengan mudah dicapai oleh pemain tanpa menyekat terlalu banyak pandangan. Perhatikan bahawa anda juga ingin membuat butang cukup besar untuk ditekan semasa panas permainan. (Butang pada skrin jauh lebih baik untuk permainan berasaskan tablet.)

4. Semak butang butang semasa kemas kini ().

   Sama seperti yang anda semak memeriksa status papan kekunci semasa fungsi kemas kini (), anda juga boleh memanggil fungsi untuk memeriksa status butang anda. Sudah tentu, anda perlu menulis fungsi ini.

5. Baca butang butangClick () kaedah butang.

   Jika butang sedang ditekan, nilai yang diklik () adalah benar. Jika butang tidak sedang ditekan, isClicked () mengembalikan palsu.Gunakan kaedah ini untuk menentukan keadaan semasa bagi setiap butang dan bertindak dengan sewajarnya.

6. Rawat butang seperti keyboard.

   Oleh kerana menguji butang akhirnya mengembalikan nilai Boolean (benar atau palsu), memeriksa butang biasanya merasakan keseluruhan seperti memeriksa papan kekunci.

7. Pertimbangkan untuk menambah butang hanya apabila perlu.

   Jika anda mahu, anda boleh merancang permainan untuk memaparkan (dan menguji) butang hanya apabila skrin sentuh tersedia. Objek Scene mempunyai pembolehubah khas yang dikenali sebagai sentuhan. Pembolehubah ini adalah benar jika perpustakaan merasakan skrin sentuh, dan sebaliknya. Anda boleh menggunakan pembolehubah ini untuk menghasilkan antara muka tersuai yang menyesuaikan diri dengan persekitaran bermain.

Biasanya, anda akan menambah beberapa butang pada antara muka anda, satu untuk menggantikan setiap kunci yang anda harapkan pengguna untuk digunakan (sebagai contoh, anak panah dan bar ruang). Dengan cara ini, anda boleh membuat papan kekunci maya pada skrin. Anda mungkin perlu menguji saiz dan kedudukan setiap kunci untuk mendapatkan pengalaman permainan yang selesa.

Perhatikan bahawa kapsyen butang adalah HTML biasa, jadi jika anda ingin membuat butang anda berdasarkan pada imej, anda boleh menambah teg

yang sesuai sebagai kapsyen butang.