Learn HTML5 med denne enkle avoider spillet Tutorial
7
Del
33
Del
Dette cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen (den første av en serie), vil du lære det grunnleggende HTML5 spillutvikling med Javascript og lerretet element. Du trenger ikke å ha noen erfaring med programmering, eller noen HTML erfaring (bortsett fra denne ene artikkelen). La oss komme i gang!
Innledning
Det ville være vanskelig å ha gått glipp av "HTML5 vs Flash" artikler som har oppstått over hele nettet, spesielt siden Steve Jobs tanker om Flash i fjor, og Microsoft har annonsert denne uken at Windows 8 nettleseren ikke vil støtte Flash på tabletter som standard. Jeg kommer ikke til å komme inn i denne debatten her; Uansett hva din mening, det er ingen skade i å lære HTML5. Selv om du vet Flash, gjør det ikke vondt å ha et annet verktøy i pakken din.
Denne opplæringen krever ikke vet at du vet Flash, eller å ha hatt noen erfaring med programmering før. Faktisk, alt du trenger å vite før du setter i gang er forklart i denne ene artikkelen: Få fart på karrieren med HTML. Det er alt! Hvis du kan følge det, kan du følge denne.
Jeg basere denne serien på min serie Flash tutorial, som igjen var basert på en enda eldre Flash tutorial av en fyr som heter FrozenHaddock (til hvem jeg er veldig takknemlig for at jeg fikk bruke hans ideer). Dette er ikke en direkte port av enten opplæringen, men; Jeg skal være helt omskriving koden og forklaringer som passer HTML5
Et par notater.
noe.
< p> i denne første delen av opplæringen, vil vi bare skal sette alt opp og sette i noen veldig grunnleggende spillmekanikk. Fremtidige deler vil legge til flere gyte fiender, høye poengsummer, menyskjermer, flere nivåer, og alt det der
Nok snakk -. La oss komme i gang
Sette opp
Første tingen å gjøre er å lage en HTML-fil. Du kan bruke en enkel tekst editor for dette, eller tilbringe et par hundre dollar på programvare som er beregnet for HTML utvikling; personlig, jeg vil holde fast med gratis programvare for nå. Her er tre anbefalinger: TextEdit (for Mac), Notepad ++ (for Windows), og Sublime Text 2 (for Windows, OS X og Linux). Velg og vrak
Opprett en ny fil, og skriv inn følgende:.!
≪! DOCTYPE html > < html > ≪ head > ≪ title > HTML5 avoider Game < /title > ≪ /head > ≪ body > ≪ /body > < /html >.
Hvis du ikke forstår hva noe av det betyr, kan du lese min grunnleggende guide til HTML
Opprett en ny mappe på harddisken kalt AvoiderGame Ok, nå, vil du ikke bli overrasket over å høre at vi snart skal skrive noen Java - husk, lar Java websider gjøre Så, opprette en ny mappe, kalt js Alter HTML for å referere til dette JS filen: Merk at jeg ikke har skrevet src = "http://active.tutsplus.com/...whatever.../js/main.js", eller src = "C: \\ AvoiderGame \\ js \\ main.js"; på denne måten, forteller vi HTML-siden, "se etter en js Hvis du ønsker å teste at dette fungerer, satt våken. ( "Working!"); i din JS-fil, deretter laste HTML-siden. Hvis du får opp en dialogboks, alt er i orden Mens vi er i gang, la oss koble en ekstern CSS-fil i tillegg; vi kan bruke den til å gjøre teksten ser bedre, og vi må kanskje bruke CSS i spillet senere. Opprett en ny mappe inne AvoiderGame Jeg kommer til å endre min CSS-fil for å matche noen stiler vi ofte bruker på demosider her på Activetuts +; gjerne kopiere det, komme opp med din egen, eller la din tomt: Denne opplæringen er ikke om CSS, så hvis du ikke forstår det, ikke bekymre deg for det. (Hvis du er nysgjerrig, kan du slå opp betydningen av dem CSS attributter på W3Schools.com.) Ok, det er kjedelig oppsett ut av veien. Du kan se hvordan siden ser ut ved å klikke her, og du kan laste ned hele kilde så langt i en ZIP-fil her. La oss lage vår avatar! Vi trenger et bilde som skal representere vår spillers karakter i dette spillet. Bruk hva du vil - et bilde av ansiktet, din Twitter avatar, et bilde du har tegnet - men sørg for at den har en gjennomsiktig bakgrunn, at det er omtrent sirkulær, og at det handler om 30x30px Den opprinnelige. tutorial som dette er basert brukt en hodeskalle. Jeg er ikke sikker på hvorfor, men jeg mistenker at det var et forsøk på å undergrave spill 'typisk anti-skjelett holdning; tross alt under huden vår, ikke hver og en av oss har en hodeskalle? Jeg er ikke en å bryte med tradisjonen, så jeg skal bruke en hodeskalle her også. Du kan laste ned gruven ved å høyreklikke på det, hvis du ikke ønsker å lage din egen: Og før du spør. Ja, jeg am Så hvordan skal vi få dette inn i vårt spill? Hvis du har vært betalende oppmerksomhet, vil du sannsynligvis foreslå dette: Og, det er sant, som ville sette avatar i vår side! Men det er ikke hva vi kommer til å bruke. En img element viser et enkelt bilde, lastes fra en PNG eller JPG (eller hva) fil. Lerretet tag, ny i HTML5, kan generere et bilde dynamisk, som består av andre, mindre bilder, tekst, primitive former, og så mye mer, hvis du ønsker. Innholdet kan endres når som helst, slik at du kan gi en illusjon av bevegelse -. Eller interaksjon, hvis du gjør innholdet endres i henhold til hva brukeren gjør Vi skaper et lerret på samme måte som vi skaper noen annen HTML-element: ... men hvis du ser på dette, vil du ikke kunne se noe der. Det er usynlig, så den eneste effekten det har er å flytte teksten ned litt. Med CSS, kan vi gi det en disposisjon slik at vi kan fortelle det bortsett fra bakgrunnen. Legg dette til CSS: Sjekk det ut. Det er ganske liten, skjønt; la oss gjøre det 400px ved 300px (old-school TV-mål): Det er bedre. Nå sa jeg at vi kunne legge bilder til lerret dynamisk, så la oss gjøre det neste. Husk i HTML-guiden jeg viste deg hvordan du gjør ting skjer når du klikket HTML-elementer ? Her er en rask oppsummering: Hvis du klikker på lerret, får du opp en dialogboks melding. Dette er fordi alert () er en Javascript-funksjonen (Slette den opprinnelige alert ( "Working!");. hvis du ikke allerede har gjort) Ser du hvordan dette fungerer? Vi har opprettet en ny funksjon kalt alertSeveralTimes (), der innholdet er inne i klammeparentes ({og}). . Når vi forteller leseren til å kjøre denne alertSeveralTimes () -funksjonen, vil den kjøre hver av varsler i sin tur, den ene etter den andre La oss prøve det ut! Prøv det! Vi har effektivt satt sammen flere alert () funksjoner i en større funksjon kalt alertSeveralTimes (), og fortalte det til å kjøre når lerretet er klikket. Du kan lure på hvorfor alert ( "Working!") løp så snart vi åpnet siden, men alertSeveralTimes () ikke gjorde det, selv om de var begge på samme sted (på toppen av main.js Uansett. Nå la oss gjøre vår funksjon gjør noe til lerretet. Gjør det legger et bilde er litt vanskelig, så vi starter med noe litt enklere. Endre størrelse En av de mest fantastiske funksjonene i Javascript er dens muligheten til å endre HTML på siden. Sjekk ut dette; endre JS filen slik at den inneholder: Du kan sikkert gjette hva dette gjør: det tar lerretet element, og endrer sin bredde og høyde attributter (vi trenger ikke å bruke anførselstegn rundt tall i Javascript, i motsetning til i HTML-attributter ). Bortsett ... hvordan vet det at Gamecanvas refererer til lerretet som vi har i vår side? Vel, det gjør ikke ... ennå. Vi må gjøre det innse at Først må vi gi lerretet element en id (forkortelse for "identifisering") attributt.; Dette er bare et navn som vi bruker, slik at vi kan referere til det i Javascript senere! Mens vi er i gang, la oss gjøre det onclick attributt punktet til vår nye changeCanvasSize () -funksjonen: Dette er fortsatt ikke helt Nå, jeg vet, dette synes ikke helt logisk. Hvorfor er Gamecanvas plutselig i anførselstegn? Hvorfor bruker vi document.getElementById ( "Gamecanvas") i stedet for bare, sier, getDocumentElement ( "Gamecanvas"), eller til og med document.gameCanvas? Jeg lover, dette vil alt bli klart i løpet av serien opplæringen, men for nå, bare gå med det, vær så snill. Test ut den nye koden. Lerretet endrer størrelsen seg selv så snart du klikker på den. Awesome Nå skal jeg advare deg! Programmerere er lat. Vi hater å skrive den samme koden igjen og igjen, og hvis det er noen måte vi kan redusere skrive nødvendig, vil vi ta det. Så, la meg introdusere deg til en hyggelig stenografi måte å henvise til lerretet: Se hvordan det fungerer? Akkurat som funksjon ordet sier: "Hei, pakk alt denne koden opp under navnet changeCanvasSize (), please", VaR ordet sier: "hei, bruker ordet Gamecanvas å referere til HTML-elementet med en ID av" Gamecanvas " , vennligst". Deretter (i linje 3 og 4 ovenfor), kan vi bruke denne nye stenografi Gamecanvas, vennligst over lengre document.getElementById ( "Gamecanvas") - fordi de refererer til det samme Men det er Som jeg sa, vi går mot å legge et bilde til (tom) lerret. Men før vi kan gjøre det, må vi laste bildet. Og før vi kan gjøre at Endre ditt JS slik:. (. Jeg har lagt til en tom linje for å tydelig skille Var uttalelser fra resten) Her er vi bruke Var ordet igjen - men denne gangen, det sier noe litt forskjellig: "hei, opprette et nytt bilde objekt og bruker ordet avatarImage å referere til det fra nå av, takk." Bilde objekt er i utgangspunktet som en img element; den avgjørende forskjellen her er, det er ikke i HTML Akkurat som et img element på siden, dette bildet er ganske mye unyttig uten å sette sin src, så gjøre det neste. (Nok en gang jeg bruker en blank linje for å holde biter av kode som gjør forskjellige ting atskilt fra hverandre (som avsnitt i teksten), og nok en gang jeg 'm bruker en relativ bane for å referere til en fil plassering.) Så dette er nå lasting bildet, men du må ta mitt ord for det i øyeblikket, siden det er fortsatt der ute i Aether hvor vi kan ikke se det. Men vi kan sjekke sine andre attributter: Vi forteller det for å vise oss en dialogboks som inneholder verdien av bredden egenskap av vårt bilde. Sjekk den på koden din og se hva du får; Jeg får 29 Med bare én linje med kode, kan vi trekke avatar på lerretet. La oss bryte dette ned: Ta en titt. Det fungerer! (Hvis den ikke gjør det, husk at du bør se denne i Chrome, jeg kan ikke garantere at dette vil fungere i noen annen nettleser.) drawImage () funksjonen fungerer som en potet stempel: det tar bare innholdet i bildeobjektet og kloner dem på lerretet; selvfølgelig, vi arbeider med piksler, ikke male, men du skjønner poenget Dette betyr at vi kan legge til flere hodeskaller til lerretet, slik:. Sjekk det ut, skull fest. Vi kan også gjøre skallen vises i et tilfeldig sted hver gang: Math.random () gi deg et tilfeldig tall mellom 0 og 1, så Math.random () * 100 gir deg et tilfeldig tall mellom 0 og 100; dette betyr at koordinatene for det nye skallen er hvor som helst mellom (0, 0) og (100, 100). Ta en titt Men vent - hvorfor er det bare en hodeskalle på en gang nå? Er det noe å gjøre med at det er en ny funksjon? Har lerretet få ryddet hver gang du kjører en funksjon? Nei. Lerretet er ryddet hver gang du endrer sin høyde eller bredde, selv om du ikke endrer heller. Så, hvis vi endrer våre JS slik: ... så vi kan fortsette å legge nye hodeskaller Ikke glem å endre onclick egenskap av lerretet i HTML: Ok, nå la oss få det avatar flytte Jeg ønsker å gjøre avataren følge musen.. Vi kan bruke det samme prinsippet som animatører gjøre: hvis vi holder å slette innholdet på lerret, og deretter re-tegning avatar på en annen posisjon, vil avataren ser ut til å bevege seg. Så alt vi trenger å gjøre er å holde redrawing avataren på musens koordinater, og vi er klar! Hvordan skal vi gjøre det, skjønt? dømme etter hva vi har gjort så langt, kan du gjette at vi ville legge en onmousemove hendelse attributt til lerretet (som ville bli utløst hver gang brukeren flyttet sin mus), og deretter gjøre det kjøres drawAvatar (), men spesielt på mus nåværende koordinater. Dette er inspirert, men dessverre ikke virkelig fungerer, rett og slett fordi det ikke tilbyr en enkel måte å få musens koordinater. Det er imidlertid svært nær hva vi ønsker å gjøre! Ta en titt på denne: Dette gjør omtrent det samme som ovenfor forslag; den redrawAvatar () -funksjonen (som vi ikke har skrevet ennå) vil bli kalt når musen beveger seg over lerretet. Men det er en stor forskjell Legg merke til hvordan vi skriver redrawAvatar, snarere enn redrawAvatar () i koden ovenfor, mens i vår HTML-side, vi legger drawAvatar () -. med når musen beveger seg, skaper leseren et nytt objekt - akkurat som da vi opprettet et nytt bilde i vår Javascript tidligere. Dette objektet har visse egenskaper som har noe å gjøre med det som utløste etableringen; i dette tilfellet, fordi musen beveges, den inneholder koordinatene til mus. Strålende! Så hvordan skal vi få tilgang til det? Vel, dette nye objektet (som kalles en Mouseevent, av grunner som du kan være i stand til å gjette) blir sendt til redrawAvatar () -funksjonen. Er, men vi har ikke skrevet det ennå, så la oss gjøre det nå. Legg til denne koden i JS filen: Aha - denne gangen, slik vi definerer funksjonen er litt annerledes: vi har lagt til ordet Mouseevent i mellom disse parentes . Dette er fordi vi forventer at leseren skal passere en Mouseevent objekt til vår nye funksjon, akkurat som når vi passerte koordinatene til drawImage () -funksjonen. Siden vi har gitt det et navn, kan vi få tilgang attributtene for dette nye objektet: Test ut dette; du må klikke på lerretet før noe vil skje, fordi det er innsiden som funksjon som vi gjøre nettleseren begynne å betale oppmerksomhet til musebevegelser. Du vil merke at dialogboksen vises bare når musen beveger seg over lerretet element. Du kan også legge merke til noe rart om antall: det er for stort! Jeg får tall på over 900, selv om bredden på lerretet er bare 400. Dette er fordi mouseEvent.x gir musens x-posisjon fra kanten av side Mye bedre Så til oppsummering: addEventListener () gjør leseren < em> lytt Det er litt vanskelig å vikle hodet rundt, men ikke fortvil.; Vi skal bruke det mye, slik at du får taket på det! Vi har nesten fått bevegelse. Faktisk, anbefaler jeg at du har en gå på å gjøre avataren følge muse på egen hånd før du leser videre. Du vil sannsynligvis komme svært nær Det er en stor ting som vil reise deg opp, skjønt: ordet Var - som du vil huske, kan du bruke til å sette en stenografi - bare "varer" . i funksjonen som den ble definert Dette betyr at hvis du prøver å gjøre, si: ... det vil ikke fungere, fordi Gamecanvas betyr ingenting utenfor drawAvatar () Så hvis du ikke får det første gang, har! en annen gå Min kode er her hvis du ønsker å sjekke din. Tada! Oh, vent, dang, glemte jeg å slette lerretet ved å endre sin bredde eller høyde. Kul effekt, men la oss prøve det igjen: Prøv det ut nå. Suksess! Når du tar en titt på koden din i løpet av få dager, vil du sannsynligvis ha glemt hva mye av det er for . Spesielt jeg mistenker at du glemmer at du trenger å endre størrelsen på lerretet Heldigvis er det en måte å minne deg selv:.. Kommentarer Se på denne:
, og lagre denne HTML-fil inni den som game.html
. Hvis du legger i det akkurat nå, vil det bare vise en blank hvit side (som du vet), så legg et tekstavsnitt der bare for å sørge for at alt er i orden. Jeg vil legge til en link til denne opplæringen, men du kan skrive inn hva du vil - ditt navn og nettside, kanskje
<! DOCTYPE html > < html >?! ≪ head > ≪ title > HTML5 avoider Game < /title > ≪ /head > ≪ body > ≪ p > Fra < a href = "http://active.tutsplus.com/tutorials/html5/learn-html5-with-this-simple-avoider-game-tutorial" rel = "ytre" > Lær HTML5 med denne enkle avoider spillet Tutorial < /a >. < /p > ≪ /body > < /html >
Java
ting, og det er akkurat det vi trenger for å lage spill. Vi setter alle våre Javascript i en ekstern fil, for å holde ting ryddig, og sette denne filen i en egen mappe, for å holde ting ryddigere fortsatt.
inni AvoiderGame
mappe. Deretter oppretter du en ny, tom tekstfil og lagre den som main.js
inne i denne nye AvoiderGame /js /
mappe.
<! DOCTYPE html > < html > ≪ head > ≪ title > HTML5 avoider Game < /title > ≪ script src = "js /main.js" > < /script > ≪ /head > ≪ body > ≪ p > Fra < a href = "http://active.tutsplus.com/tutorials/html5/learn-html5-with-this-simple-avoider-game-tutorial" rel = "ytre" > Lær HTML5 med denne enkle avoider spillet Tutorial < /a >. < /p > ≪ /body > < /html >
mappe i samme mappe som du, og deretter bruke main.js
fil som er inni den." Det kalles en relativ bane
. ≪! DOCTYPE html > < html > ≪ head > ≪ title > HTML5 avoider Game < /title > ≪ script src = "js /main.js" > < /script > ≪ /head > ≪ body > ≪ p > Fra < a href = "http://active.tutsplus.com/tutorials/html5/learn-html5-with-this-simple-avoider-game-tutorial" rel = "ytre" > Lær HTML5 med denne enkle avoider spillet Tutorial < /a >. < /p > ≪ /body > < /html >
CSS
heter css
, og deretter opprette en ny, tom tekstfil kalt style.css
inni det. Endre HTML slik:!
≪! DOCTYPE html > < html > ≪ head > ≪ title > HTML5 avoider Game < /title > ≪ script src = "js /main.js" > < /script > ≪ link rel = "stylesheet" href = "css /style.css" /> ≪ /head > ≪ body > ≪ p > Fra < a href = "http://active.tutsplus.com/tutorials/html5/learn-html5-with-this-simple-avoider-game-tutorial" rel = "ytre" > Lær HTML5 med denne enkle avoider spillet Tutorial < /a >. < /p > ≪ /body > < /html >
body {bakgrunn: #ffffff; text-align: center; padding: 20px; color: # 575757; font: 14px /21px Arial, Helvetica, sans-serif;} a {color: # B93F14;} a: hover {text-decoration: none;} ol {width: 600px; text-align: left; margin: 15px auto}
Få hodet i spillet
tilgjengelig for kommisjonen
< p> Uansett hva du velger, lagre den som avatar.png
inne i en ny mappe, kalt img
inne AvoiderGame
. Mappestrukturen ser nå slik ut: Twitter /AvoiderGame /game.html /css /style.css /js /main.js /img /avatar.png
< img src = "img /avatar.png" alt = "Avatar" />
Canvas
<! DOCTYPE html > < html > ≪ head > ≪ title > HTML5 avoider Game < /title > ≪ script src = "js /main.js" > < /script > ≪ link rel = "stylesheet" href = "css /style.css" /> ≪ /head > ≪ body > ≪ canvas > < /canvas > ≪ p > Fra < a href = "http://active.tutsplus.com/tutorials/html5/learn-html5-with-this-simple-avoider-game-tutorial" rel = "ytre" > Lær HTML5 med denne enkle avoider spillet Tutorial < /a >. < /p > ≪ /body > < /html >
lerret {border: 1px solid black;}
<! DOCTYPE html > < html > ≪ head > ≪ title > HTML5 avoider Game < /title > ≪ script src = "js /main.js" > < /script > ≪ link rel = "stylesheet" href = "css /style.css" /> ≪ /head > ≪ body > ≪ lerret width = "400" height = "300" > < /canvas > ≪ p > Fra < a href = "http://active.tutsplus.com/tutorials/html5/learn-html5-with-this-simple-avoider-game-tutorial" rel = "ytre" > Lær HTML5 med denne enkle avoider spillet Tutorial < /a >. < /p > ≪ /body > < /html >
Funksjoner
<! DOCTYPE html > < html > ≪ head > ≪ title > HTML5 avoider Game < /title > ≪ script src = "js /main.js" > < /script > ≪ link rel = "stylesheet" href = "css /style.css" /> ≪ /head > ≪ body > ≪ lerret onclick = "alert ( 'klikket på lerret');" width = "400" height = "300" > < /canvas > ≪ p > Fra < a href = "http://active.tutsplus.com/tutorials/html5/learn-html5-with-this-simple-avoider-game-tutorial" rel = "ytre" > Lær HTML5 med denne enkle avoider spillet Tutorial < /a >. < /p > ≪ /body > < /html >
: det er en snarvei til et par linjer med kode. Vi kan skrive våre egne funksjoner i vår JS-fil. Åpne main.js
og skriv inn følgende:
funksjons alertSeveralTimes () {alert ( "Hallo!"); alert ( "Se, vi kan kjøre flere meldinger på rad."); alert ( "Irritert ennå?");}
≪! DOCTYPE html > < html > ≪ head > ≪ title > HTML5 avoider Game < /title > ≪ script src = "js /main.js" > < /script > ≪ link rel = "stylesheet" href = "css /style.css" /> ≪ /head > ≪ body > ≪ lerret onclick = "alertSeveralTimes ();" width = "400" height = "300" > < /canvas > ≪ p > Fra < a href = "http://active.tutsplus.com/tutorials/html5/learn-html5-with-this-simple-avoider-game-tutorial" rel = "ytre" > Lær HTML5 med denne enkle avoider spillet Tutorial < /a >. < /p > ≪ /body > < /html >
). Det er på grunn av den magiske søkeord funksjon; når nettleseren ser dette, betyr det tror ikke, "aha, er dette noen kode jeg må løpe umiddelbart!", det tenker: "aha, er dette noen kode jeg må pakke opp i en ny funksjon, som jeg kan kjøre senere "
Endring av Canvas
funksjonen changeCanvasSize () {gameCanvas.width = 600; gameCanvas.height = 800;}
<! DOCTYPE html > < html > ≪ head > ≪ title > HTML5 avoider Game < /title > ≪ script src = "js /main.js" > < /script > ≪ link rel = "stylesheet" href = "css /style.css" /> ≪ /head > ≪ body > ≪ lerret id = "Gamecanvas" onclick = "alertSeveralTimes ();" width = "400" height = "300" > < /canvas > ≪ p > Fra < a href = "http://active.tutsplus.com/tutorials/html5/learn-html5-with-this-simple-avoider-game-tutorial" rel = "ytre" > Lær HTML5 med denne enkle avoider spillet Tutorial < /a >. < /p > ≪ /body > < /html >
<! DOCTYPE html > < html > ≪ head > ≪ title > HTML5 avoider Game < /title > ≪ script src = "js /main.js" > < /script > ≪ link rel = "stylesheet" href = "css /style.css" /> ≪ /head > ≪ body > ≪ lerret id = "Gamecanvas" onclick = "changeCanvasSize ();" width = "400" height = "300" > < /canvas > ≪ p > Fra < a href = "http://active.tutsplus.com/tutorials/html5/learn-html5-with-this-simple-avoider-game-tutorial" rel = "ytre" > Lær HTML5 med denne enkle avoider spillet Tutorial < /a >. < /p > ≪ /body > < /html >
nok. Vi må la Javascript vite at det er arbeider med et element fra HTML-siden (eller "HTML-dokument», som det er mer korrekt kjent).
Funksjon changeCanvasSize () {document.getElementById ( "Gamecanvas") width = 600; document.getElementById ( "Gamecanvas") height = 800;.}
funksjon changeCanvasSize () {var Gamecanvas = document.getElementById ( "Gamecanvas"); gameCanvas.width = 600; gameCanvas.height = 800;}
<. p> Det er viktig: vi har ikke skapt en ny lerret; vi har bare gjort Gamecanvas referere til eksisterende lerretet element.
mulig å bruke Var å skape noe nytt ...
Klikk for å Skull
, må vi ha noe å laste bildet inn
Funksjon changeCanvasSize () {var Gamecanvas = document.getElementById ( «Gamecanvas"); Var avatarImage = new Image (); gameCanvas.width = 600; gameCanvas.height = 800;}
. Vi har laget denne helt nye element, men det er ingen steder i HTML; det er bare flyter rundt i Javascript Aether den. Jeg finner det litt merkelig
Funksjon changeCanvasSize () {var Gamecanvas = dokument .getElementById ( «Gamecanvas"); Var avatarImage = new Image (); gameCanvas.width = 600; gameCanvas.height = 800; avatarImage.src = "img /avatar.png";}
funksjon changeCanvasSize () {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); gameCanvas.width = 600; gameCanvas.height = 800; avatarImage.src = "img /avatar.png"; alert (avatarImage.width);}
, noe som er helt riktig
Funksjon changeCanvasSize () {var Gamecanvas = dokument .getElementById ( «Gamecanvas"); Var avatarImage = new Image (); gameCanvas.width = 600; gameCanvas.height = 800; avatarImage.src = "img /avatar.png"; . GameCanvas.getContext ( "2d") drawImage (avatarImage, 0, 0);}
gameCanvas.getContext ( "2d"): Vi gjør faktisk ikke tegne direkte på lerretet, trekker vi inn på det som kalles en "tegning kontekst"; Dette lar oss bestemme om vi ønsker å trekke i 2D eller 3D. Ok, det er ingen 3D sammenheng i øyeblikket, men dette er å la oss plan for fremtiden
drawImage (). Ganske grei. Dette er en funksjon som lar oss tegne et bilde på konteksten av et lerret
avatarImage:.? Dette er bildet objektet vi har fått flyter rundt i Aether, husk
0, 0: Dette er koordinatene der vi ønsker å tegne bildet. På skolen, du lært at (0, 0) er nederst til venstre på siden; på en datamaskin, er det øverst til venstre (x-aksen peker til høyre, og y-aksen peker nedover).
Flere Skulls
Foto jimmiehomeschoolmom
funksjon changeCanvasSize () {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); gameCanvas.width = 600; gameCanvas.height = 800; avatarImage.src = "img /avatar.png"; gameCanvas.getContext ( "2d") drawImage (avatarImage, 0, 0).; gameCanvas.getContext ( "2D") drawImage (avatarImage, 100, 50).; gameCanvas.getContext ( "2D") drawImage (avatarImage, 200, 130).; . GameCanvas.getContext ( "2d") drawImage (avatarImage, 300, 270);}
funksjon changeCanvasSize () {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); gameCanvas.width = 600; gameCanvas.height = 800; avatarImage.src = "img /avatar.png"; . GameCanvas.getContext ( "2d") drawImage (avatarImage, Math.random () * 100, Math.random () * 100);}
funksjon changeCanvasSize () {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); avatarImage.src = "img /avatar.png"; . GameCanvas.getContext ( "2d") drawImage (avatarImage, Math.random () * 100, Math.random () * 100);}
funksjon drawAvatar () {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); avatarImage.src = "img /avatar.png"; . GameCanvas.getContext ( "2d") drawImage (avatarImage, Math.random () * 100, Math.random () * 100);}
<! DOCTYPE html > < html > ≪ head > ≪ title > HTML5 avoider Game < /title > ≪ script src = "js /main.js" > < /script > ≪ link rel = "stylesheet" href = "css /style.css" /> ≪ /head > ≪ body > ≪ lerret id = "Gamecanvas" onclick = "drawAvatar ();" width = "400" height = "300" > < /canvas > ≪ p > Fra < a href = "http://active.tutsplus.com/tutorials/html5/learn-html5-with-this-simple-avoider-game-tutorial" rel = "ytre" > Lær HTML5 med denne enkle avoider spillet Tutorial < /a >. < /p > ≪ /body > < /html >
Legge Interaktivitet
En av Grand
hendelse
funksjonen drawAvatar () {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); avatarImage.src = "img /avatar.png"; . GameCanvas.getContext ( "2d") drawImage (avatarImage, Math.random () * 100, Math.random () * 100); gameCanvas.addEventListener ( "mousemove", redrawAvatar);}
"parentes" (parentes) - i onclick hendelsen egenskap av vår lerret. Hele grunnen til det er litt komplisert å gå inn nå (selv om du vil forstå ved slutten av serien), men det har en svært viktig endelige utfallet. Det tillater oss å få musens koordinater
funksjon drawAvatar () {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); avatarImage.src = "img /avatar.png"; . GameCanvas.getContext ( "2d") drawImage (avatarImage, Math.random () * 100, Math.random () * 100); gameCanvas.addEventListener ( "mousemove", redrawAvatar);} funksjon redrawAvatar (Mouseevent) {}
funksjon drawAvatar () {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); avatarImage.src = "img /avatar.png"; . GameCanvas.getContext ( "2d") drawImage (avatarImage, Math.random () * 100, Math.random () * 100); gameCanvas.addEventListener ( "mousemove", redrawAvatar);} funksjon redrawAvatar (Mouseevent) {alert (mouseEvent.x);}
, snarere enn kanten av lerretet. Vi kan bruke mouseEvent.offsetX å få musens x-posisjon fra kanten av lerretet:
funksjon drawAvatar () {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); avatarImage.src = "img /avatar.png"; . GameCanvas.getContext ( "2d") drawImage (avatarImage, Math.random () * 100, Math.random () * 100); gameCanvas.addEventListener ( "mousemove", redrawAvatar);} funksjon redrawAvatar (Mouseevent) {alert (mouseEvent.offsetX);}
for visse hendelser Z - som for eksempel bevegelse av musen - og deretter kjøre en funksjon når denne hendelsen er "hørt". Nettleseren oppretter et nytt objekt (som en Mouseevent), og sender den til den funksjonen
Flytt hodet
funksjon drawAvatar () {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); avatarImage.src = "img /avatar.png"; . GameCanvas.getContext ( "2d") drawImage (avatarImage, Math.random () * 100, Math.random () * 100); gameCanvas.addEventListener ( "mousemove", redrawAvatar);} funksjon redrawAvatar (Mouseevent) {gameCanvas.width = 400; alert (mouseEvent.offsetX);}
funksjon drawAvatar () {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); avatarImage.src = "img /avatar.png"; . GameCanvas.getContext ( "2d") drawImage (avatarImage, Math.random () * 100, Math.random () * 100); gameCanvas.addEventListener ( "mousemove", redrawAvatar);} funksjon redrawAvatar (Mouseevent) {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); avatarImage.src = "img /avatar.png"; . GameCanvas.getContext ( "2d") drawImage (avatarImage, mouseEvent.offsetX, mouseEvent.offsetY);}
funksjon drawAvatar () {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); avatarImage.src = "img /avatar.png"; . GameCanvas.getContext ( "2d") drawImage (avatarImage, Math.random () * 100, Math.random () * 100); gameCanvas.addEventListener ( "mousemove", redrawAvatar);} funksjon redrawAvatar (Mouseevent) {var Gamecanvas = document.getElementById ( "Gamecanvas"); Var avatarImage = new Image (); avatarImage.src = "img /avatar.png"; gameCanvas.width = 400; . GameCanvas.getContext ( "2d") drawImage (avatarImage, mouseEvent.offsetX, mouseEvent.offsetY);}
Vent, hva var det for?
funksjonen drawAvatar (