HTML5 avoider spillet opplæringen: Holde Score
3
Del
11
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. . Ikke gå glipp av
Så langt har vi fått en endeløs strøm av fiender som vår avatar må unngå; ett trykk, og det er game over. Men hva så? Siden det er ingen måte å spore spillerens fremgang, har de ingen anelse om de gjorde det bedre i sin siste runden enn de noensinne gjorde før. I denne opplæringen vil du lære hvordan å holde stillingen, hvordan å vise det på lerret, og hvordan å la spilleren vet når de har slått sine egne rekorder.
Repetisjonsanmeldelser
I første og andre deler av denne opplæringen, har vi dekket en rekke begreper: tegne bilder til lerretet, oppdager musehandlinger, ved hjelp hvis og mens uttalelser, lagring variabler i matriser, og ideen om variabel omfang.
Du kan laste ned kildefilene fra serien opp til dette punktet hvis du ønsker å stupe rett inn her, men jeg anbefaler å lese alle delene i orden.
Vår spillets Javascript-fil initialiserer en haug med variabler (inkludert to matriser til å lagre fiende x- og y-koordinater) utenfor alle funksjoner, slik at innholdet er tilgjengelig for alle funksjoner. Den inneholder også en funksjon kalt setUpGame () som kjøres når spilleren først klikker på lerretet; Dette laster bildene, begynner å lytte etter eventuelle musebevegelser, og setter opp et "tick" funksjon som skal kjøres hver 25 millisekunder.
Når musen flyttes, flytter vi posisjonen til avatar, som er lagret i to variabler - en for x-koordinat og en for y-koordinat - men vi ikke Flåtten funksjonen gjør fire ting:. Alt klart? Hvis det har gått en stund siden du leser den andre delen av serien (eller hvis du bare ønsker å sjekke at du forstår hva som skjer), har en gå på disse små øvelser. De er helt valgfritt og separat til selve opplæringen, så anbefaler jeg å jobbe på en kopi av prosjektet snarere enn originalen. Du kan fullføre alle disse øvelsene kun ved hjelp av informasjon fra serien så langt. Bytt avatar og fiendebilder rundt slik at spilleren kontrollerer en smiley face som er unngår de fallende hodeskaller. (Hvor mange forskjellige måter kan du finne ut hvordan du gjør dette? Jeg kan tenke på tre, på toppen av hodet mitt.) I øyeblikket Det er en flat en-i-tjue sjanse for at en ny fiende vil bli opprettet i en gitt tick. Jeg vil at du skal gjøre det slik at det er en en-i-én sjanse i første kryss, en one-in-to-sjanse på den andre, en one-in-tre sjanse på den tredje, og så videre. For å gjøre dette mer utfordrende, gjør det i omvendt: en one-in-1000 sjanse i første kryss, en one-in-999 sjanse på den andre, en one-in-998 sjanse på den tredje, og så på. (Etter tusen tick, gjør det til en jevn en-i-én sjanse.) I stedet for å vente på fiender for å vises en etter en, har spillet starter med tjue fiender allerede på skjermen. For å gjøre dette mer utfordrende, gjøre dem spredt rundt lerretet, og ikke tillate dem å overlappe avatar eller hverandre. Hva er den enkleste måten å måle hvor godt spilleren gjør denne runden? Det letteste jeg kan tenke på er å holde styr på hvor lenge det er siden de treffer en fiende. Og siden treffer en fiende betyr game over, vi trenger bare å holde styr på hvor lenge de har spilt. For å gjøre dette, vil vi bare lage en variabel, satt den til 0 når runden starter og øke den hver tick. La oss kalle denne variabelen ticksSurvived. Og tenk: siden vi trenger for å få tilgang til det om og om igjen, må det være definert utenfor alle funksjoner, på toppen av JS filen: Nå vil vi gi handleTick () enda en oppgave å gjøre: tilvekst ticksSurvived. Sett denne etter kollisjonen deteksjon; tross alt, hvis avatar treffer en fiende, det har faktisk ikke overlevd flåtten: For å vise dette, for nå vil vi bare endre meldingen som vises når avatar treffer en fiende: Det er litt rart; vi har brukt + operatøren å legge en streng til et tall. Vi kan legge til en annen streng til slutten: Kanskje dette ikke virke merkelig for deg, men noen programmeringsspråk hater dette. Java bryr seg ikke. Den vet at "noen" + "streng" likeverdige "somestring", og forutsetter at du ønsker å behandle ticksSurvived som en streng i denne situasjonen (Noen ting du kan prøve ut:. 12 + 6 Har de alle gjøre hva du forventer at de skal gjøre?) Great! Som før når du klikker på OK, vises varslingsboksen igjen, fordi alt den gjør er pause flått heller enn å faktisk stoppe dem. Men merk at tallet i straffe øker med én; Dette er et bevis på at Javascript ikke slår nummeret til en streng Mens vi er på temaet denne varselboks. ikke du synes det er irriterende I øyeblikket er den eneste måten å starte en ny runde for å oppdatere siden. La oss gjøre det enklere og mindre irriterende å ha en annen gå, ved å gjøre det "OK" -knappen på varselboks tilbakestille spillet. Siden varselet effektivt pauser spillet, uansett hva vi satt på linje etter varsling vil kjøre når spilleren treffer OK. La oss gjøre det ringe en ny funksjon, startNewGame (): Så hva trenger vi startNewGame () for å gjøre Kanskje vi bare skal kalle setUpGame () igjen - men nei, ingenting i det som må gjøres to ganger: vi trenger ikke å laste inn bilder eller legge muse hendelsen lytteren eller sette opp flått igjen. Ha en tenke på hva som ville være nødvendig, og prøve ut nye ideer. Min løsning er under; ta en titt når du er klar Det er alt. Du kan gjøre mer hvis du ønsker det, men dette er minstekravet Merk at vi ikke trenger å gjøre noe med lerretet -. Vi trenger ikke å klare det, eller trekke noe til det, eller manipulere bildene - fordi dette er gjort i handleTick (). Vi trenger ikke å gå gjennom alle elementene i arrays, en etter en, enten fordi de arrays er bare en liste av koordinater som vi bruker for å stemple fiendebilder på lerretet; fiender ikke eksisterer som faktiske objekter Så dette er flott -.. spilleren kan spille spillet om og om igjen for å fortsette å prøve for en bedre score. Bortsett fra ... hvordan vet de om de har slått sin tidligere score? I øyeblikket, de må bare huske de top scorer så langt, eller skrive det ned. Vi kan gjøre det bedre enn det. Hvordan skal vi lagre toppscore? I en annen variabel, selvfølgelig Selvsagt har det å leve utenfor av funksjonene; nå, er jeg sikker på at du forstår hvorfor Til å begynne med, setter vi den til 0, selvfølgelig -. spilleren har ikke engang fullført en runde. Når avatar treffer en fiende, la oss oppdatere den nye stillingen som kreves: La oss også fortelle spilleren at de slo sin gamle high score: Ta en titt: Utmerket.. La oss nå gi spilleren litt mer informasjon om hvor mye bedre de gjorde: Merk her at ticksSurvived og mostTicksSurvived behandles som tall når trekke fra hverandre, men det resulterende uttrykket (ticksSurvived - mostTicksSurvived) behandles som en streng når det legges til de andre strenger! Dette kan bli veldig forvirrende, hvis du ikke er forsiktig. All right, så nå spiller vet hvor godt de var Det er veldig enkelt å skrive inn tekst i et lerret - og nei, trenger vi ikke å sette det sammen fra forskjellige bilder av forskjellige bokstaver Husk at for å tegne et bilde til lerretet vi kaller canvas.getContext! ("2D"). drawImage (). Skrive tekst er svært lik. Vi kaller canvas.getContext ("2d") fillText () Vi må passere tre argumenter for å fillText (). . Det er en valgfri fjerde argument .:. ... men vi vil ikke bekymre deg for det for nå For å teste dette ut, dra til handleTick (), finne den linjen der vi trekker avataren til lerretet, og trekke et utvalg tekstlinje like etterpå: Prøv det ut: Som jeg sier, det første argumentet som kreves er en streng, og - som vi har sett - kan vi konstruere en streng ved å legge en streng til et tall. I så fall bør dette fungere: ... og faktisk gjør det Men det er litt av et rot, flyter det under fiender med den lille skriften. La oss sortere det ut. Først, la oss flytte teksten slik at fiendene flytte under den. Dette betyr bare å trekke den etter alle fiendene er trukket, så flytt relevant linje ned: Nå, la oss flytte den til øverst til venstre på skjermen. Det er, (0, 0), så dette skal fungere, rett Hmm.. Nope. Vi kan ikke se resultatet i det hele tatt. Dette er fordi den bruker (0, 0) for å plassere nederst i venstre hjørne Sjekk det ut: Ok, så langt så bra. Nå, la oss endre skriften selv. Vi gjør dette ved å sette lerretet kontekst font annonsen til en CSS streng som representerer skriften. Hvis du ikke er kjent med CSS, ikke bekymre deg; på dette stadiet, er alt du trenger å vite at det inneholder skriften størrelse og fontface: ("px" står for "piksler".) Merk at vi må sette ! font før Ta en titt: Det fungerer - men Impact skriften er veldig vanskelig å lese på. denne størrelsen. La oss gjøre det større. Dessverre, dette fungerer ikke så godt, fordi skriften er fortsatt. ! 10px fra toppen av lerretet, men nå er det 16px høy Vi kunne holde endre y-posisjon på skriften for å fikse dette, men det er et alternativ: Vi skal gjøre det slik at posisjonen vi spesifisere bestemmer toppen Selvfølgelig, nå er det en 10px gap mellom toppen av teksten og toppen av lerretet: ... men det er lett å fikse nå.:. Vel, faktisk, jeg liker litt padding, så la oss gjøre dette: Mye bedre Vi er greit å bruke Impact, fordi den er installert på alle datamaskiner -. Men betyr det at vi ikke kan bruke noe annet enn skrift de få i denne listen? Heldigvis, nei. Vi kan bruke en hvilken som helst font vi liker, så lenge vi gir brukeren tilgang til det liksom. Og for dette, kommer vi til å bruke den CSS-filen -. Du vet, den vi har ikke rørt siden starten av serien Anta at vi har en font som heter "Really-Awesome". Dette vil eksistere på datamaskinen, et sted, som en fil - sannsynligvis en TFF fil ("True Type Font"). La oss anta at filen heter ReallyAwesomeFont.ttf Nå antar du laste opp dette font til din nettside - reallyawesomewebsite.com - slik at det er en direkte lenke til det. Http://reallyawesomewebsite.com/fonts/ReallyAwesomeFont . ttf Du kan da la spilleren nettleser vite om det ved å legge dette til din CSS fil: Med denne linjen i CSS, kan du endre koden slik: ... og det vil fungere, fordi nettleseren vil slå opp "Really-Awesome" font i stylesheet, og finne nettadressen til TTF. Mye Jeg kommer ikke til å demonstrere dette fordi jeg ikke eier omfordelings rettighetene til alle skrifter; hvis jeg laste opp noen og gi deg linken til TTF som en del av denne opplæringen, det er egentlig ikke rettferdig. Men det er et alternativ ... Google har samlet en stor samling av skrifter som du kan bruke i ditt prosjekt i CSS, ved hjelp av et lignende prinsipp som ovenfor. Ta en titt på samlingen Det er noen kriterier som du kan søke etter fonter, og du kan legge inn noen eksempler på tekst for å se hvordan det vil bli vist. Jeg kommer til å velge Island Hvis du legger http://fonts.googleapis.com/css?family=Iceland i nettleseren din, vil du se at det er samme type ting som vi skrev fra scratch før: Det har noen flere detaljer, og skriften er i WOFF format heller enn TTF, men du skjønner poenget Du kan bruke hvilken font du liker (og det ikke har. å være en Google Web Font), men for hensikten med denne opplæringen jeg kommer til å anta at du bruker Island. Så, redigere game.html og lim den skrift referanse i det: Nå, tilbake i main.js, endre font fra Impact til Island. Ta en titt: Cool Nå som den aktuelle stillingen er på skjermen til enhver tid, er det bare naturlig at spilleren vil ønske å se hva de prøver å slå Bruk det du har lært, tegne sitt beste poengsum på topp- høyre Du har sikkert lagt merke til nå at høy score tilbakestilles når du har lastet inn siden. Dette er fornuftig - tross alt, kjører vi denne linjen helt i starten: ... men selv uten at linjen, høy score fortsatt ikke ville vedvare. Alle variabler bli nullstille og ledig når du forlater siden Men det er et alternativ. Alle nettlesere setter til side 5 MB lagringsplass for hvert nettsted domene. Du kan lagre enhver streng du liker i denne 5MB lagring, og det vil bli der selv om brukeren lukker nettleseren og starter datamaskinen sin. Det kalles lokal lagring Her er en rask eksempel. La oss legge noe til lokal lagring helt i starten av setUpGame () -funksjonen: Lagre filen, og laste spillet ditt. Lukke fanen deretter Nå, redigere JS filen på nytt, sletter den linjen du nettopp har lagt, og erstatte den med en linje som skal hente Så, bare for å være klart, det er nå ingenting i koden som setter verdien av "exampleItem" Når du laster spillet denne gangen, skal du se et varsel med "Dette er et godt eksempel." . - Bevis for at strengen er lagret mellom øktene Vi kan fjerne dette elementet fra lokal lagring ved hjelp localStorage.removeItem (): Jeg anbefaler at du gjør dette nå, og deretter slette den linjen helt. Du kan også klart alt i lokal lagring på en gang, ved hjelp localStorage.clear () (ingen argumenter nødvendig). Ok - ikke helt alt Nå som vi har sett et eksempel La oss sette det ut i praksis. Når en ny rekord er satt, la oss lagre den til lokal lagring. Det blir bare satt på ett sted: når avatar kolliderer med en fiende og den nåværende poengsum er høyere enn den beste poengsummen. Så, legge kallet til localStorage.setItem () på riktig sted: Når siden er først lastet, bør vi sjekke for å se om det finnes allerede en høy score lagret i lokal lagring, og tilordne mostTicksSurvived til denne verdien, hvis så. (Du trenger ikke å gjenta denne sjekk når siden er lastet, med mindre du er bekymret for brukeren å spille spillet i to separate faner samtidig.) Hvordan sjekker vi om en verdi eksisterer? Alt vi trenger å gjøre er å sette den i en hvis tilstand: alert () ovenfor aldri blir kalt fordi localStorage.getItem ("thisItemDoesNotExist") eksisterer ikke. Enkelt, ikke sant? Så ved starten av setUpGame (), kan vi bare skrive: Ha en gå. Laste siden, fikk en høy poengsum, deretter slå den. Oppdater siden, og deretter få en lavere score - det fortelle deg at du slå din gamle poengsum Great?.! Forresten, hvis du tok utfordringen tidligere da vil du være i stand til å vise det forrige beste poengsum i øverste høyre hjørne av lerretet, og dette vil nå bære over fra økt til økt. Vi er omtrent ferdig for denne delen av serien, men jeg vil bare påpeke at, nok en gang, vi har behandlet en streng som et tall og en nummer som en streng: lokal lagring lagrer bare strengverdier, men vi lagre et nummer til det når vi spare det beste resultatet, og bruke den verdien vi hente fra det som en rekke senere Dette er akseptabelt,. fordi Javascript er det som kalles "svakt skrevet". Andre programmeringsspråk er "sterkt-skrev", noe som betyr at hvis du sier at noe er et tall, så det forblir I et sterkt-skrevet språk, hvis du ønsker å legge strengen "Score:". til nummer 32, deretter Du må uttrykkelig fortelle språket til å behandle 32 som en streng, kanskje som så: "Resultat:" + (32 som String) Også i et sterkt-skrevet språk, når du definerer en variabel, kan du også angi hvilken type det er: Men Java ikke bekymre deg for disse tingene. Dette gjør det ikke bedre eller verre enn et sterkt-skrevet språk, bare annerledes. Det var det for denne delen av opplæringen. Nå spillet har både en game over tilstand og et middel for å holde stillingen.
umiddelbart tegne avatar bilde på dette nye stedet; alle redrawing håndteres i flåtten funksjon
Det er en one-in-tjue sjanse for at det vil legge en ny fiende ved å trykke nytt x- og y-koordinatene på relevante arrays.
Det intervaller y-koordinatene for hver fiende ved looping gjennom denne matrisen.
Det tegnes på nytt avatar og fiendebilder i henhold til deres nåværende koordinater .
Ser etter en kollisjon mellom avatar og hver fiende, noe som gir et varsel hvis man oppstår.
Warm Up Challenge
Easy
Medium
Hard
Keeping Time
Var enemyYPositions = []; //tomme klammer betyr nye tomme arrayvar enemyXPositions = []; Var avatarX = 0; Var avatarY = 0; Var avatarImage; Var enemyImage; Var ticksSurvived = 0;
funksjon handleTick () {//... currentEnemyNumber = 0; while (currentEnemyNumber < numberOfEnemies) {if (((avatarX < enemyXPositions [currentEnemyNumber] & & enemyXPositions [currentEnemyNumber] < avatarX + 30) || (enemyXPositions [currentEnemyNumber] < avatarX & & avatarX < enemyXPositions [currentEnemyNumber] + 30)) & & ((avatarY < enemyYPositions [currentEnemyNumber] & & enemyYPositions [currentEnemyNumber] < avatarY + 33) || (enemyYPositions [currentEnemyNumber] < avatarY & & avatarY < enemyYPositions [currentEnemyNumber] + 30))) {alert ("Du treffer en fiende!"); } CurrentEnemyNumber = currentEnemyNumber + 1; } TicksSurvived = ticksSurvived + 1;}
funksjon handleTick () {//... currentEnemyNumber = 0; while (currentEnemyNumber < numberOfEnemies) {if (((avatarX < enemyXPositions [currentEnemyNumber] & & enemyXPositions [currentEnemyNumber] < avatarX + 30) || (enemyXPositions [currentEnemyNumber] < avatarX & & avatarX < enemyXPositions [currentEnemyNumber] + 30)) & & ((avatarY < enemyYPositions [currentEnemyNumber] & & enemyYPositions [currentEnemyNumber] < avatarY + 33) || (enemyYPositions [currentEnemyNumber] < avatarY & & avatarY < enemyYPositions [currentEnemyNumber] + 30))) {alert ("Du treffer en fiende Flått overlevde!" + ticksSurvived); } CurrentEnemyNumber = currentEnemyNumber + 1; } TicksSurvived = ticksSurvived + 1;}
funksjon handleTick () {//... currentEnemyNumber = 0; while (currentEnemyNumber < numberOfEnemies) {if (((avatarX < enemyXPositions [currentEnemyNumber] & & enemyXPositions [currentEnemyNumber] < avatarX + 30) || (enemyXPositions [currentEnemyNumber] < avatarX & & avatarX < enemyXPositions [currentEnemyNumber] + 30)) & & ((avatarY < enemyYPositions [currentEnemyNumber] & & enemyYPositions [currentEnemyNumber] < avatarY + 33) || (enemyYPositions [currentEnemyNumber] < avatarY & & avatarY < enemyYPositions [currentEnemyNumber] + 30))) {alert ("Du treffer en fiende Du overlevde" + ticksSurvived + "flått."); } CurrentEnemyNumber = currentEnemyNumber + 1; } TicksSurvived = ticksSurvived + 1;}
"12" + "6"
"12" + 6
12 + "6"
< p> Uansett, la oss gi denne nye koden en prøve.
Klikk for å prøve det ut.
permanent; det bare bruker
det som en streng med henblikk på å legge det til en annen streng
Try Again
currentEnemyNumber = 0; while (currentEnemyNumber < numberOfEnemies) {if (((avatarX < enemyXPositions [currentEnemyNumber] & & enemyXPositions [currentEnemyNumber] < avatarX + 30) || (enemyXPositions [currentEnemyNumber] < avatarX & & avatarX < enemyXPositions [currentEnemyNumber] + 30)) & & ((avatarY < enemyYPositions [currentEnemyNumber] & & enemyYPositions [currentEnemyNumber] < avatarY + 33) || (enemyYPositions [currentEnemyNumber] < avatarY & & avatarY < enemyYPositions [currentEnemyNumber] + 30))) {alert ("Du treffer en fiende Du overlevde" + ticksSurvived + "flått."); startNewGame (); } CurrentEnemyNumber = currentEnemyNumber + 1; }
funksjon startNewGame () {enemyXPositions = [].; enemyYPositions = []; ticksSurvived = 0;}
Klikk for å prøve det ut
Husk Best Score
Var enemyYPositions = []!; //tomme klammer betyr nye tomme arrayvar enemyXPositions = []; Var avatarX = 0; Var avatarY = 0; Var avatarImage; Var enemyImage; Var ticksSurvived = 0; Var mostTicksSurvived = 0;
stund (currentEnemyNumber < numberOfEnemies) {if (((avatarX < enemyXPositions [currentEnemyNumber] & & enemyXPositions [currentEnemyNumber] < avatarX + 30 ) || (enemyXPositions [currentEnemyNumber] < avatarX & & avatarX < enemyXPositions [currentEnemyNumber] + 30)) & & ((avatarY < enemyYPositions [currentEnemyNumber] & & enemyYPositions [currentEnemyNumber] < avatarY + 33) || (enemyYPositions [currentEnemyNumber] < avatarY & & avatarY < enemyYPositions [currentEnemyNumber] + 30))) {alert ("Du treffer en fiende Du overlevde!" + ticksSurvived +) "flått."; if (ticksSurvived > mostTicksSurvived) {mostTicksSurvived = ticksSurvived; } StartNewGame (); } CurrentEnemyNumber = currentEnemyNumber + 1; }
stund (currentEnemyNumber < numberOfEnemies) {if (((avatarX < enemyXPositions [currentEnemyNumber] & & enemyXPositions [currentEnemyNumber] < avatarX + 30) || (enemyXPositions [currentEnemyNumber] < avatarX & & avatarX < enemyXPositions [currentEnemyNumber] + 30)) & & ((avatarY < enemyYPositions [currentEnemyNumber] & & enemyYPositions [currentEnemyNumber] < avatarY + 33) || (enemyYPositions [currentEnemyNumber] < avatarY & & avatarY < ". ticks" enemyYPositions [currentEnemyNumber] + 30))) {alert ("Du treffer en fiende Du overlevde" + ticksSurvived + ); if (ticksSurvived > mostTicksSurvived) {alert ("Ny rekord!"); mostTicksSurvived = ticksSurvived; } StartNewGame (); } CurrentEnemyNumber = currentEnemyNumber + 1; }
Klikk for å prøve det ut
stund (currentEnemyNumber < numberOfEnemies) {if (((avatarX < enemyXPositions [currentEnemyNumber] & & enemyXPositions [currentEnemyNumber] < avatarX + 30) || (enemyXPositions [currentEnemyNumber] < avatarX & & avatarX < enemyXPositions [currentEnemyNumber] + 30)) & & ((avatarY < enemyYPositions [currentEnemyNumber] & & enemyYPositions [currentEnemyNumber] < avatarY + 33) || (enemyYPositions [currentEnemyNumber] < avatarY & & avatarY < ". ticks" enemyYPositions [currentEnemyNumber] + 30))) {alert ("Du treffer en fiende Du overlevde" + ticksSurvived +); if (ticksSurvived > mostTicksSurvived) {alert ("Du slo den gamle high score med" + (ticksSurvived - mostTicksSurvived) + "ticks!"); mostTicksSurvived = ticksSurvived; } StartNewGame (); } CurrentEnemyNumber = currentEnemyNumber + 1; }
Klikk for å prøve det ut.
gjør, etter at de får game over, bør vi gi dem en indikasjon på hvor godt de er
gjør, mens de fortsatt spiller.
Tegning Score til Canvas
De x-koordinat på å skrive den.
y-koordinat ved å skrive det
Den maksimale bredden at teksten er lov til å ta opp på skjermen
gameCanvas.width = 400; //dette sletter innholdet i lerretet gameCanvas.getContext ("2d") drawImage (avatarImage, avatarX, avatarY.); . gameCanvas.getContext ("2d") fillText (". Testing, testing, en, to, tre", 100, 100);
Klikk for å prøve det ut
Klikk for å prøve det ut
gameCanvas.width = 400; //dette sletter innholdet i lerretet gameCanvas.getContext ("2d") drawImage (avatarImage, avatarX, avatarY.); . gameCanvas.getContext ("2d") fillText ("Resultat:" + ticksSurvived, 100, 100);!.
Klikk for å prøve det ut
Tidy Up Tekst
gameCanvas.width = 400; //dette sletter innholdet i lerretet gameCanvas.getContext ("2d") drawImage (avatarImage, avatarX, avatarY.); currentEnemyNumber = 0; while (currentEnemyNumber < numberOfEnemies). {gameCanvas.getContext ("2d") drawImage (enemyImage, enemyXPositions [currentEnemyNumber], enemyYPositions [currentEnemyNumber]); currentEnemyNumber = currentEnemyNumber + 1; } GameCanvas.getContext ("2d") fillText ("Resultat:" + ticksSurvived, 100, 100);.
gameCanvas.width = 400; //dette sletter innholdet i lerretet gameCanvas.getContext ("2d") drawImage (avatarImage, avatarX, avatarY.); currentEnemyNumber = 0; while (currentEnemyNumber < numberOfEnemies). {gameCanvas.getContext ("2d") drawImage (enemyImage, enemyXPositions [currentEnemyNumber], enemyYPositions [currentEnemyNumber]); currentEnemyNumber = currentEnemyNumber + 1; } GameCanvas.getContext ("2d") fillText ("Resultat:" + ticksSurvived, 0, 0);
av teksten. Vi trenger å flytte teksten ned litt, da:
gameCanvas.width = 400; //dette sletter innholdet i lerretet gameCanvas.getContext ("2d") drawImage (avatarImage, avatarX, avatarY.); currentEnemyNumber = 0; while (currentEnemyNumber < numberOfEnemies). {gameCanvas.getContext ("2d") drawImage (enemyImage, enemyXPositions [currentEnemyNumber], enemyYPositions [currentEnemyNumber]); currentEnemyNumber = currentEnemyNumber + 1; } GameCanvas.getContext ("2d") fillText ("Resultat:" + ticksSurvived, 0, 10);..
Klikk for å prøve det ut
gameCanvas.width = 400; //dette sletter innholdet i lerretet gameCanvas.getContext ("2d") drawImage (avatarImage, avatarX, avatarY.); currentEnemyNumber = 0; while (currentEnemyNumber < numberOfEnemies). {gameCanvas.getContext ("2d") drawImage (enemyImage, enemyXPositions [currentEnemyNumber], enemyYPositions [currentEnemyNumber]); currentEnemyNumber = currentEnemyNumber + 1; .} GameCanvas.getContext ("2d") font = "10px Impact"; . gameCanvas.getContext ("2d") fillText ("Resultat:" + ticksSurvived, 0, 10);
tegning teksten
Klikk for å prøve det ut
GameCanvas.getContext ("2d") font = "18px Impact"; . gameCanvas.getContext ("2d") fillText ("Resultat:" + ticksSurvived, 0, 10);
Klikk for å prøve det ut
-Venstre hjørne av teksten, snarere enn den nederste venstre hjørne. Det er enkelt:
gameCanvas.getContext ("2d") font = "18px Impact";. . gameCanvas.getContext ("2d") textBaseline = "top"; . gameCanvas.getContext ("2d") fillText ("Resultat:" + ticksSurvived, 0, 10);
Klikk for å prøve det ut
gameCanvas.getContext ("2d") font = "18px Impact"; . gameCanvas.getContext ("2d") textBaseline = "top"; . gameCanvas.getContext ("2d") fillText ("Resultat:" + ticksSurvived, 0, 0);
gameCanvas.getContext (" 2d ".) font =" 18px Impact "; . gameCanvas.getContext ("2d") textBaseline = "top"; . gameCanvas.getContext ("2d") fillText ("Resultat:" + ticksSurvived, 5, 5);
Klikk for å prøve det ut
Ulike fonter
<.. p> Kanskje du lurer på om det er en liste over skrifter vi kan bruke. Vel, ja og nei. Se, hvis du velger en skrift som spilleren ikke har installert på datamaskinen sin, deretter teksten vil bare bli vist i standardskriften. Husk at Javascript er tegning teksten på fly, med spillerens datamaskinens ressurser
@ font-face {font-family: "Really-Awesome '; src: url ('http://reallyawesomewebsite.com/fonts/ReallyAwesomeFont.ttf');}
gameCanvas.getContext ("2d" ) .font = "18px Virkelig-Awesome"; . gameCanvas.getContext ("2d") textBaseline = "top"; . gameCanvas.getContext ("2d") fillText ("Resultat:" + ticksSurvived, 5, 5);
Google Web Fonts
Google Web fonter.
. Når jeg klikker Hurtig, det gir meg denne HTML:
< link href = 'http: //fonts.googleapis.com/css familie = Island?' Rel = "stilark" type = "text /css" >
media skjerm {@ font-face {font-family: 'Island'; font-style: normal; font-weight: 400; src: local ('Island'), lokale ("Island-Regular '), url (' http://themes.googleusercontent.com/static/fonts/iceland/v1/F6LYTZLHrG9BNYXRjU7RSw.woff ') format (' WOFF ');}}
<! DOCTYPE html > < html > < head > < title > HTML5 avoider Game < /title > < script src = "js /main.js" > < /script > < link rel = "stylesheet" href = "css /style.css" /> < link href = 'http:? //fonts.googleapis.com/css familie = Island' rel = "stylesheet" type = "text /css" > < /head > < body > < lerret id = "Gamecanvas" onclick = "setUpGame ();" width = "400" height = "300" > < /lerret > < p > Klikk i boksen for å spille. Advarsel: svært grunnleggende < /p >! < p > Kontroller at du har < a href = "http://google.com/chrome/" rel = "ytre" > Chrome < /a >. < /p > < p > Fra < a href = "http://active.tutsplus.com/tutorials/html5/html5-avoider-game-tutorial-keeping-score" > HTML5 avoider spillet opplæringen: Holde Score < /a > . < /p > < /body > < /html >
gameCanvas.getContext ("2d") font = "18px Iceland"; . gameCanvas.getContext ("2d") textBaseline = "top"; . gameCanvas.getContext ("2d") fillText ("Resultat:" + ticksSurvived, 5, 5);
Klikk for å prøve det ut
.!
Challenge. Vis den beste poengsummen
av lerretet. Dette er litt mer komplisert enn det virker! Du må bestemme hva som skal gjøres (hvis noe) når den nåværende poengsum overgår dagens beste poengsum
Saving Poeng mellom øktene
Var mostTicksSurvived = 0;
, og det er virkelig lett å bruke! For å spare noe til det, du trenger bare å gi det to strenger:
et navn for elementet, og Selge
verdien av varen
<. p> Hvis du vil hente den, du trenger bare navnet som du opprinnelig brukte
En rask Eksempel
funksjon setUpGame () {localStorage.setItem ("exampleItem", ". Dette er et godt eksempel");
elementet.
Funksjon setUpGame ( ) {alert (localStorage.getItem ("exampleItem"));.
funksjon setUpGame () {localStorage.removeItem ("exampleItem");
. Din side kan bare påvirke den lokale lagringsplass tildelt domenet som den er vert; Jeg kan ikke tømme lokal lagring for google.com fra en side vert på tutsplus.com, og vice-versa.
Lagre Best Score
stund (currentEnemyNumber < numberOfEnemies) {if (((avatarX < enemyXPositions [currentEnemyNumber] & & enemyXPositions [currentEnemyNumber] < avatarX + 30) || (enemyXPositions [currentEnemyNumber] < avatarX & & avatarX < enemyXPositions [currentEnemyNumber] + 30)) & & ((avatarY < enemyYPositions [currentEnemyNumber] & & enemyYPositions [currentEnemyNumber] < avatarY + 33) || (enemyYPositions [currentEnemyNumber] < avatarY & & avatarY < ". ticks" enemyYPositions [currentEnemyNumber] + 30))) {alert ("Du treffer en fiende Du overlevde" + ticksSurvived +); if (ticksSurvived > mostTicksSurvived) {alert ("Du slo den gamle high score med" + (ticksSurvived - mostTicksSurvived) + "ticks!"); mostTicksSurvived = ticksSurvived; localStorage.setItem ("bestScore", mostTicksSurvived); } StartNewGame (); } CurrentEnemyNumber = currentEnemyNumber + 1; }
if (localStorage.getItem ("thisItemDoesNotExist")) {alert ("Dette varselet vil aldri vises!");}
funksjon setUpGame () {if (localStorage.getItem ("bestScore")) {mostTicksSurvived = localStorage.getItem ("bestScore"); }
Klikk for å prøve det ut
< h2> Sidenote: sterke og svake Typing
et nummer, hvis du sier noe er en streng, så det forblir
en streng
Var hilsen: String = "Hei."; Var bedømmelsen: Antall = 1000;
innpakning opp