Bagaimana untuk menambah perlanggaran ke game HTML5 anda - dummies

Perkara yang paling menarik dalam permainan video HTML5 berlaku ketika sprites conk dan bertembung antara satu sama lain. Enjin permainan biasanya mempunyai beberapa jenis alat untuk menguji sama ada dua sprite bertindih. Ini dipanggil pengesanan perlanggaran , dan ia boleh dilakukan dengan beberapa cara. Contoh ini menggunakan skema perbatasan standard . Ia tidak sempurna, tetapi ia sangat mudah dilaksanakan dan biasa digunakan.

Bagaimana untuk menetapkan perlanggaran segiempat tepat dalam permainan anda

Lihatlah colTest. html dan anda akan melihat contoh mudah.

Dalam colTest. contoh html, pengguna akan menggerakkan makhluk dengan tetikus, dan anda akan mendapat mesej apabila critter menyentuh kotak di tengah-tengah skrin.

colTest. html checkCollisions (); Kotak . kemas kini (); kejang. kemas kini ();} // kemas kini akhir; fungsi checkCollisions () { if (box.collidesWith (critter)) { output. innerHTML = "Collision"; } else { output. innerHTML = "Tiada perlanggaran"; } // akhir jika } // check endCollisions kosong

Beberapa perkara menarik yang berlaku dalam kod ini:

1. Sembunyikan kursor tetikus normal.

   Apabila anda akan mempunyai objek lain mengikut tetikus, anda biasanya ingin menyembunyikan kursor panah normal. Dalam mudahGame, gunakan permainan. kaedah hideCursor () untuk menyembunyikan kursor tetikus di dalam skrin permainan.

2. Buat lebih daripada satu sprite.

   Ia mengambil masa dua hingga tango, atau bertembung. Dalam contoh ini, kotak akan kekal pegun, dan critter yang mengikuti mouse.

3. Berikan pengecut berikut kaedah followMouse ().

   Dalam contoh ini, anda mempunyai critter yang mengikuti mouse. Mulakan dengan membuat kaedah followMouse ().

4. Tentukan kedudukan tetikus.

   Kedudukan tetikus ditentukan (dalam mudahGame js) dengan dokumen. tetikus dan dokumen. sifat mouseY.

5. Salin kedudukan tetikus ke kedudukan critter.

   Gunakan kedudukan x tetikus untuk menetapkan kedudukan x critter, dan ulangi dengan y.

6. Panggil kaedah followMouse () critter setiap bingkai.

   Seperti biasa, fungsi update () adalah di mana anda meletakkan kod yang sepatutnya berlaku berulang kali.

Jika anda bermain-main dengan colTest. halaman html, anda mungkin akan melihat bahawa perlanggaran tidak tepat. Ia mungkin untuk mendaftarkan perlanggaran walaupun critter sebenarnya tidak menyentuh kotak. Ini penting kerana simpleGame menggunakan skim yang dipanggil perlanggaran kotak terikat .

Ini bermakna anda tidak semestinya menyemak sama ada imej bertaburan tetapi sama ada segi empat di sekeliling imej bertabrakan. Dalam contoh ini, perbezaannya adalah kecil, tetapi anda kadang-kadang akan melihat kesilapan besar dengan mekanisme ini, terutama dengan unsur-unsur yang panjang dan nipis. Apabila sprit berputar, saiz segi empat sempadan boleh berubah.

Perlanggaran berasaskan jarak untuk permainan anda

Bentuk alternatif pengesanan perlanggaran, yang disebut perlanggaran bulatan terikat , tersedia. Dengan mekanisme ini, anda hanya mengira jarak antara pusat dua sprite, dan jika nilai itu lebih kecil daripada beberapa ambang, anda menganggapnya perlanggaran. Pendekatan ini mempunyai dua kelebihan:

• Jarak perlanggaran adalah malar. Jarak antara pusat imej tidak akan berubah apabila imej diputar, walaupun imej berubah saiznya.

• Ambang perlanggaran boleh diubah. Anda boleh menetapkan sensitiviti yang anda inginkan. Tetapkan jejari perlanggaran yang besar untuk pelanggaran yang mudah dan yang lebih kecil apabila anda mahu perlanggaran hanya dicetuskan apabila sprite sangat dekat satu sama lain.

Objek Sprite simpleGame mempunyai kaedah distanceTo (), yang menghitung jarak dari satu sprite ke yang lain. Anda boleh melihat contoh kod ini di jauh. contoh html:

jarak. permainan html var; kotak var; var critter; var output; fungsi init () {game = scene baru (); permainan. hideCursor (); box = new Sprite (game, "simpleBox. png", 50, 50); critter = Sprite baru (permainan, "critter gif", 50, 50); output = dokumen. getElementById ("output"); / / bungkus kotak kedudukan tetap kotak. setPosition (200, 150); kotak. setSpeed ​​(0); kejang. setPosition (100, 100); kejang. setSpeed ​​(0); // critter dikendalikan oleh critter mouse. followMouse = function () {this. setX (document. mouseX); ini. setY (document. mouseY); // end follow game mouse. mulakan ();} / update akhir fungsi panas () {permainan. jelas (); kejang. followMouse (); checkDistance (); Kotak . kemas kini (); kejang. kemas kini ();} // kemas kini akhir; fungsi checkDistance () { dist = box. distanceTo (critter); jika (dist <50) { output. innerHTML = "Perlanggaran:" + dist; } else { output. innerHTML = "Tiada perlanggaran:" + dist; } // akhir jika } // end checkDistance kosong

Kaedah perlanggaran berasaskan jarak jauh sangat mirip dengan versi segi empat tepat. Buat fungsi checkDistance () yang akan bertindak seperti centang lama (). Berikut adalah langkah-langkah untuk apa yang berlaku di checkDistance:

1. Cari jarak antara kedua-dua sprite.

   Gunakan jarak jauhTo () kaedah untuk menentukan jarak antara kedua-dua sprite.

2. Sekiranya jarak kurang daripada beberapa ambang, kiraan sebagai perlanggaran.

   Secara amnya anda harus menggunakan lebar sprite yang lebih kecil sebagai titik permulaan untuk ambang perlanggaran, tetapi anda boleh menyesuaikan ini untuk membuat perlanggaran lebih atau kurang mungkin.

3. Laporkan status perlanggaran.

   Dalam contoh ini, hanya mencetak "perlanggaran" atau "tidak perlanggaran," tetapi dalam permainan sebenar, perlanggaran adalah pencetus untuk tindakan lain: meningkatkan skor, menurunkan jumlah nyawa, mengubah kelajuan atau kedudukan unsur berlanggar, atau apa sahaja. (Semoga ia melibatkan letupan.)