, html5 avoider spil tutor: flere flytter fjender,,,,, 2,,,,,,,,, 3,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss., i første del af denne serie, du lærte det grundlæggende ved hjælp af javascript og, lærred, element til at gøre en meget enkel html5 avoider spil.men det er for enkel - den eneste fjende er ikke engang - - er der ingen udfordring.i denne forelæsning, vil du lære at skabe en uendelig strøm af fjender, falder fra toppen af skærmen.,,, 3, i første del af den pædagogiske vi dækkede mange begreber: tegner billeder på skærmen, samspil mellem html og javascript, påvisning af mus aktioner, og hvis erklæring.du kan downloade kilde filer her, hvis du ønsker at dykke i denne del af resten, men jeg anbefaler, at man læser alle dele i orden. vi er html side indeholder et lærred element, som udløser en javascript funktion, drawavatar(), når det er trykket.denne funktion er inde i en separat fil, main. js, og det gør to ting:,, trækker en kopi af, avatar.png, til gulvet., opstiller en begivenhed til at lytte, at ringe til en anden funktion, som kaldes, redrawavatar(), når musen bevæger sig over lærredet.,,, redrawavatar(), funktion er også indenfor, main. js, og i modsætning til, drawavatar(), accepterer en parameter, - - ringede, mouseevent, som automatisk er gået til det tilfælde til at lytte.det, mouseevent, indeholder oplysninger om den mus holdning.denne funktion er fire ting:,, godkender lærred. bruger en kopi af avatar.png, at gulvet på mus holdning. bruger en kopi af, enemy.png, til gulvet, til en bestemt holdning, at kontrollere, om avataren og fjende er tilstrækkeligt tæt på hinanden til overlapning, og viser en, alert(), hvis så. klar?hvis ikke, så prøv den varme udfordring.,, varm udfordring, hvis det er længe siden, du har læst den første del af den serie (eller hvis du bare vil kontrollere, at du forstår, hvad der foregår, skal disse lidt øvelser.de er helt valgfrit og særskilt til den faktiske forelæsning, så anbefaler jeg, arbejder på en kopi af dit projekt snarere end den oprindelige.du kan udfylde alle disse øvelser bruger kun oplysninger fra den første del af den serie. rolig, huske på, at drawimage(), virker som en kartoffel stempel.brug den til at skabe en ubrudt ring af fjender på kanten af lærred, som denne:,,, hvis du keder dig af kopiering og fastklæbning alle de udtalelser, de er fri til at gøre det til en mindre ring. - du kunne resize lærredet, også, hvis du vil.), medium, "du ramte fjenden" alarm anføres, når avatar rammer kanten af ringen.(til at afprøve den, husker du, at du kan slå ind på at afskedige den indberetning, du behøver ikke at klik okay.), svært, at indberetning vil komme, når du prøver at flytte din mus uden for lærred til inde i det, der er virkelig irriterende, hvis du allerede har slået i gulvet.gør det muligt at bevæge sig ind på gulvet uden at udløse alarmen - - men indenfor, gøre indberetningen anføres, når avatar rører ringen af fjender,.,, fjenden komme, vi kommer til at gøre fjenden falder ned fra toppen af skærmen.for nu skal vi fokusere på at gøre det i stedet for at påvise en kollision, så "kommentarer" de linjer, redrawenemy(), der beskæftiger sig med sammenstød, som så: //hvis (mouseevent.offsetx > 220 & & mouseevent.offsetx < 280 & & mouseevent.offsety > 117 & & mouseevent.offsety < 180) (//- indberetningen ("du slog fjenden!"); //}, husk: to frem her fortælle browser "ignorer alt på denne linje fra her på".tidligere plejede vi at skabe, bemærkninger, - - lidt påmindelser om, hvad visse dele af koden, - - men her bruger vi det til et andet formål: at stoppe visse dele af koden i at løbe uden helt at afskaffe dem.det gør det let for os at sætte kode tilbage senere. i øjeblikket, fjenden er tegnet i samme situation, når vi flytter de mus:, gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, 150), kan du huske, random(), matematik. funktion af den første del af tutor?det returnerer et tilfældigt tal mellem nul og en multiplikation af 300 (højden af lærred) vil give os et nummer mellem 0 og 300.hvad sker der, hvis vi trækker fjenden på et tilfældigt y-position mellem 0 og 300 hver gang mus var flyttet?- lad os prøve den, ændre den linje, som så:, gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, matematik. random() * 300), prøv det her.det ser ud, som om de fjendtlige bevæger sig tilfældigt op og ned af en bestemt strækning, men kun når musen er flyttet.det er selvfølgelig ikke, faktisk, bevæger sig. det er "teleporerer" fra en stilling til den næste, men det giver os illusionen om bevægelighed. vi ville få en bedre illusion, hvis det flyttede kun i én retning.det kan vi opnå ved at sikre, at fjenden er y-position kun stiger, og aldrig falder. overveje følgende kode:, funktion redrawavatar (mouseevent) (var - gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(), var enemyimage = nye image(), var enemyy = 0, avatarimage.src img = "/avatar. men heller ikke dér er menneskene sikre" enemyimage.src = "img /fjende. men heller ikke dér er menneskene sikre" gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, mouseevent.offsetx, mouseevent. offsety); enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv. gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy); //hvis (mouseevent.offsetx > 220 & & mouseevent.offsetx < 280 & & mouseevent.offsety > 117 &.; & mouseevent.offsety < 180) (//- indberetningen ("du slog fjenden!"); //), se, hvad jeg laver?jeg satte værdien af, enemyy, til 0, på toppen af den funktion, steg den med en pixel, før udarbejdelsen af fjenden.på denne måde, jeg sigter til at gøre fjenden er y-position stige med en pixel, hver gang, redrawavatar(), er at løbe. imidlertid er der en fejl i min logik.den linje, var enemyy = 0, vil nulstille, enemyy, variable, 0, hver gang, redrawavatar(), løb, hvilket betyder, at det altid vil være udarbejdet på en y-position, 1, fordi det vil være øget på linje 12). vi skal blot det, 0 en gang.hvad hvis vi gør det, drawenemy(),?trods alt, at funktion er kun løb:, funktion drawavatar() {var gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(), var enemyy = 0, avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" gamecanvas. getcontext ("d"). drawimage (avatarimage, matematik. random() * 100, matematik. random() * 100); gamecanvas. addeventlistener ("mousemove", redrawavatar)} funktion redrawavatar (mouseevent) (var - gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(), var enemyimage = nye image(); avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" enemyimage.src = "img /fjende. men heller ikke dér er menneskene sikre" gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, mouseevent.offsetx, mouseevent. offsety); enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv. gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy); //hvis (mouseevent.offsetx > 220 & & mouseevent.offsetx < 280 & & mouseevent.offsety > 117 &.; & mouseevent.offsety < 180) (//- indberetningen ("du slog fjenden!"); //}}, prøv det her.desværre, at den overhovedet ikke virker.problemet ligger i et koncept kaldet, anvendelsesområde.hvis du bruger den, var, at definere en variabel nøgleord i funktion, så de variable kun vil være tilgængelige inden for denne funktion.det betyder, at vores, redrawavatar(), funktion, ikke kan få adgang til de samme, enemyy, variabel, der blev defineret i drawavatar(),., men hvis vi definerer en variabel uden for alle funktioner, der kan læses af en af dem!så prøv det her:, var enemyy = 0, funktion drawavatar() {var gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(); avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" gamecanvas. getcontext ("d"). drawimage (avatarimage, matematik. random() * 100 random() matematik. * 100); gamecanvas. addeventlistener ("mousemove", redrawavatar)} funktion redrawavatar (mouseevent) (var - gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(), var enemyimage = nye image(); avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" enemyimage.src = "img /fjende. men heller ikke dér er menneskene sikre" gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, mouseevent.offsetx, mouseevent. offsety); enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv. gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy); //hvis (mouseevent.offsetx > 220 & & mouseevent.offsetx < 280 & & mouseevent.offsety > 117 &.; & mouseevent.offsety < 180) (//- indberetningen ("du slog fjenden!"); //}}, prøv det her.det virker - fjenden glider ned på skærmen.men det gør kun, mens vi bevæger os mus.det er en interessant leg mekaniker, men det er ikke det, jeg håbede på, gør fjenden komme alene, ville det være meget bedre, hvis fjenden syntes at bevæge sig på egen hånd - det bevæger sig, uanset om de spiller bevæger sig i mus.vi kan gøre det ved at udløse sin bevægelse ("teleportations"), der er baseret på en gang, snarere end på mus bevægelighed. vi kan gøre dette ved at bruge den, setinterval(), funktion.det fungerer sådan her: setinterval (functionname, periode), functionname, er navnet på en funktion, vi vil løbe igen og igen, og periode, er den tid (i millisekunder) vi vil passere mellem hver enkelt indkaldelse til at fungere. lad os se, hvordan det ser ud:, var enemyy = 0, funktion drawavatar() {var gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(); avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" gamecanvas. getcontext ("d"). drawimage (avatarimage, matematik. random() * 100, matematik. random() * 100); gamecanvas. addeventlistener ("mousemove", redrawavatar); setinterval (redrawenemy, 1000)} funktion redrawavatar (mouseevent) (var - gamecanvas = dokument. getelementbyid ("gamecanvas") var:billede = nye image(); avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, mouseevent.offsetx, mouseevent. offsety); //hvis (mouseevent.offsetx > 220 & & mouseevent.offsetx < 280 & & mouseevent.offsety > 117 & & mouseevent.offsety < 180) (//- indberetningen ("du slog fjenden!"); //}} funktion redrawenemy() {var enemyimage = nye image(); enemyimage.src = "img /fjende. men heller ikke dér er menneskene sikre" enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv. gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy)}, jeg har flyttet den kode, der beskæftiger sig med at flytte, og at fjenden til nye, redrawenemy(), funktion, og jeg har sat det kaldes hver 1000 millisekunder (hver anden) ved hjælp af en, setinterval(), ringe, drawavatar(),.(i modsætning til ved hjælp af en begivenhed til at lytte, ikke automatisk kommer til at redrawenemy() parametre, når vi kalder det fra, setinterval().), prøv det her.klik på gulvet, så rør dig ikke, din mus, er der et par ting galt med dette:,, fjenden efterlader et spor - det er, fordi de ikke er godkendt i redrawenemy() lærred,,., fjenden går meget langsomt - måske 1000 millisekunder er for længe at vente, når det er din avatar. flyttede, fjenden forsvinder - det er, fordi fjenden er kun brugt i redrawenemy(),,, redrawavatar(), lærred er renset og avataren er tegnet, men ikke fjenden.,, lad os ordne det på et tidspunkt.først skal vi klare det lærred, redrawenemy():, funktion redrawenemy() {var enemyimage = nye image(); enemyimage.src = "img /fjende. men heller ikke dér er menneskene sikre" gamecanvas.width = 400; //det sletter indholdet af lærred enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv. gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy)}, prøv det her.- nu, avatar forsvinder, når fjenden er udarbejdet, og omvendt.selvfølgelig, det giver mening. vi klart lærredet i begge, redrawenemy(), og redrawavatar(), men aldrig henlede både fjender og avataren på samme tid. hvad hvis vi flyttede, fjenden, redrawenemy(), - ved at øge værdien af, enemyy, - men faktisk, drew, det i redrawavatar(),?, var enemyy = 0, funktion drawavatar() {var gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(); avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" gamecanvas. getcontext ("d"). drawimage (avatarimage, matematik. random() * 100, matematik. random() * 100); gamecanvas. addeventlistener ("mousemove", redrawavatar); setinterval (redrawenemy, 1000)} funktion redrawavatar (mouseevent) (var - gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(), var enemyimage = nye image(); enemyimage.src = "img /fjende. men heller ikke dér er menneskene sikre" avatarimage.src = "img /avatar.. men heller ikke dér er menneskene sikre" gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, mouseevent.offsetx, mouseevent. offsety); gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy); //hvis (mouseevent.offsetx > 220 & & mouseevent.offsetx < 280 & & mouseevent.offsety > 117 & & mouseevent.offsety <: 180) (//- indberetningen ("du slog fjenden!"); //}} funktion redrawenemy() {enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv.), prøv det her.det virker, men vi er tilbage til det problem, hvor de fjendtlige bevæger sig kun, når du flytter den mus.men denne gang, er det lidt anderledes; for at gøre det mere klart, at vi kan øge fjendens hastighed ved at reducere, periode.sæt den til 25 (det er 1 /40 af en anden, hvilket betyder, at redrawenemy(), løber 40 gange pr. sekund):, setinterval (redrawenemy, 25), prøv det her.og sammenligner det med den tidligere udgave, hvor fjenden flyttede kun når musen bevægede sig.kan du se forskellen?i den nye, fjenden er holdning ændrer sig hele tiden, men det er så "bag kulisserne"; den faktiske, billede af fjenden kun bevæger sig, når musen er flyttet.hvis du venter et øjeblik, eller før de flytter mus, fjende billede springer ned af skærmen for at indhente sine faktiske position. mellem fjendens, nuværende holdning fra fjendens, image, holdning, som denne kommer til at lad os løse vores problem, før vi går videre, er du forvirret af den funktion, de navne?jeg er., redrawenemy(), ikke faktisk får fjenden til alle.lad os kalde dem til noget, der er lidt lettere at holde styr på, drawavatar(), løb, når vi starter spillet, og det er det hele, så lad os kalde det, setupgame(),, redrawavatar(), skal gennemføres, når den mus bevæger sig, så lad os kalde det, handlemousemovement() redrawenemy(),,, hver del af en anden, og det er, som om der er et ur der tikker 40 gange en anden, og hvert kryds udløser funktion.så, lad os kalde det, handletick(), glem ikke, du er nødt til at omdøbe alle henvisninger til funktioner, som i tilfælde til at lytte og, setinterval(),.her er, hvad det kommer til at ligne:,, var enemyy = 0, funktion setupgame() {var gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(); avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" gamecanvas. getcontext ("d"). drawimage (avatarimage, matematik. random() * 100 matematik. random() * 100); gamecanvas. addeventlistener ("mousemove", handlemousemovement); setinterval (handletick, 25)} funktion handlemousemovement (mouseevent) (var - gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(), var enemyimage = nye image(); enemyimage.src = "img /fjende. men heller ikke dér er menneskene sikre" avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d").rawimage (avatarimage, mouseevent.offsetx, mouseevent. offsety); gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy); //hvis (mouseevent.offsetx > 220 & & mouseevent.offsetx < 280 & & mouseevent.offsety > 117 & og amp; mouseevent.offsety < 180) (//- indberetningen ("du slog fjenden!"); //}} funktion handletick() {enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv.), vil du også nødt til at ændre html side, således at det lærred, onclick, attribut, "setupgame();" snarere end "drawavatar();", mener jeg, at det gør det lettere at se, hvad der foregår.:,, når musen bevæger sig, bevæger vi os avataren holdning, henlede avataren i sin nuværende position, og trækker fjenden i sin nuværende position, når uret tæller, vi rykker fjendens position. vi er nødt til at gøre fjenden og avataren på samme tidspunkt (dvs. i samme funktion). hvis vi kun tager den fjende, når musen bevæger sig, så fjendens bevægelser ikke er glat.,, det gør det lettere for tur til at se en løsning:,, når musen bevægelser, avatar holdning. når uret tæller, flyt den enemin holdning er, at henlede avataren i sin nuværende position, og trækker fjenden i sin nuværende position,.,, lad os gennemføre det.det eneste vi skal gøre er at flytte den tegning kode fra handlemousemovement(), til handletick(), ikke?sådan, var enemyy = 0, funktion setupgame() {var gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(); avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" gamecanvas. getcontext ("d"). drawimage (avatarimage, matematik. random() * 100, matematik. random() * 100); gamecanvas. addeventlistener ("mousemove", handlemousemovement); setinterval (handletick, 25)} funktion handlemousemovement (mouseevent) (//hvis (mouseevent.offsetx > 220 & & mouseevent.offsetx < 280 & & mouseevent.offsety > 117 & &. mouseevent.offsety < 180) (//- indberetningen ("du slog fjenden!"); //}} funktion handletick() {var avatarimage = nye image(), var enemyimage = nye image(); enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv. enemyimage.src = "img /fjende. men heller ikke dér er menneskene sikre" avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, mouseevent.offsetx, offsety mouseevent.); gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy)}, det er ikke rigtigt.vi har intet tilbage i handlemousemovement(),.- men det er fordi, vi har ikke adskilt avataren image holdning fra avataren er faktiske position, som vi gjorde med fjenden.så lad os gøre det:, var enemyy = 0, var avatarx = 0, var avatary = 0, funktion setupgame() {var gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(); avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" gamecanvas. getcontext ("d"). drawimage (avatarimage, matematik. random() * 100, matematik. random() * 100); gamecanvas. addeventlistener ("mousemove", handlemousemovement); setinterval (handletick, 25)} funktion handlemousemovement (mouseevent) (avatarx = mouseevent.offsetx; avatary = mouseevent.offsety; //hvis (mouseevent.offsetx > 220 & & mouseevent.offsetx < 280 & & mouseevent.offsety > 117 & & mouseevent.offsety < 180) (//- indberetningen ("du slog fjenden!"); //}} funktion handletick() {var gamecanvas = dokument. getelementbyid ("gamecanvas"), var avatarimage = nye image(), var enemyimage = nye image(); enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv. enemyimage.src = "img /fjende. men heller ikke dér er menneskene sikre" avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, avatarx, avatary); gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy)}, er vi nødt til at skabe nye variabler, opbevarer avataren er faktiske x - og y-positions, og definere de variabler, uden for enhver funktion, således at vi kan få adgang til dem fra alle steder. prøv det her!det virker!(hvis det er lidt tørret kød, så prøv at lukke et øje eller genoptagelse af krom, der arbejdede for mig. vi har nu en bevægende fjende.tog et stykke tid, men den konkrete kode vi endte op med ikke er for kompliceret, og jeg håber, at de vil være enig i. hvis du vil have udfordring, forsøge at genindføre kollisionen påvisning alarm kasse.må ikke bekymre dig, hvis du har problemer, og vi vil gå igennem dette igen lidt senere. i mellemtiden ser vi på et problem, du har nok ikke mødt endnu...,, at indlæse billederne fra en server, som jeg nævnte i den første del af denne serie, hvis du sætter dit spil på en web - server, som det er nu, vil det ikke virke korrekt, selv om de arbejder fint da, at flygte fra din computer.mine folk arbejde, fordi jeg har lavet en lille ændring af kodeksen, her er hvordan det går uden at kode:, prøv det her. hvad sker der?tja, det har noget at gøre med de billeder.hver gang det ur tikker, skaber vi et nyt image og en kilde til punkt til et virkeligt billede fil.dette giver ikke anledning til problemer, når det image, filen er på din harddisk, men når det er på internettet, side kunne forsøge at downloade det billede, at det fører til de flimrende, som vi kan se i den demo. måske kan de allerede tror på en løsning, der er baseret på, hvad vi har gjort i denne lektion så langt.ligesom med fjenden og avatar er holdninger, kan vi flytte fjendens og avatar er billeder uden for de funktioner og genbrug dem igen og igen, uden at definere og fastsætte deres værdier i det, handletick(), funktion, hver gang. se:, var enemyy = 0, var. avatarx = 0, var avatary = 0, var avatarimage, var enemyimage; funktion setupgame() {var gamecanvas = dokument. getelementbyid ("gamecanvas"); avatarimage = nye image(); enemyimage = nye image(); enemyimage.src = "img /fjende. men heller ikke dér er menneskene sikre" avatarimage.src = "img /avatar. men heller ikke dér er menneskene sikre" gamecanvas. getcontext ("d"). drawimage (avatarimage, matematik. random() * 100, matematik. random() * 100); gamecanvas. addeventlistener ("mousemove", handlemousemovement); setinterval (handletick, 25)} funktion handlemousemovement (mouseevent) (avatarx = mouseevent.offsetx; avatary = mouseevent.offsety; //hvis (mouseevent.offsetx > 220 & & mouseevent.offsetx < 280 & & mouseevent.offsety > 117 & & mouseevent.offsety < 180) (////////- indberetningen ("du slog fjenden!"); //}} funktion handletick() {var gamecanvas = dokument. getelementbyid ("gamecanvas"); enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv. gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, avatarx, avatary); gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy)} prøv det her. - ingen flimrende!i tilfælde af, at du tænker: vi kunne have flyttet linjer. uden for funktioner.jeg valgte at sætte dem i setupgame(), simpelthen fordi de syntes at være mere om, at kampen.,, en fjende, det er faktisk ret nemt at lave en fjende anføres på skærmen.husk, at billeder som kartoffel frimærker; det betyder, at der er intet, der hindrer os i at fjende billede på gulvet i to forskellige steder inden for samme tik:, funktion handletick() {var gamecanvas = dokument. getelementbyid ("gamecanvas"); enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv. gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, avatarx, avatary); gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy); gamecanvas. getcontext ("d"). drawimage (enemyimage, 100, enemyy)},,, klik for at prøve det.simpelt!du kan lægge dem i forskellige højder, som så:, funktion handletick() {var gamecanvas = dokument. getelementbyid ("gamecanvas"); enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv. gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, avatarx, avatary); gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy); gamecanvas. getcontext ("d"). drawimage (enemyimage, 100, enemyy - 50)},,, klik for at prøve det.her er lidt rodet, men.i stedet for bare at skabe et, enemyy2, variable?, var enemyy = 0, var enemyy2 = - 50, var avatarx = 0, var avatary = 0, var avatarimage, var enemyimage; //...funktion handletick() {var gamecanvas = dokument. getelementbyid ("gamecanvas"); enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv. enemyy2 = enemyy2 + 1 gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, avatarx, avatary); gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy); gamecanvas. getcontext ("d"). drawimage (enemyimage, 100, enemyy2)}, nu kan du sætte den oprindelige holdning, enemyy, og enemyy2, hvad du vil have, uden at ændre den kode, handletick(),.,, fem fjender, forsøge at udvide det vi har gjort, så er der fem fjender, alle med forskellige udgangspunkter.tag et kig på min kode, hvis du har brug for.her er et tip: man behøver blot at tilføje kode uden for de funktioner og i, handletick(), funktion - ingen grund til at røre ved, setupgame(), eller, handlemousemovement(),., var enemyy = 0, var enemyy2 = - 50, var enemyy3 = - 75, var enemyy4 = - 120 og var enemyy5 = - 250 og var avatarx = 0, var avatary = 0, var avatarimage, var enemyimage; //...funktion handletick() {var gamecanvas = dokument. getelementbyid ("gamecanvas"); enemyy = enemyy + 1 //stigning enemyy variabel med en pixel.hvis enemyy er 10, så enemyy + 1, 11, osv. enemyy2 = enemyy2 + 1 enemyy3 = enemyy3 + 1 enemyy4 = enemyy4 + 1 enemyy5 = enemyy5 + 1 gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, avatarx, avatary); gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyy); gamecanvas. getcontext ("d"). drawimage (enemyimage, 130, enemyy2); gamecanvas. getcontext ("d"). drawimage (enemyimage, 300, enemyy3); gamecanvas. getcontext ("2d"). drawimage (enemyimage, 50, enemyy4); gamecanvas. getcontext ("d"). drawimage (enemyimage, 190, enemyy5)},,, klik for at prøve det.få ti fjender, det bliver kedeligt, ikke?at opretholde alle de fjender, og at tilføje tre linjer kode for hver enkelt.ad, lad mig præsentere, arrays,.se her:, var enemyypositions = [0 - 50 - 75 - 120 - 250] var avatarx = 0, var avatary = 0, var avatarimage, var enemyimage; //...funktion handletick() {var gamecanvas = dokument. getelementbyid ("gamecanvas"); enemyypositions [0] = enemyypositions [0] + 1 enemyypositions [1] = enemyypositions [1] + 1 enemyypositions [2] = enemyypositions [2] + 1 enemyypositions [3] = enemyypositions [3] + 1 enemyypositions [4] = enemyypositions [4] + 1 gamecanvas.width = 400; //det sletter indholdet af lærred gamecanvas. getcontext ("d"). drawimage (avatarimage, avatarx, avatary); gamecanvas. getcontext ("d"). drawimage (enemyimage, 250, enemyypositions [0]); gamecanvas. getcontext ("d"). drawimage (enemyimage, 130, enemyypositions [1]); gamecanvas. getcontext ("d"). drawimage (enemyimage, 300, enemyypositions [2]); gamecanvas. getcontext ("d"). drawimage (enemyimage,50, enemyypositions [3]); gamecanvas. getcontext ("d"). drawimage (enemyimage, 190, enemyypositions [4]);}, giver det os nøjagtig samme resultat som før, men:,, alle de fjender, y holdninger er defineret i en fælles linje, og vi får en let at henvise til en af disse holdninger:, enemyyposition [, enemynumber,.,.,, denne type variabel, kaldes en, system, og det er en måde at føre en liste over værdier (eller andre variabler), og lad os få et punkt fra listen med et nummer.bemærker, at den første del af et system er nummer 0, den anden værdi er nummer 1, osv. - vi kalder arrays "nul -" derfor, ni, nu tage et kig på denne del af kode:, enemyypositions [0] = enemyypositions [0] + 1 enemyypositions [1] = enemyypositions [1] + 1 enemyypositions [2] = enemyypositions [2] + 1 enemyypositions [3] = enemyypositions [3] + 1 enemyypositions [4] = enemyypositions [4] + 1, vi er ved at gøre det samme igen og igen, at de forskellige punkter i nettet.hver linje i kode, er den samme som alle de andre, bortset fra, at antallet i kantet parentes ændringer.det er godt, for vi kan skrive koden siger, "gør det samme fem gange, men at ændre en række hver gang".for eksempel, var currentnumber = 0, mens (currentnumber < 5) (indberetning (currentnumber); currentnumber = currentnumber + 1}, hvis du lægger det i din er fil (i, setupgame(), f.eks.), ville det gøre side udvise fem alarm kasser: for det første ville sige "0"; den anden ville sige "1", og så op til "4".det er med andre ord svarer til det:, var currentnumber = 0, indberetning (currentnumber); currentnumber = currentnumber + 1 - indberetningen (currentnumber); currentnumber = currentnumber + 1 - indberetningen (currentnumber); currentnumber = currentnumber + 1 - indberetningen (currentnumber); currentnumber = currentnumber + 1 - indberetningen (currentnumber); currentnumber = currentnumber + 1, det er fordi, mens erklæring, fungerer som en gentagen, hvis udtalelse.husk, at hvis, fungerer sådan her: hvis (betingelse) {resultat;}, "hvis tilstand, er sandt, så løb, resultat.", mens, fungerer på den måde, mens (betingelse) {resultat;}, "så længe, tilstand, er rigtigt, bliv ved med at løbe, resultat." det er en lille forskel, men en virkelig vigtig.en, hvis, block vil løbe, bare én gang, hvis den betingelse, er sandt; en, mens, block vil løbe igen og igen, indtil tilstanden stopper, tilstand, ophører med at være sandt. derfor har de, resultat - den kode, der er løbet ind i, mens, block - normalt indeholder en kode, som i sidste instans vil forårsage tilstand, for ikke at tilfældet. hvis det ikke den kode, vil gentage sig selv for evigt.i vores alarm rubrik eksempel, vi steg værdien af, currentnumber, indtil det ", currentnumber" var ikke længere sandt (da, currentnumber, nåede 5, ikke længere var mindre end 5, hvilket er grunden til, at vi ser aldrig en indberetning æske med nummer 5).,, at kode igen og igen igen, som det kaldes "ni", og samtidig blokere kaldes en "loop".lad os nu tage denne kode:, enemyypositions [0] = enemyypositions [0] + 1 enemyypositions [1] = enemyypositions [1] + 1 enemyypositions [2] = enemyypositions [2] + 1 enemyypositions [3] = enemyypositions [3] + 1 enemyypositions [4] = enemyypositions [4.] + 1,... og sætte det ind i en sløjfe:, var currentenemynumber = 0, mens (currentenemynumber < 5) (enemyypositions [currentenemynumber] = enemyypositions [currentenemynumber] + 1}, fantastisk!eller er det?det er jo ikke helt rigtigt: vi er ikke at ændre værdien af, currentenemynumber,.denne mea