Video: Building Dynamic Web Apps with Laravel by Eric Ouyang 2024
Akan ada saat ketika Anda akan menggunakan kembali beberapa kali objek dalam game HTML5 Anda dan mereka akan bertahan hampir sama. Jadi, masuk akal untuk memasukkannya ke perpustakaan agar mudah digunakan kembali. Itulah yang akan Anda lakukan. Lihatlah kodokLib. js:
// frogLib. js // Objek untuk fungsi permainan kodok Fly () {tFly = new Sprite (adegan, "fly. png", 20, 20); tFly. setSpeed (10); tFly. wriggle = function () {// ubah arah dengan beberapa bilangan acak newDir = (Math. random () * 90) - 45; ini. changeAngleBy (newDir);} // end wriggle return tFly;} // akhiri fungsi Fly Frog () {tFrog = new Sprite (adegan, "kodok. png", 50, 50); tfrog maxSpeed = 10; tfrog minSpeed = -3; tfrog setSpeed (0); tfrog setAngle (0); tfrog checkKeys = function () {if (keysDown [K_LEFT]) {this. changeAngleBy (-5);} // akhir jika if (keysDown [K_RIGHT]) {this. changeAngleBy (5);} // akhir jika if (keysDown [K_UP]) {this. changeSpeedBy (1); jika (ini. kecepatan> ini. maxSpeed) {this. setSpeed (ini. maxSpeed);} // akhir jika} // akhiri jika if (keysDown [K_DOWN]) {this. changeSpeedBy (-1); jika (kecepatan ini
Ini adalah dokumen yang menarik. Ini tidak berisi apa-apa kecuali dua definisi kelas. Ini digunakan karena beberapa program lain akan menggunakan dua kelas ini.
Menggunakan perpustakaan adalah kesederhanaan itu sendiri. Inilah kodoknya. file html yang menempatkan kedua elemen ini bersama dalam satu game:
frogFly. html src = "frogLib. js"> adegan var; katak var; terbang; daun var; fungsi init () {scene = new Scene (); tempat kejadian. setBG ("hijau"); katak = kodok baru (); fly = new Fly (); daun = Sprite baru (adegan, "daun png", 640, 480); Daun-daun. setSpeed (0); tempat kejadian. start ();} // akhirin fungsi init update () {scene. bersih(); katak. checkKeys (); terbang. bergeliang(); Daun-daun. memperbarui(); katak. memperbarui(); terbang. update ();} // akhir update ();
Program ini tidak banyak mengenalkannya. Ini hanya menerapkan elemen yang didefinisikan di perpustakaan, sesuai dengan langkah-langkah ini:
-
Impor froglib. perpustakaan js
Berkas frogLib hanyalah file JavaScript. Impor dengan cara yang sama seperti Anda mengimpor simpleGame. js file, dengan tag terpisah
-
Buat sprite.
Daun sprite hanyalah sprite biasa. Bangun kodok dan terbang seperti yang Anda lakukan sebelumnya, meskipun mereka didefinisikan di file lain. (Jika katak atau lalat tidak tercipta, pastikan Anda mengimpor perpustakaan dengan benar.)
-
Kelola perubahan.
Fungsi update () bertanggung jawab untuk mengendalikan permainan. Di sinilah Anda mengelola semua berbagai perilaku sprite: Beritahu kodok untuk mencari penekanan tombol (dengan kodok, metode checkKeys ()), dan beri tahu lalat untuk menggeliat (dengan metode lompatan.flip ()).
-
Gambarkan sprite.
Setelah Anda menangani semua yang menyebabkan sprite berubah, gambar sprite di layar. Gambarlah setiap sprite dengan cara memanggil metode update () nya. Sprite ditarik dalam urutan, jadi apapun yang Anda inginkan di latar belakang harus ditarik sebelum item yang akan ditampilkan di depan. (Katak akan muncul di atas latar belakang, jadi katak harus ditarik setelah latar belakang pada setiap pembaruan layar.)
