Cara Membina Perpustakaan Objek Boleh Digunakan untuk Permainan HTML5 Anda - orang-orang

Akan ada masa apabila anda akan menggunakan semula objek beberapa kali dalam permainan HTML5 anda dan mereka akan tetap sama. Oleh itu, masuk akal untuk meletakkannya di perpustakaan untuk kegunaan semula. Itulah yang anda akan lakukan. Lihatlah frogLib. js:

// frogLib. js // Objek untuk fungsi permainan katak Fly () {tFly = Sprite baru (tempat kejadian, "fly png", 20, 20); tFly. setSpeed ​​(10); tFly. wriggle = function () {// direction change by some random number newDir = (Math random () * 90) - 45; ini. }} // end fly function tFly;} // end Fly function Frog () {tFrog = new Sprite (scene, "katak 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);} // end if if (keysDown [K_RIGHT]) {this. changeAngleBy (5);} // end if if (keysDown [K_UP]) {this. changeSpeedBy (1); jika (kelajuan ini> ini. maxSpeed) {ini. setSpeed ​​(ini maxSpeed);} // end if} // end jika if (keysDown [K_DOWN]) {this. changeSpeedBy (-1); jika ini (kelajuan ini 
Ini adalah dokumen yang menarik. Ia tidak mengandungi apa-apa kecuali dua definisi kelas. Ia digunakan kerana beberapa program lain akan menggunakan kedua-dua kelas ini.






Menggunakan perpustakaan adalah kesederhanaan itu sendiri. Inilah frogFly. fail html yang meletakkan kedua-dua unsur bersama dalam satu permainan:
frogFly. html src = "frogLib. js"> var scene; var katak; var fly; daun var; fungsi init () {scene = scene baru (); tempat kejadian. setBG ("hijau"); katak = katak baru (); fly = new Fly (); leaves = new Sprite (adegan, "daun png", 640, 480); daun. setSpeed ​​(0); tempat kejadian. mulakan ();} // kemas kinian fungsi akhir init () {adegan. jelas (); katak. checkKeys (); terbang. menggunting (); daun. kemas kini (); katak. kemas kini (); terbang. kemas kini ();} // end update ();

Program ini tidak memperkenalkan banyak perkara baru. Ia hanya melaksanakan elemen-elemen yang ditakrifkan di perpustakaan, mengikut langkah-langkah berikut:









Import froglib. js perpustakaan.
Fail frogLib hanyalah fail JavaScript. Importkannya dengan cara yang sama anda mengimport mudahGame. fail js, dengan tag berasingan.


Buat sprite.
Daun sprite hanyalah sprit biasa. Bangun katak dan terbang seperti yang anda lakukan sebelum ini, walaupun ia ditakrifkan dalam fail lain. (Sekiranya katak atau lalat tidak dicipta, pastikan anda mengimport perpustakaan dengan betul.)








Urus perubahan.
Fungsi update () berfungsi bertanggungjawab untuk mengawal permainan. Ini adalah di mana anda menguruskan semua tingkah laku sprite: Beritahu katak untuk mencari ketukan kekunci (dengan katak. CheckKeys () kaedah), dan katakan lalat untuk menggunting (dengan kaedah.


Lukiskan sprite.
Sebaik sahaja anda telah mengendalikan semua yang menyebabkan sprites berubah, lukiskan sprite pada skrin. Lukiskan setiap sprite dengan menggunakan kaedah kemas kini (). Sprites ditarik mengikut susunan, jadi apa-apa yang anda ingin ada di latar belakang harus ditarik sebelum item yang akan dipamerkan di depan. (Katak akan muncul di atas latar belakang, jadi katak perlu diambil selepas latar belakang pada setiap kemas kini skrin.)