, javascript animation, der fungerer (del 3 af 4),,,,, 65,,,,,,,, 23,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss., i det første indlæg i denne serie, vi har indført, spriting, og hvordan den kan bruges til at gøre det nemt og effektivt kan krydse browser informationstiltag på nettet.i den anden post, vi har nogle enkle animeringer op, selv om de havde en hel del insekter og koden var ikke klar til at bo.,,, i dag skal vi håndtere disse insekter og rydde op i vores kode, så vi kan offentliggøre det på en side, uden frygt for at smadre en kode ved anvendelse af en metode, indkapsling,., variabel rækkevidde, at forklare, hvad der var galt med koden i vores sidste skridt, og hvorfor indkapsling er vigtigt, skal vi først forklare variabel rækkevidde., forestil dig, at du arbejder med kode nedenfor.du har en nyttig variabel i deres funktion, do_this(),, og du vil gerne benytte samme variabel i en anden funktion, do_that(),, men du løb ind i et lille problem. do_this() funktion (var - very_helpful_variable = 20...//det viser "20", som du forventer indberetning (very_helpful_variable)} funktion do_that() {indberetning (very_helpful_variable); //, men det viser "usynlig"!}, din variable virker fint i den funktion, der blev erklæret, men uden for denne funktion, er det som om, det aldrig har eksisteret.det er fordi, do_that(), er ikke inden for rækkevidde af den variable,, very_helpful_variable,., variabler kun er til rådighed i blok af kode, hvor de er erklæret, at det er deres anvendelsesområde.Once that block of code is finished running, its variables are erased., Take a look at these examples:, var w = 1; function a(){ var x = 2; function b(){ var y = 3; alert(w); //works alert(x); //works alert(y); //works alert(z); //undefined } alert(w); //works alert(x); //works alert(y); //undefined alert(z); //undefined } function c(){ var z = 4; alert(w); //works alert(x); //undefined alert(y); //undefined alert(z); //works b(); //undefined } alert(w); //works alert(x); //undefined alert(y); //undefined alert(z); //undefined, First we have the variable ,w,, which is declared outside of any functions. det er en global variable, og det vil arbejde overalt, fordi dens anvendelsesområde er hele dokumentet. næste er variabel, x, eftersom det er angivet i den funktion, a(), vil det kun arbejde i denne funktion.dette omfatter også i funktion, b(), da, b(), er inde i, a(),. imidlertid en variabel defineret i, b(), (som, y) vil ikke arbejde i den ydre funktion, eftersom det er uden for rækkevidde. du kan også mærke, at vi forsøgte uden held at ring til den funktion, b() inde fra den funktion, kom,; funktion navne efter de samme regler som andre variabler. et andet tilfælde med javascript, hvis vi starter med en variabel i en funktion, uden at erklære det med nøgleordet, var, så de browser vil antage, at det variable bør være global.så, hvis du ikke være sikker på, at du altid erklære din variabler med, var, nøgleord, du ender op med globale variabler og ikke er klar over det!så, kort sagt: når vi erklærer en variabel, kan vi bruge den i denne blok af kode eller i enhver indlejrede blokke i den.hvis vi forsøger at bruge den uden for anvendelsesområdet, værdi er sat til, udefineret,., det er derfor, at vi i vores sidste post, sætter vi, jas, variable uden for de funktioner, der brugte den, da vi havde brug for at tage det variable efter funktioner var slut., var timeren; //denne er en global variable funktion run_right (fase, venstre) {...timer = settimeout (function() {run_right (2, venstre)} 200).} funktion stop_running() {nummer. getelementbyid (')'). style.backgroundposition = "0px 0px"; //hvis timer ikke var fastsat som globale, kunne vi ikke stoppe det her cleartimeout (timer)) for at klare de timer, vi har brug for, stop_running(), være inden for anvendelsesområdet for variablen. jas,.så gjorde vi, timer, en global variabel, der kan anvendes overalt, hvad er der galt med det?problemet med den globale variabler, i et givet område, det er umuligt at have to poster, der hedder det samme.hvis du var at forsøge at have to forskellige variabler med samme navn, - vil bare skrive på et af dem.så, hvis vi havde en variabel, der hedder jas, og havde en særskilt variabel, også kaldet, timer, der blev indkaldt i samme omfang, og en af dem vil slette og træde i stedet for de andre, og vi ville have kaos på vores kodeks.hvis vi havde en global variabel, kaldet, timer, så det ville vanskeliggøre enhver anden variabel, der hedder jas, der findes overalt i side - herunder enhver og alle, der er knyttet javascript biblioteker og eksterne filer. det er en stor kilde til hovedpine, du lige har set en rigtig pæn javascript laver et eller andet sted, og download det på din hjemmeside, og pludselig er alle dine andre plug - ins styrtet...en af plug - ins var sjusket med globale variabler, der har samme navn med noget andet, din browser snubler over sig selv, og en hel side kommer til at stå, hvad endnu værre er det, at du vil aldrig lægge mærke til dette problem, da de første test koden.ligesom vores informationskampagne kode fra den sidste post, det vil virke godt af sig selv.men, flere stykker du tilføje er, desto mere sandsynligt er det, at chancer for at få en konflikt, og du vil blive fanget sortering gennem et dusin forskellige javascript filer og prøver at finde ud af, hvilke to ikke kan enes, nu må du spørge dig selv, "global variabler er så belejligt.hvad hvis jeg bare se min kode meget nøje og sikre, at jeg ikke har nogen konflikter? "at kunne arbejde i en perfekt verden, men i virkeligheden er det ofte vil have flere folk, der arbejder på forskellige dele af samme side, eller er nødt til at komme tilbage og ajourføring af forskellige dele af din kode år senere, eller også har kode fra tredjemand på din side, som vil være ude af din kontrol (som betalte reklamer). så, kort sagt, ville du ikke have globale variabler, mere end du vil have udsat kabler langs væggene i dit hus eller udsat for maskiner i din bil, det er bare et spørgsmål om tid, før der sker noget, som hele den virker.heldigvis er der en bedre måde, så man undgår disse faldgruber., indkapsling, vi kan have alle fordelene ved global variabler uden problemer ved anvendelse af en metode, der hedder, indkapsling,.tænk på det som du bygger en mur rundt om din kode med kun et par særlige døre, intet kan komme ind eller ud af den kode, medmindre man udtrykkeligt tillader det. javascript har en form for variabel kaldte en genstanden.objekter er brugerdefinerede samlinger af data, der indeholder oplysninger og funktioner (benævnt, egenskaber og - metoder, henholdsvis).vi skai skrive en funktion, der skaber en særlig genstand, der har alle de funktioner, vi har brug for "bagte" ind i det, og det vil også give os mulighed for at have mere end én robot uden at kopiere vores kodeks.vi starter med at definere en ny funktion med en variabel.vi er nødt til at passere den variable et par argumenter, vil jeg give det en html element, som vi vil være inspirerende, plus nogle enestående værdier for hastighed og springe højde, så vi kan variere fra robot, robot., var robotmaker = funktion (robot, run_speed, jump_height) (//sætter vi alle vores funktioner og variabler i dette område.////////- det er inde i vores "uigennemtrængeligt wall, så intet i denne //område vil komme i konflikt med andre koder.afkast (//ind her, vi sætter alle vores døre...//disse er den eneste måde, alt kan få //ind eller ud af denne kodeks.//////////////, og eftersom det er stadig inden for den samme "anvendelsesområde" //som robotmaker, vi har brug for alle variabler, nævnt ovenfor.}}, eftersom vi skal lægge alle vores funktioner inden for vores nye "muren", nu ville være et godt tidspunkt at gennemgå, hvad der generer, vi havde med den oprindelige kode.du kan se, at i aktion her), som de kan se, at hvis vi klik to løb knapper (eller løbe og springe knap) uden at trykke på knappen, stop, i mellem, j, vil fortsætte med at gøre begge aktioner.et andet problem er, at uanset hvilken retning j står over for, når vi klik, hop, eller med knap, han ser ret hver gang.endelig, hvis du klikker, hop, knap igen, mens j er faldende, fra første gang, han vil fortsætte med at falde igennem side i et uendeligt loop. med henblik på at løse disse problemer har vi brug for at være mere konkret om, hvad vi ønsker, der skal ske med hver af vore funktioner:,, når vi klik løb lige:,,, hvis jeg hopper, gør intet, og fortsætte den hoppe, hvis j løber til venstre, stop ham løbe tilbage, løb til højre og animere til den rette ramme, hvis jeg når slutningen af scenen, hold op med at løbe og står over for, når vi løber til venstre, klik på:,,, hvis j hopper, gør intet, og fortsætte den hoppe, hvis j løber lige, stop ham, løb, løb til venstre og animere til den rette ramme, hvis jeg når slutningen af scenen, hold op med at løbe og ståmod venstre, når vi klik løber:,,, hvis jeg hopper, gør intet, og fortsætte den hopper (vi vil ikke stoppe i luften!hvis løber højre eller venstre, hold op med at løbe, hvis i lige, står over for.hvis mod venstre, står over for, når vi klik spring:,,, hvis jeg hopper, gør intet, og fortsætte den hopper vi ikke vil springe i luften!hvis j løber højre eller venstre, hold op med at løbe, hoppe.hvis j står på spring for ret.hvis mod venstre, spring mod venstre, land i samme retning som hopper, først og fremmest vil vi tilføje nogle flere variabler.da uret opfører sig anderledes for at løbe og springe, vil vi have to særskilte svindlere.vi ønsker også at indføre en boolean, (sandt /falsk) variabel til at spore, hvis vi skal være mod venstre eller højre, og vi vil gøre et skridt, variable, bare for at redde os fra at type det fulde element navn. //i robotmaker funktion.var trin = dokument. getelementbyid ('stage) var run_timer, jump_timer, var face_right = sandt, så vi er nødt til at tilføje tilbage i vores funktioner for løb, løb til venstre, og hopper.de vil være den samme, med visse forskelle.for det første, at alle henvisninger til det element, som vi er inspirerende kan erstattes med variabel, robot, som vil blive vedtaget som et af de argumenter, robotmaker, funktion).det andet er, at vi har lavet nogle mindre ændringer af kørehastighed og springer højde i de funktioner, så vi kan ændre disse ved at vedtage forskellige værdier.det tredje er, at vi bruger den, face_right, variabel til at spore, hvor j står over for (og i at fungere ved hjælp af, face_right, at beslutte, hvilke hoppende sprite viser).endelig er vi ved hjælp af særskilte timere til drift og hoppede. //i robotmaker funktion.funktion run_r (fase, venstre) (face_right = sandt. hvis ((venstre (+ 15% run_speed) < (stage.offsetwidth - robot. offsetwidth)) (venstre = venstre (+ 15% run_speed); robot.style.left = venstre + "varer" skift (fase) (sag nr. 1: robot.style.backgroundposition = "- 40px 0px" run_timer = settimeout (function() {run_r (2, venstre)} 200); pause, sag 2: robot.style.backgroundposition = "- 80px 0px" run_timer = settimeout (function() {run_r (3, venstre)} 200); bryde; sag 3: robot.style.backgroundposition = "- 120px 0px" run_timer = settimeout (function() {run_r (4, venstre)} 200); pause, sag 4: robot.style.backgroundposition = "-80px 0px "run_timer = settimeout (function() {run_r, stk. 1, venstre)} 200); pauser) andet (robot.style.backgroundposition =" 0px 0px "}} funktion run_l (fase, venstre) (face_right = falske; hvis (0 < robot.offsetleft - (15 * run_speed)) (venstre = venstre - (15 * run_speed); robot.style.left = venstre +" varer "skift (fase) (sag nr. 1: robot.style.backgroundposition =" - 40px - 50px "run_timer = settimeout (function() {run_l (2, venstre)} 200); pause, sag 2: robot.style.backgroundposition =" - 80px - 50px "run_timer = settimeout (function() {run_l (3, venstre)} 200); bryde; sag 3: robot.style.backgroundposition =" -120px - 50px "run_timer = settimeout (function() {run_l (4, venstre)} 200); pause, sag 4: robot.style.backgroundposition =" - 80px - 50px "run_timer = settimeout (function() {run_l, stk. 1, venstre)} 200); pauser) andet (robot.style.backgroundposition =" 0px - 50px "}} funktion jmp (øverst) (hvis (face_right) (robot.style.backgroundposition =" - 160px 0px "} andre (robot.style.backgroundposition =" - 160px - 50px "} hvis (& & (robot.offsettop > (20% (1 /jump_height)))) (top = top - (- *. 1); robot.style.top = top +" varer "jump_timer = settimeout (function() {jmp (øverst)}, 60);} andre, hvis (op) (i = falske jump_timer= settimeout (function() {jmp (øverst)}, 60);} andre, hvis (!op & & (robot.offsettop < 115)) (top = top + (- *. 1); robot.style.top = top + "varer" jump_timer = settimeout (function() {jmp (øverst)}, 60);} andre (robot.style.top = "120px"; hvis (face_right) (robot.style.backgroundposition = "0px 0px"} andre (robot.style.backgroundposition = "0px - 50px"} jump_timer = falske}}, alle disse variabler og funktioner er inde i vores "muren", så nu er vi nødt til at lave "døre" at være i stand til at få adgang til, hvad vi har brug for.disse fire "døre" vil blive genstand, metoder, for de samme fire opgaver, vi havde tidligere, og henviser til de beskyttede funktioner ovenfor.vi vil også gennemføre vores insekt fastsættelse af kontrol i hver enkelt funktion, hvis de, jump_timer kommer, og at sikre, at klare det, run_timer,.kan du huske, disse to timers er omfang overalt inden for, robotmaker(), funktion, så vi kan bruge dem her.men da de ikke er global variabler, vil vi ikke løber ind i problemer med dem andetsteds. //i robotmaker funktion.afkast (run_right: function() (hvis (!jump_timer