Video: Web Apps of the Future with React by Neel Mehta 2025
Aika aikoo käyttää objektteja useita kertoja HTML5-peleissasi ja he jäävät noin samaan. Joten on järkevää laittaa ne kirjastoon helppoa uudelleenkäyttöä varten. Juuri sitä aiot tehdä. Katsokaa frogLibia. js:
// frogLib. js // Sammakko-pelin objektit Fly () {tFly = uusi Sprite (kohtaus, "fly. png", 20, 20); tFly. setSpeed (10); tFly. wriggle = funktio () {// muuttaa suunta jonkin satunnaisen määrän mukaan newDir = (matemaattinen satunnainen () * 90) - 45; Tämä. muutosAngleBy (newDir);} // end wriggle palaa tFly;} // loppu Fly function Frog () {tFrog = uusi Sprite (kohtaus, "sammakko.png", 50, 50); tFrog. maxSpeed = 10; tFrog. minSpeed = -3; tFrog. setSpeed (0); tFrog. setAngle (0); tFrog. checkKeys = function () {if (keysDown [K_LEFT]) {tämä. muutosAngleBy (-5);} // loppu jos jos (keysDown [K_RIGHT]) {tämä. muutosAngleBy (5);} // loppu jos jos (keysDown [K_UP]) {tämä. changeSpeedBy (1); jos (tämä nopeus> tämä maxSpeed) {tämä. setSpeed (tämä max. nopeus);} // loppu if} // loppu jos if (keysDown [K_DOWN]) {tämä. changeSpeedBy (-1); jos (tämä nopeus
Tämä on mielenkiintoinen dokumentti. Se ei sisällä muuta kuin kahden luokan määritelmää. Sitä käytetään, koska useat muut ohjelmat käyttävät näitä kahta luokkaa.
Kirjaston käyttäminen on yksinkertaisuutta. Tässä on sammakko. html-tiedosto, joka asettaa nämä kaksi elementtiä yhteen peliin:
frogFly. html src = "frogLib. js"> var-kohtaus; var sammakko; var lentää; Var-lehdet; funktio init () {kohtaus = uusi kohtaus (); näkymä. setBG ("vihreiden"); sammakko = uusi sammakko (); fly = uusi Fly (); lehdet = uusi Sprite (kohtaus, "lehdet.png", 640, 480); lähtee. setSpeed (0); näkymä. start ();} // lopeta init-toiminnon päivitys () {kohtaus. asia selvä(); sammakko. checkKeys (); lentää. kiemurrella(); lähtee. päivittää(); sammakko. päivittää(); lentää. päivitys ();} // loppupäivitys ();
Tämä ohjelma ei tuo paljon uutta. Se yksinkertaisesti toteuttaa kirjastossa määritellyt elementit näiden vaiheiden mukaisesti:
-
Tuo froglib. js kirjasto.
FrogLib-tiedosto on yksinkertaisesti JavaScript-tiedosto. Tuo se samalla tavalla kuin yksinkertaisen pelin tuonti. js-tiedosto, erillisellä tagilla.
-
Luo sprites.
Lehdet sprite on vain tavallinen sprite. Rakenna sammakko ja lentää aivan kuten aiemmin, vaikka ne on määritelty toisessa tiedostossa. (Jos sammakkoa tai lentää ei luoda, varmista, että olet tuonut kirjaston oikein.)
-
Hallitse muutosta.
Päivitys () -toiminto ottaa vastuun pelin hallinnasta. Tässä voit hallita kaikkia Sprite-käyttäytymismalleja: Kerro sammolle, että etsitään näppäinpainikkeita (sammakon kanssa. CheckKeys () -menetelmällä) ja kerro lentää ryhtymään (lentää. Wriggle () -menetelmällä).
-
Piirrä spritit.
Kun olet käsitellyt kaikkea, joka aiheutti spritsien muuttamisen, piirrä sprites näytöllä. Piirrä jokainen sprite kutsumalla sen update () -menetelmää. Spriteet piirretään järjestykseen, joten taustalle haluamasi taipuisuus on tehtävä ennen kohteita, jotka näkyvät edessä. (Sammakko näkyy taustalla, joten sammakko on piirrettävä jokaisen näytön päivityksen taustan jälkeen.)
