Nå, over til våre funksjoner.
< hr>
Trinn 3: init () funksjon
funksjonen init () {_img = new Image (); _img.addEventListener ( 'load', onImage, false); _img.src = "mke.jpg";}

Det første vi vil gjøre i vår søknad er å laste bildet for puslespillet. Bildet objektet først instansiert og satt til vår _img variabel. Deretter lytter vi for lasten hendelse som da vil fyre vår onImage () funksjonen når bildet er ferdig lastet. Til slutt satt vi kilden til bildet, noe som utløser belastningen

Nå som bildet er lastet, kan vi sette de fleste av variabler deklarert tidligere. Vi gjør dette her fordi vi nå har informasjon om bildet og kan sette våre verdier på riktig måte.

Det første vi gjør er å beregne størrelsen på hver puslespill brikke. Vi gjør dette ved å dele PUZZLE_DIFFICULTY verdien av bredden og høyden på lastet bilde. Vi trim også fettet ut av kantene for å gi oss noen fine partall å jobbe med og sikrer at hver brikke kan hensiktsmessig bytte 'slots' med andre.

Neste vi bruker våre nye puzzle piece verdier for å bestemme den totale størrelsen på puslespillet og sette disse verdiene til _puzzleWidth og _puzzleHeight

Til slutt, kaller vi av noen få funksjoner -. setCanvas () og initPuzzle ().

Nå som våre puslespill verdier er fullført, ønsker vi å sette opp vår lerretet element. Først satt vi vår _canvas variabel for å referere til vår lerret element, og _stage å referere til sin sammenheng.

Nå har vi satt bredden og høyden av vår lerret å matche størrelsen på vår trimmet bilde, etterfulgt av å bruke noen enkle stiler å skape en svart ramme rundt vår lerret å vise grensene for vår oppgave

Her initial vi puslespillet. Vi setter denne funksjonen opp på en slik måte at vi kan kalle det igjen senere når vi ønsker å spille av puslespillet. Noe annet som måtte være satt før spiller ikke trenger å bli satt på nytt.

Først satt vi _pieces som en tom matrise og skape _mouse objektet, som vil holde vår mus posisjon gjennom hele programmet. Neste vi setter _currentPiece og _currentPieceDrop til null. (På det første stykket disse verdiene vil allerede være null, men vi ønsker å sørge for at de får tilbakestilt når du kjører i puslespillet.)

Til slutt, er det på tide å trekke! Først tegner vi hele bildet for å vise til spilleren hva de vil lage. Etter det skaper vi noen enkle instruksjoner ved å ringe vår createTitle () -funksjonen

Her skaper vi et ganske enkelt budskap som instruerer brukeren til å klikke puslespillet for å begynne
Vårt budskap vil være en semi-gjennomsiktig rektangel som. vil tjene som bakgrunn for vår tekst. Dette gjør at brukeren kan se bildet bak det, og også sikrer våre hvit tekst vil være leselig på et bilde

Vi bare satt fyllstil til svart og globalAlpha til 0,4, før du fyller i en kort svart rektangel på bunnen av bildet.

Siden globalAlpha påvirker hele lerretet, må vi sette det tilbake til 1 (ugjennomsiktig) før tegning teksten. For å sette opp vår tittel, setter vi Tekstjustering til "sentrum" og textBaseline til "midten". Vi kan også bruke noen skriftegenskaper.

Hvis du vil tegne teksten, bruker vi fillText () -metoden. Vi passerer i msg variable og plassere den på den horisontale sentrum av lerretet, og den vertikale sentrum av rektangelet

Til slutt er det på tide å bygge puslespill

Vi gjør dette ved å bygge et objekt for hver brikke. Disse objektene vil ikke være ansvarlig for å gjengi til lerretet, men heller å bare holde referanser på hva du skal tegne og der. Når det er sagt, la oss få til det.

First off, la oss erklære noen variabler som vi skal gjenbruk gjennom løkken. Vi ønsker å sette opp sløyfen for å iterere gjennom antall brikkene vi trenger. Vi får denne verdien ved å multiplisere PUZZLE_DIFFICULTY av seg selv - så i dette tilfellet får vi 16.

I loopen:
for (i = 0; i < PUZZLE_DIFFICULTY * PUZZLE_DIFFICULTY; i ++) {stykke = { }; piece.sx = XPOS; piece.sy = yPos; _pieces.push (piece); XPOS + = _pieceWidth; if (XPOS > = _puzzleWidth) {XPOS = 0; yPos + = _pieceHeight; }}

Start med å lage en tom stykke objekt. Neste legge SX og sy egenskaper til objektet. I den første iterasjon, disse verdiene er 0 og representerer et punkt i vårt bilde hvor vi skal begynne å trekke fra. Nå skyver det til _pieces [] array. Dette objektet vil også inneholde eiendommer XPOS og yPos, som vil fortelle oss den nåværende posisjon i puslespillet hvor stykket skal trekkes. Vi kommer til å stokke gjenstandene før det spilles slik at disse verdiene ikke trenger å bli satt helt enda.

Det siste vi gjør i hver sløyfe er å øke den lokale variable XPOS av _pieceWidth. Før du fortsetter med loop, bestemmer vi om vi trenger å gå ned til neste rad brikker ved å sjekke om XPOS er utenfor bredden av puslespillet. Hvis ja, null vi XPOS tilbake til 0 og øke yPos av _pieceHeight.

Nå har vi våre brikkene all lagret bort pent i vår _pieces array. På dette punktet koden endelig stopper gjennomføre og venter for brukeren å samhandle. Vi setter et klikk lytter til dokumentet for å fyre av shufflePuzzle () -funksjonen når den utløses, som vil starte spillet.

Første ting først: stokke _pieces [] array. Jeg bruker en fin nyttefunksjon her som vil stokke indeksene i tabellen gått inn i den. Forklaringen på denne funksjonen er utenfor temaet for denne opplæringen, slik at vi skal gå videre, vel vitende om at vi har lykkes stokket våre stykker. (For en grunnleggende innføring i shuffling, ta en titt på denne opplæringen.)

La oss først klart all grafikk trukket til lerretet for å gjøre vei for å tegne våre stykker. Deretter sette opp matrisen lik hvordan vi gjorde da først å lage våre stykke stedene.

I loopen:
for (i = 0; i < _pieces.length; i ++) {stykke = _pieces [i]; piece.xPos = XPOS; piece.yPos = yPos; _stage.drawImage (_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, XPOS, yPos, _pieceWidth, _pieceHeight); _stage.strokeRect (XPOS, yPos, _pieceWidth, _pieceHeight); XPOS + = _pieceWidth; if (XPOS > = _puzzleWidth) {XPOS = 0; yPos + = _pieceHeight; }}

Først av alt, bruker jeg variabelen for å sette opp vår henvisning til løpende stykke objektet i loop. Nå fyller vi XPOS og yPos egenskapene jeg nevnte tidligere, som vil være 0 i vår første iterasjon.

Nå, endelig, trekker vi våre stykker.

Den første parameteren for drawImage () tildeler kilden til bildet vi ønsker å trekke fra. Deretter bruker stykket objekter sx og sy egenskaper, sammen med _pieceWidth og _pieceHeight, for å fylle de parametrene som erklærer den delen av bildet som å trekke fra. De siste fire parametere satt området på lerretet hvor vi ønsker å tegne. Vi bruker XPOS og yPos verdier som vi er både bygg i loop og tildele til objektet.

Umiddelbart etter dette trekker vi en rask strek rundt stykket for å gi den en grense, som vil skille det pent fra de andre brikkene.

nå venter vi for brukeren å ta en del ved å sette en annen klikk lytteren. Denne gangen vil det brann en onPuzzleClick () -funksjonen

Vi vet at puslespillet ble klikket; Nå må vi finne ut hva stykke ble klikket på. Denne enkle betinget vil få oss vår mus posisjon på alle moderne nettlesere som støtter lerretet, ved hjelp av enten e.layerX og e.layerY eller e.offsetX og e.offsetY. Bruk disse verdiene til å oppdatere vår _mouse objekt ved å tilordne den en x og y eiendom for å holde den gjeldende museposisjon -. I dette tilfellet, posisjonen der det ble klikket

I tråd 112 vi så umiddelbart satt _currentPiece til returnerte verdien fra vår checkPieceClicked () -funksjonen. Vi skiller denne koden fordi vi ønsker å bruke det senere når du drar puslespill brikke. Jeg skal forklare denne funksjonen i neste trinn.

Hvis den returnerte verdien var null, vi rett og slett ikke gjøre noe, da dette innebærer at brukeren ikke faktisk klikker på et puslespill brikke. Men hvis vi gjør hente et puslespill brikke, ønsker vi å feste den til mus og fade den ut litt for å avsløre bitene under. Så hvordan gjør vi dette?

Først fjerner vi lerretet området der stykket satt før vi klikket det. Vi bruker clearRect () enda en gang, men i dette tilfelle vi passere i bare området oppnås fra _currentPiece objektet. Før vi tegne det, ønsker vi å lagre () sammenheng med lerretet før du fortsetter. Dette vil sikre at alt vi trekke etter lagring vil ikke bare tegne over alt i sin vei. Vi gjør dette fordi vi vil være litt fading dratt stykke og ønsker å se bitene under den. Hvis vi ikke kalle lagre (), ville vi bare tegne over all grafikk i måten - falmet eller ikke

Nå trekker vi på bildet så sitt senter er plassert på musepekeren.. De første 5 parametere av drawImage vil alltid være den samme gjennom hele programmet. Når du klikker, vil de neste to parametre oppdateres for å sentrere seg til pekeren på musen. De to siste parametrene, bredden og høyden til å tegne, vil også aldri endres.

Til slutt vi kaller gjenopprette () -metoden. Dette betyr i hovedsak er vi ferdig med å bruke den nye alpha verdi og vil gjenopprette alle eiendommene tilbake til der de var. For å bryte opp denne funksjonen vi legge til to flere lyttere. Én for når vi beveger musen (dra puslespill brikke), og en for når vi la gå (slippe puslespill brikke)

Nå må vi backtrack litt. Vi var i stand til å avgjøre hva stykket ble klikket, men hvordan vi gjør det? Det er ganske enkelt faktisk. Det vi trenger å gjøre er å sløyfe gjennom alle brikkene og finne ut om klikk var innenfor reglene for noen av våre stedene. Hvis vi finner en, vi returnere matchet objektet og avslutte funksjonen. Hvis vi finner ingenting, returnerer vi null

Nå tilbake til å dra. Vi kaller denne funksjonen når brukeren beveger musen. Dette er den største funksjonen av programmet som det gjør flere ting. La oss begynne. Jeg vil bryte det ned så vi går
_currentDropPiece = null.; if (e.layerX || e.layerX == 0) {_mouse.x = e.layerX - _canvas.offsetLeft; _mouse.y = e.layerY - _canvas.offsetTop; } Else if (e.offsetX || e.offsetX == 0) {_mouse.x = e.offsetX - _canvas.offsetLeft; _mouse.y = e.offsetY - _canvas.offsetTop; }

Start med å sette _currentDropPiece til null. Vi trenger å tilbakestille dette tilbake til null på oppdatering på grunn av muligheten for at våre stykke ble dratt tilbake til sitt hjem. Vi ønsker ikke den forrige _currentDropPiece verdi hengende rundt. Neste vi setter _mouse objekt på samme måte som vi gjorde på klikk
_stage.clearRect (0,0, _puzzleWidth, _puzzleHeight);.

Her må vi gjøre klar alle grafikk på lerretet. Vi trenger egentlig å tegne brikkene fordi objektet som dras på toppen vil påvirke deres utseende. Hvis vi ikke gjør dette, vil vi se noen svært merkelige resultater å følge veien til vår dratt puslespill brikke
Var jeg.; Var stykke; for (i = 0; i < _pieces.length; i ++) {

Begynn med å sette opp vår vanlige brikker sløyfe

In the Loop.
stykke = _pieces [i]; if (stykke == _currentPiece) {fortsette; }

Opprett våre stykke referanse som vanlig. Neste sjekk om stykket vi nå refererer er det samme som stykket vi drar. Hvis så, fortsetter sløyfen. Dette vil holde dratt stykke hjem slot tom
_stage.drawImage (_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight.); _stage.strokeRect (piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);

Moving on, tegne puslespill brikke ved hjelp av dens egenskaper nøyaktig samme måte som vi gjorde da først trakk dem. Du må trekke grensen så vel
if (_currentDropPiece == null) {if (_mouse.x. ≪ piece.xPos || _mouse.x > (piece.xPos + _pieceWidth) || _mouse. y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)) {//IKKE OVER} else {_currentDropPiece = stykke; _stage.save (); _stage.globalAlpha = 0,4; _stage.fillStyle = PUZZLE_HOVER_TINT; _stage.fillRect (_currentDropPiece.xPos, _currentDropPiece.yPos, _pieceWidth, _pieceHeight); _stage.restore (); }}

Siden vi har en referanse til hvert objekt i loop, kan vi også bruke denne anledningen til å sjekke om den dras brikke er på toppen av det. Vi gjør dette fordi vi ønsker å gi brukeren tilbakemelding på hva stykke det kan bli droppet på. La oss grave i den koden nå.

Først ønsker vi å se om denne sløyfen har allerede produsert en dråpe mål. I så fall trenger vi ikke å bry siden bare en dråpe mål kan være mulig og enhver mus flytte. Hvis ikke, vil _currentDropPiece være null, og vi kan fortsette inn i logikken. Siden vår musen er i midten av dratt stykke, er alt vi virkelig trenger å gjøre bestemme hva andre stykke vår musen er over.

Deretter bruker vår praktiske checkPieceClicked () -funksjonen til å avgjøre om musen svever i løpet av den gjeldende stykket objektet i sløyfen. Hvis ja, vi setter _currentDropPiece variabel og tegne en farget boks over puslespill brikke, noe som indikerer at det nå er på rulle målet.

Husk å lagre () og gjenopprette (). Ellers vil du få tonet boksen og ikke bildet under

Out of the Loop:
_stage.save ();. _stage.globalAlpha = 0,6; _stage.drawImage (_img, _currentPiece.sx, _currentPiece.sy, _pieceWidth, _pieceHeight, _mouse.x - (_pieceWidth /2), _mouse.y - (_pieceHeight /2), _pieceWidth, _pieceHeight); _stage.restore (); _stage.strokeRect (_mouse.x - (_pieceWidth /2), _mouse.y - (_pieceHeight /2), _pieceWidth, _pieceHeight);

Sist men ikke minst må vi tegne dratt stykke. Koden er den samme som når vi først klikket det, men musa har flyttet så sin posisjon vil bli oppdatert

OK, er det verste bak oss. Vi er nå lykkes å dra en puslespill brikke og selv får visuell tilbakemelding på hvor det vil bli droppet. Nå er alt som er igjen er å slippe stykket. La oss først ta tilhørerne med en gang siden ingenting blir dratt.

Deretter sjekker du at _currentDropPiece er ikke null. Dersom det er, betyr dette at vi dratt den tilbake til stykket hjemmeområde og ikke over en annen spalte. Hvis det ikke er null, fortsetter vi med funksjonen.

Hva vi gjør nå er rett og slett bytte XPOS og yPos av hver brikke. Vi gjør en rask temp objekt som en buffer for å holde en av objektets verdier i bytte prosessen. På dette punktet, de to delene begge har nye XPOS og yPos verdier, og vil knipse i sine nye hjem på neste trekning. Det er det vi skal gjøre nå, samtidig sjekke om spillet har blitt vunnet

Nok en gang, fjerner lerretet og sette opp en gameWin variabel, sette den til sann som standard. Nå går videre med vårt altfor kjent stykker loop.

Koden her bør se kjent, slik at vi ikke vil gå over det. Det trekker bare bitene tilbake til sine opprinnelige eller nye spor. Innenfor denne sløyfen, ønsker vi å se om hver brikke blir trukket i sin vinnende posisjon. Dette er enkel: vi sjekke for å se om våre sx og sy egenskaper matche opp med XPOS og yPos. Hvis ikke, vet vi at vi kunne ikke muligens vinne puslespill og satt gameWin til false. Hvis vi gjorde det gjennom løkken med alle i deres vinnende steder, vi satt opp en rask timeout for å ringe vår Gameover () -metoden. (Vi satt en timeout slik at skjermen ikke forandre seg så drastisk på å slippe puslespill brikke.)

Dette er vår siste funksjonen! Her har vi bare fjerne alle lyttere og ringe initPuzzle (), som tilbakestiller alle nødvendige verdier og venter for brukeren å spille igjen.

Klikk her for å se det endelige resultatet.

Som du ser, kan du gjøre en masse nye kreative ting i HTML5 hjelp utvalgte bitmap områdene lastet bilder og tegning. Du kan enkelt utvide dette programmet ved å legge scoring og kanskje til og med en timer for å gi det mer gameplay. En annen idé ville være å øke vanskelighetsgraden og velge et annet bilde i Gameover () -funksjonen, noe som gir spillet nivåer.