Blackjack-skript

Blackjack-skript h1>

Forst tar du en pause og spiller spillet for a fa en ide om hvordan det fungerer. Du ser at ulike elementer pa siden oppdateres dynamisk, legges til og fjernes i lopet av spillet. Sorg for a lese reglene som er oppgitt. Det vil bidra til a forsta mye av programflyten og kommentarene i resten av denne artikkelen.

Spill krever nodvendigvis mye samhandling og dynamisk innhold. Denne demonstrerer mange funksjoner i stilark, skripting og bruk av Document Object Model (DOM). Som det er et ganske stort skript, blir noen detaljer om koden utelatt. Kommentarene i kilden skal bidra til a forklare de finere punktene og andre artikler pa dette nettstedet, gi god informasjon om mange av de anvendte teknikkene, spesielt ved bruk av CSS og DOM.

Sideoppsettet.

Hvis du ser pa HTML for spill siden, vil du se at den er brutt opp i flere omrader ved hjelp av DIV-tagger. Forst er det omradene for forhandleren og spilleren som bestar av en hoved DIV-tag som inneholder andre DIV for kortene og tekstmeldingene.

Stilklasse-tekstboksen angir flyt: hoyre; slik at alle tekstblokkene vises helt til hoyre pa disse omradene mens cardArea DIV tar opp resten av plassen i hoveddivisjonen. Kortomradet er i utgangspunktet tomt, men vil bli fylt og ryddet dynamisk nar spillet spilles.

Ytterligere spilleromrader.

Selv om spillet er laget for en enkelt spiller, tillater det «splits». Det vil si nar spilleren deles et par pa hans eller hennes forste to kort, kan han eller hun dele splittene i to separate hender. Pa samme mate kan noen av disse deles igjen hvis et annet par deles ut.

For a imotekomme dette er tre andre sett med DIVer definert i koden. Disse er akkurat som hovedspillerens omrade med unntak av IDene som er tildelt hvert element. Reglene begrenser spilleren til maksimalt tre splitt i hvilken som helst runde, sa tre ekstra omrader er nodvendig.

Som de vanligvis ikke brukes, har de en inline-stil som viser displayet: ingen; a holde dem skjult for visning. Skulle spilleren dele en hand, vil denne stilinnstillingen bli endret programmatisk for a vise et omrade og pa samme mate som satt til a vises: ingen; igjen nar det ikke lenger trengs.

Innstilling av display: ingen; avviker fra innstilling av synlighet: skjult; ved at et ikke-vist element ikke tar opp plass pa siden, mens en som bare er skjult gjor, selv om selve elementet ikke vil bli synlig.

Kontrollknapper.

Under spillomradene er et skjema med flere knapper. Hver har en funksjon som er tildelt den ved bruk av onclick-hendelsen, slik at spilleren kan ta ulike handlinger under spillet.

Noen knapper er i utgangspunktet deaktivert. I lopet av spillet blir individuelle knapper dynamisk aktivert eller deaktivert av skriptet, avhengig av ulike forhold. Pa denne maten kan brukeren bare velge mellom hvilke valg som er gyldige pa et gitt punkt i spillet.

For eksempel kan spilleren bare overgive seg ved starten av en runde nar de to forste kortene deles ut. Skulle spilleren velge a sla, sta eller ta et annet alternativ i stedet, er «Overlever» -knappen deaktivert for resten av runden.

Dette bidrar til a redusere mengden koden som trengs, da vi ikke trenger a sjekke om en gitt handling er gyldig hver gang. Det hjelper ogsa brukeren ved a gi en visuell indikasjon pa hvilke alternativer som er tilgjengelige til enhver tid.

Andre omrader.

Til hoyre for kontrollknappene er det to flere DIVer for a vise spillerens nav rende kredittlinje og og hans eller hennes standardinnsats. Spilleren far lov til a endre denne innsatsbelopet for hver runde, og kreditter vil automatisk bli oppdatert nar hendene spilles og vinner eller gar tapt.

Nederst pa siden skrives reglene ut. Som de ekstra spillomradene er disse i en DIV-tag med display: ingen; sett som en inline-stil for a skjule den. En av skjema knappene kaller en funksjon som vil bytte denne innstillingen, slik at spilleren kan se teksten som vilje.

Spillkortene.

Kortene selv er opprettet ved hjelp av to brukerdefinerte JavaScript-objekter, Card and Stack, som representerer individuelle kort og sett (dekk) av kort henholdsvis.

Kortobjektet gir ogsa et middel til a dynamisk vise hvilket som helst gitt kort pa siden. Som disse objektene er beskrevet i tidligere omtalte artikler pa nettstedet, vil detaljene ikke bli diskutert her igjen. Du kan se artiklene til rett for litt bakgrunnsinformasjon hvis du ikke allerede har lest dem.

Tilstrekkelig a si, disse objektene vil tillate oss a lage et kort av kort, blande det, avtale kort fra det og lage DOM noder for a vise individuelle kort pa siden.

Handtering av dekk.

Dekket (eller skoen) er opprinnelig opprettet av et anrop til funksjonen newDeck () som lager et nytt Stack-objekt, fyller det med kort og gir det en god blanding.

Det velger ogsa tilfeldig et tall for a betegne et «brenn» kort n r bunnen av dekk. For en ny runde startes, kontrolleres antall kort igjen i dekkene mot denne verdien. Hvis brennekortet er nadd eller bestatt, opprettes et helt nytt dekk ved a ringe denne funksjonen igjen.

Dette er gjort for a forhindre at du gar tom for kort under spillet. Men det er fortsatt en mulighet (spesielt hvis spilleren splitter eller endrer seg), sa nar et kort ma behandles, blir funksjonen getNextCard () brukt i stedet for a kalle Stack-objektets avtale () -metode direkte.

Hvis forst sjekker om dekkene er tomme og i sa fall skaper en ny. Det bruker deretter avtale () for a trekke det neste kortet i dekk og returnere det.