Cara Menambahkan Tabrakan ke Game HTML5 Anda

Hal yang paling menarik dalam video game HTML5 terjadi saat sprite bertabrakan dan bertabrakan satu sama lain. Mesin permainan biasanya memiliki semacam alat untuk menguji apakah dua sprite tumpang tindih. Ini disebut deteksi tabrakan , dan bisa dilakukan dengan beberapa cara. Contoh ini menggunakan skema standar bounding rectangle . Ini tidak sempurna, tapi sangat mudah diimplementasikan dan biasa digunakan.

Cara memasang tabrakan persegi panjang yang melintang di game Anda

Lihatlah colTest. html dan Anda akan melihat contoh sederhana.

di coltest Contoh html, pengguna menggerakkan makhluk itu dengan mouse, dan Anda akan mendapatkan pesan saat makhluk itu menyentuh kotak di tengah layar.

colTest html checkCollisions (); . memperbarui(); makhluk. update ();} // akhir update; function checkCollisions () { if (box. CollidesWith (critter)) { output. innerHTML = "tabrakan"; } else { output. innerHTML = "Tidak ada tabrakan"; } // akhiri jika } // akhiri checkCollisions kosong

Sejumlah hal menarik terjadi dalam kode ini:

1. Sembunyikan kursor mouse normal.

   Bila Anda ingin beberapa benda lain mengikuti mouse, Anda biasanya ingin menyembunyikan kursor panah normal. Dalam simpleGame, gunakan permainannya. hideCursor () metode untuk menyembunyikan kursor mouse di dalam layar permainan.

2. Buat lebih dari satu sprite.

   Dibutuhkan dua tango, atau bertabrakan. Dalam contoh ini, kotak akan tetap stasioner, dan makhluk yang mengikuti mouse.

3. Berikan makhluk tersebut sebuah metode followMouse ().

   Dalam contoh ini, Anda memiliki makhluk yang mengikuti mouse. Mulailah dengan membuat metode followMouse ().

4. Tentukan posisi mouse.

   Posisi mouse ditentukan (dalam simpleGame.js) dengan dokumen. mouseX dan dokumen mousey properti

5. Salin posisi mouse ke posisi karakter.

   Gunakan posisi x mouse untuk mengatur posisi x si pengguna, dan ulangi dengan y.

6. Panggil metode followmouse () setiap makhluk itu setiap frame.

   Seperti biasa, fungsi update () adalah tempat Anda meletakkan kode yang harus terjadi berulang kali.

Jika Anda bermain-main dengan colTest. halaman html, Anda mungkin akan menyadari bahwa tabrakan itu tidak tepat. Mungkin ada daftar tabrakan bahkan saat makhluk itu tidak benar-benar menyentuh kotak itu. Hal ini penting karena simpleGame menggunakan skema yang disebut bounding box collisions .

Ini berarti Anda sebenarnya tidak memeriksa apakah gambar bertabrakan tapi apakah persegi panjang di sekitar gambar bertabrakan. Dalam contoh ini, bedanya kecil, tapi terkadang Anda akan melihat kesalahan yang signifikan dengan mekanisme ini, terutama dengan elemen yang panjang dan tipis. Sebagai sprite berputar, ukuran persegi panjang yang melintang bisa berubah.

Tabrakan berbasis jarak untuk permainan Anda

Bentuk deteksi tabrakan alternatif, yang disebut lingkaran bounding circle , tersedia. Dengan mekanisme ini, Anda cukup menghitung jarak antara pusat dua sprite, dan jika nilainya lebih kecil dari ambang batas, Anda menganggapnya sebagai tumbukan. Pendekatan ini memiliki dua keuntungan:

• Jarak benturan konstan. Jarak antara pusat gambar tidak akan berubah saat gambar diputar, bahkan jika gambar berubah ukuran.

• Ambang tabrakan bisa bervariasi. Anda dapat mengatur kepekaan yang Anda inginkan. Tetapkan radius tumbukan besar untuk tumbukan mudah dan yang lebih kecil bila Anda ingin tabrakan dipicu hanya saat sprite sangat dekat satu sama lain.

Objek perpustakaan SimpleGame Sprite memiliki metode distanceTo (), yang menghitung jarak dari satu sprite ke yang lain. Anda bisa melihat contoh kode ini di kejauhan. contoh html: jarak

. permainan var html; kotak var; var makhluk; var output; fungsi init () {game = new Scene (); permainan. hideCursor (); box = new Sprite (permainan, "simpleBox. png", 50, 50); critter = new Sprite (permainan, "makhluk gif", 50, 50); output = dokumen getElementById ("output"); // berikan kotak posisi tetap. setPosition (200, 150); kotak. setSpeed ​​(0); makhluk. setPosition (100, 100); makhluk. setSpeed ​​(0); // makhluk yang dikendalikan oleh tikus. followMouse = function () {this. setX (dokumen mouseX); ini. setY (dokumen mousei);} // akhirilah permainanMouse. start ();} // akhirin fungsi init update () {game. bersih(); makhluk. followMouse (); checkDistance (); . memperbarui(); makhluk. update ();} // akhir update; fungsi checkDistance () { dist = kotak. jarak untuk (makhluk); jika (dist <50) { output. innerHTML = "Tabrakan:" + dist; } else { output. innerHTML = "Tidak ada tabrakan:" + dist; } // akhiri jika } // akhiri checkDistance kosong

Metode tabrakan berbasis jarak sangat mirip dengan versi bounding-rectangle. Buat fungsi checkDistance () yang akan bertindak seperti checksCollisions yang lama (). Inilah langkah-langkah untuk apa yang terjadi di checkDistance:

1. Temukan jarak antara kedua sprite.

   Gunakan jarak spriteTo () metode untuk menentukan jarak antara dua sprite.

2. Jika jaraknya kurang dari ambang batas, hitung sebagai tabrakan.

   Umumnya Anda harus menggunakan lebar sprite yang lebih kecil sebagai titik awal untuk ambang tumbukan, namun Anda dapat menyesuaikannya dengan membuat tumbukan lebih atau kurang mungkin terjadi.

3. Laporkan status tumbukan.

   Dalam contoh ini, cukup cetak "tabrakan" atau "tidak ada tabrakan", namun dalam permainan nyata, tabrakan memicu tindakan lain: meningkatkan skor, mengurangi jumlah kehidupan, mengubah kecepatan atau posisi elemen yang bertabrakan., atau terserah. (Mudah-mudahan, ini melibatkan ledakan.)