Cara Membuat Interaksi Pengguna di Game HTML5 Anda - dummies

Perbedaan terbesar antara game HTML5 dan animasi adalah interaksi pengguna. Jika Anda ingin membuatnya menjadi permainan, Anda memerlukan pengguna untuk terlibat. Dan inilah cara melakukannya.

Inilah kodenya:

mobil. adegan var html; mobil var; fungsi init () {scene = new Scene (); mobil = Sprite baru (adegan, "mobil png", 50, 30); mobil. setAngle (270); mobil. setSpeed (0); tempat kejadian. start ();} // akhirin fungsi init update () {scene. bersih(); // centang kunci jika (keysDown [K_LEFT]) { mobil. changeAngleBy (-5); } // akhiri jika jika (keysDown [K_RIGHT]) { mobil. changeAngleBy (5); } // akhiri jika jika (keysDown [K_UP]) { mobil. changeSpeedBy (1); } // akhiri jika jika (keysDown [K_DOWN]) { mobil. changeSpeedBy (-1); } // akhiri jika mobil. update ();} // end update

Mengendarai mobil!

Cara menggunakan keyboard untuk permainan Anda

Entah bagaimana pengguna perlu berinteraksi dengan halaman. Keyboard adalah salah satu elemen masukan termudah untuk digunakan. simpleGame menyediakan beberapa cara untuk mengecek keyboard, namun teknik yang paling ampuh menggunakan variabel khusus yang disebut keysDown. Begini cara kerjanya:

keysDown adalah array global. Variabel ini dibuat secara otomatis saat Anda membangun sebuah adegan. Ini adalah array dari nilai Boolean - yang berarti setiap elemen hanya bisa true atau hanya false.
Ada konstan yang didefinisikan untuk setiap tombol. Setiap tombol pada keyboard standar memiliki konstanta khusus yang sudah ditentukan. Misalnya, K_A mewakili tombol A, dan K_B mewakili kunci B.
keysDown memberitahukan status setiap tombol. Jika tombol A saat ini ditekan, keysDown [A] akan berisi nilai true. Jika tombol A tidak ditekan, keysDown [A] akan berisi nilai false.
Anda dapat menentukan status terkini dari tombol apa saja. Cek saja tombol keysDown [] untuk menentukan status key yang ada.
Anda dapat memiliki beberapa tombol sekaligus. Tujuan utama dari teknik ini adalah untuk memungkinkan beberapa tombol ditekan sekaligus. Dalam komputasi normal, tidak biasa memiliki lebih dari satu tombol sekaligus. Di game, sangat umum menekan lebih dari satu tombol sekaligus, jadi Anda memerlukan mekanisme yang bisa mendukung harapan ini.

Cara menggerakkan sprite permainan

Pada dasarnya, sprite memiliki posisi, yang dikendalikan oleh properti X dan Y. Jika Anda ingat dari kelas matematika, X mewakili nilai horisontal, dan Y adalah untuk lokasi vertikal. Tanda asal (0, 0) adalah pojok kiri atas layar.

Koordinat X bekerja sama seperti Anda ingat dari kelas matematika. Karena nilai X semakin besar, sprite bergerak ke kanan. Dalam grafis komputer, Y bertindak sedikit berbeda dari kelas matematika.Sebagian besar pemindaian perangkat keras display dari atas ke bawah, jadi Y adalah 0 di bagian atas layar dan meningkat saat Anda bergerak ke bawah.

Perhatikan bahwa tinggi dan lebar maksimum disimpan dalam variabel: scene. tinggi dan pemandangan lebar.

Semua berbagai metode pergerakan benar-benar tentang memanipulasi X dan Y. Anda dapat mengatur nilai ini secara manual (setPosition (), setX (), dan setY ()), atau Anda dapat mengubah nilainya (changeXby (), ubahYby ()). Masing-masing metode ini bertindak segera, sehingga Anda bisa menggunakannya untuk mengarahkan posisi atau gerak sprite.

Beberapa fungsi ini tampak serupa satu sama lain. Sebagai contoh, changeXby () terlihat sangat mirip setChangeX (). Fungsi ini memiliki perbedaan yang halus tapi penting. Fungsi changeXby () mengubah nilai X satu kali. Jika Anda ingin perubahan berlanjut, Anda harus terus memanggil fungsi ini.

Fungsi setChangeX () lebih hebat karena Anda dapat menyebutnya satu kali, dan berulang kali mengubah x dengan nilai apapun yang Anda tentukan sampai Anda memanggil setChangeX () lagi.

Bagi kebanyakan sprite, Anda benar-benar ingin memberi sprite sudut dan kecepatan, dan membiarkannya pergi. Objek sprite memiliki metode yang Anda perlukan untuk perilaku ini. setAngle () memungkinkan Anda menentukan arah sprite akan pergi, dan setSpeed () memungkinkan Anda menentukan kecepatan untuk pergi ke arah itu. Seperti kebanyakan fungsi gerak, ada juga metode changeAngle () dan changeSpeed ().

Cara mengendalikan mobil di permainan Anda

Tombolnya mekanisme dapat dikombinasikan dengan metode gerakan untuk mengendalikan mobil Anda dengan mudah. Inilah kode yang relevan dari update () lagi:

function update () {scene. bersih(); // centang kunci jika (keysDown [K_LEFT]) { mobil. changeAngleBy (-5); } // akhiri jika jika (keysDown [K_RIGHT]) { mobil. changeAngleBy (5); } // akhiri jika jika (keysDown [K_UP]) { mobil. changeSpeedBy (1); } // akhiri jika jika (keysDown [K_DOWN]) { mobil. changeSpeedBy (-1); } // akhiri jika mobil. update ();} // end update

Pengkodean sebenarnya cukup mudah dimengerti:

Kosongkan pemandangan.

Seperti biasa, urutan pertama bisnis di fungsi update () adalah membersihkan ruang bermain. Pastikan Anda menghapus bingkai sebelumnya sebelum melakukan hal lain.
Periksa panah kiri tekan.

Gunakan tombol untuk mengatur apakah panah kiri ditekan.
Jika panah kiri ditekan, belok kiri mobil.

Jika pengguna saat ini menekan tombol panah kiri, putar mobil lima derajat berlawanan arah jarum jam. Gunakan metode changeAngleBy () untuk mengubah tampilan visual mobil dan juga arah perjalanannya.
Ulangi untuk panah kanan.

Cek panah kanan sama, tapi kali ini putar mobil lima derajat searah jarum jam.
Gunakan panah atas untuk mempercepat.

Jika pengguna menekan panah ke atas, ubah kecepatan mobil. Gunakan nilai positif untuk mempercepat mobil. Ini tidak akan memakan banyak karena kode ini diperiksa 20 kali per detik.
Lambat mobil turun dengan panah bawah.

Gunakan mekanisme serupa untuk panah bawah.Ubah kecepatan dengan nilai negatif untuk memperlambat mobil. Pendekatan ini memungkinkan nilai negatif, dan mobil akan kembali jika Anda mau.
Gambarkan mobil di posisi barunya.

Sangat penting untuk diingat bahwa memanggil fungsi gerak sprite tidak mengubah lokasi mobil! Hanya mengubah data internal dalam memori permainan. Anda harus menghubungi metode update mobil () untuk melihat perubahan tindakan ini.