Skip to content

Spilleautomat i Javascript.

Nylig snakket noen til meg om a lage en spilleautomat. Jeg sa pa nettet og kunne ikke finne noen god spilleautomatimplementering i javascript. Sa jeg bestemte meg for a skrive en rask en. Min implementering bruker jquery og et par jquery plugins for animasjon. Spritely er et flott jquery-plugin for bakgrunns animasjon. Jeg brukte ogsa et plugin for a animere bakgrunnsposisjon siden jquery ikke stotter det nativt.

Lar begynne a bygge spilleautomaten. Demo her.

Forst og fremst trenger vi en sprite for var spilleautomat. Denne sprite er i utgangspunktet en hjuls som i bevegelse simulerer et spor. Det er foretrukket a ha sloret kopi av denne spolen for a vise effekten av bevegelse. For formalet med denne demonstrasjonen fikk jeg sprite fra internett.

Markeringen er veldig grei. Vi trenger bare plassholdere for 3 spor og en knapp som kontroller.

La oss na gjennom javascript na. Forst trenger vi en klasse for et spor. Vare 3 spor vil v re objekter av denne klassen.

Hvorfor trenger vi sa mange paramatere for en spilleautomat? Det er fordi hvert spor av en ideell spilleautomat burde ha forskjellig akselerasjon og fart. Ogsa det er bra a ha forskjellige maksimale hastigheter.

Var spilleautomat vil ha 4 medlemsfunksjoner:

start () & # 8211; starter et sporstopp () & # 8211; stopper en plassering finalPos () & # 8211; finner sluttposisjonen til sporet nar den stoppet reset () & # 8211; Tilbakestiller et spor for en annen runde.

I utgangspunktet lager vi et objekt for hvert spor av spilleautomaten. Vi overforer forskjellige verdier for maksimalhastigheten og hastighetsstegeren til konstruktoren.

var a = ny Slot ('# slot1', 30, 1), b = ny Slot ('# slot2', 45, 2), c = ny Slot ('# slot3', 70, 3);

Nar en bruker trykker pa & # 8216; Start & # 8217;, kreves startmetode for hvert spor. Denne metoden starter av sporet og oker hastigheten med jevne mellomrom. Dette kan gjores ved hjelp av setInterval. Kode under:

Nar alle sporene har nadd sine maksimale hastigheter, stopper & # 8216; Stop & # 8217; knappen er aktivert. Nar brukeren trykker pa & # 8216; Stopp & # 8217;, begynner hastigheten pa sporene a dekrementere.

Nar hastigheten kommer under en viss terskel, beregnes sluttposisjonen for hver av sporene basert pa deres nav rende stilling og sporene roteres for a na den endelige posisjonen.

Full kildekoden kan ses pa GitHub-depotet mitt.

56 kommentarer pa "spilleautomat i Javascript"

hei, og jeg prover for tiden a l re meg selv javascript eller en slags programmering. Jeg trodde det var veldig kult hva du gjorde, og du har noen tips om hvor eller hvordan du skal starte. Jeg kjopte noen boker, sa jeg leser dem for tiden og prover a skrive skript mens jeg gar.

Forresten hvor lenge tok det deg til a skrive ut alle skript for denne siden?

Fa javascript-konseptene dine riktig. Folg blogger fra javascript-eksperter. Plukk opp et lite problem og tenk hvordan du kan lose det i javascript. Den beste guiden jeg har funnet er https://developer.mozilla.org/no/JavaScript/Guide.

Bare stralende! Takk.

Fint arbeid der, faktisk jeg planlegger a bruke Javascript Slot Machine, men med litt modifikasjon, er det mulig a forhandsbestemme vinneren? Jeg mener jeg kan angi nar det kommer til vinnende kombinasjon vil skje.

Som folk vil ha 3 forsok pa a spille dette, men min App vil v re den som bestemmer nar vinnerkombinasjonen vil skje?

Gi meg en informasjon om hvordan du gjor det, og hvilken del av koden ma gjore noen endringer som jeg ikke vil odelegge totaliteten av arbeidet ditt.

Hei Herz og Saurabh,

har du funnet en losning for a vite resultatet av stillingen til hvert spor, fordi jeg har det samme sporsmalet enn Herz.

Du kan forhandsdefinere resultatene i utgangspunktet og fullfore sporene pa onsket posisjon for a simulere vinnende.

Jeg fant ut en feil pa fire der, etter at start for en stund har alle 3 spor blitt til blankspor.

Vinner det noen gang? Jeg spilte den omtrent 100 ganger og kunne ikke vinne & # 8230;

Det er veldig kult skjont & # 8211; bare onske jeg hadde et mer relevant nettsted for a legge det til. Til commetor som spurte om det fungerte i Firefox & # 8211; det fungerte bra for meg hver gang.

Jeg skrev aldri det som et faktisk spill. Min hensikt var a vise en mate a implementere spilleautomaten pa i javascript. Sa alle kombinasjonene av sporene er jevnt fordelt. Du kan legge til noen tweaks for a oke sjansene for a vinne.

Er du (Saurabh Odhyan) tilgjengelig for utleie for et enkelt prosjekt?

Hvis ja, email meg og jeg vil fortelle deg om det, bor det v re enklere enn spilleautomaten din.

Fantastisk skript & # 8211; Jeg vil gjerne bruke den i en liten konsert Jeg legger opp for et lagspill for mine kolleger og # 8211; Er det en sjanse for at du er villig til a hjelpe meg her og gi meg 3 vinnende scenarier (og en mister ) for noen $$$? Jeg skulle onske jeg hadde hjernen til a gjore det selv, men jeg er sikker pa at du er den beste mannen for jobben, pluss jeg er alltid glad for a donere for apen kildekode-arbeid

Hei Saurabh, Kan du gi litt mer detaljer om hvordan du kan oke oddsen for a vinne? Takk for denne oppl ringen.

Reduser antall bilder som brukes. Jeg har provd syv forskjellige bilder (epler, etc), 1 wild og 1 scatter, for totalt ni, og det gjor at spilleren spiller uten a lope ut av penger & # 8217 ;. (med mindre de virkelig er "uheldig" og "82";

Jeg provde a redusere antall bilder, men har ikke lykke til a oke sjansene for a vinne.

Ogsa nar bildene nar sin endelige posisjon, tar jeg en titt pa elementene, og jeg ser ting som dette:

Sporsmalet mitt er & # 8211; hvordan relaterer tallet 10996 til bildet? Bildet mitt som vises med bakgrunnsposisjonen er i arrayet pa 0, 237, 454, 696, 913 og 1157 (som du kan se, a sette ett bilde pa sa mange steder var mitt forsok pa a oke sjansene for a vinne, men det ser ut til a gjore ingen forskjell). Eventuelle rad fra deg eller Saurabh vil bli verdsatt.

Prov (google) & # 8220; Stacked Images & # 8221 ;. Det vil si, legg 3 eller 4 av hvert bilde i hvert spor. Deretter vil du randomisere en nokkel og sortere. Noen ganger gjentas ett bilde i et hvilket som helst spor, noen ganger 4 pa rad. Bare husk, hvis de vinner, ma flere linjer beregnes.

Hele dette kasinoet er javascript, jeg tror.

Hei! Dette er en fin oppl ring!

Men jeg kan ikke finne ut hvordan du endrer resultatene. Kan du v r sa snill a opplyse meg om det?

Jeg bruker slots-programmet i min facebook-app. Kudos!

Hvor effektiv er javascript hvis vi onsker a utvikle et facebook sosialt spill som farmville, slotomania etc.

Vi har startet en ny start Clipinmedia fokusert pa a utvikle facebook sosiale spill for kunder. Var neste prosjekt er a utvikle et sosialt spill som https://apps.facebook.com/slotomania/ (det er utviklet i flash + PHP ) Maks antall spill pa facebook er laget ved hjelp av flash.Men som nettleser spill kan ogsa utvikles ved hjelp av javascript som dette spillets spill https://apps.facebook.com/nonstop_casino (er utviklet ved hjelp av javascript + PHP)

andre spill (javascript + php spill) er mindre attraktivt sa langt som grafikk er konsentrert, men det gir nesten samme spillopplevelse som andre flash spill.

Onsker du a dele din mening i tilfelle vi ikke trenger sv rt attraktivt spill vil denne (Javascript + PHP) modellen fungere som problemer kan komme til spill i senere stadier. Eller javacript vil v re helt fint a jobbe med.

har noen provd a lage 5 hjul i stedet for 3?

Hei, dette er en fin oppl ring!

Men nar du forlater maskinen for a rulle etter en tid, vil du finne at alle sporbildene forsvinner.

Kan du fortelle logikken din her & # 8230 ;?

pos = parseInt (pos, 10);

beste + = imgHeight + 4;

Hyggelig a se spilleautomat.

Dessverre, nar jeg prover a bruke HTML og skript pa min lokale maskin for a leke med koden, virker den ikke: Det viser bare tre hvite firkanter, ingen bakgrunnsbilde i det hele tatt & # 8230;

Hvordan kan jeg lose dette og fa denne fine tingen a lope?

Jeg prover a erstatte noen av bildene i strimler av bilder (normalt / uskarpt) og lurte pa om du vil fortelle meg hvilket program / filter du pleide a fa uklare effekten av?

Jeg brukte filteret & # 8220; Motion Blur & # 8221; i Photoshop, fungerte perfekt. Annen programvare som Gimp eller PhotoImpact har ogsa dette filteret.

Javascript / CSS basert 5 hjulspor. Min tiln rming var a bruke DIV-elementet for hjulene. For hvert snurr, randomiser x-antall bilder og erstatt innholdet i hver hjul med bildeobjektene (inneholdt i egen div). Spinning animasjon ble oppnadd ved hjelp av en tidsur (setinterval), og hjulene & # 8220; spunnet & # 8221; ved a sette inn den siste Kilden for den forste Kilden, og deretter fjerne siste Kilden. Hver hjul har en annen timer-hendelse med en annen millisekund-innstilling, og hver hjul er ClearInterval (ed) etter hver slot-erstatning. Hjulene stoppes sekvensielt igjen til hoyre ved a opprettholde en & # 8220; loop count & # 8221 ;.

Fungerer det samme i alle nettlesere. Jeg vil snart ha det opp og offentlig. Jeg haper denne tiln rmingen berorer noe av taken angaende animasjon og javascript.

noen finne ut hvordan man bestemmer nar det vinner? liker for eksempel seier pa tredje trekk? vennligst fortell hvordan det er endret for a gjore det.

ogsa, hvordan kan jeg lage et villt kort, eller gjore det sa 2 av en slags gevinster?

jeg provde a redigere kodene og legge til flere oppforinger til det vinnende systemet, men spilleautomaten sluttet a fungere.

nar jeg sier villkort, mener jeg nar som helst 1 av en viss vises i en hvilken som helst kolonne, sa er det en seier. for eksempel, la si at tallet 7 er et jokertegn. hvis en 7 vises en gang, to ganger eller tre ganger, sa er det en seier.

@leo. Der ligger problemet, og det loses gjennom logikk implementert i javascript. Du ma undersoke hvert spor i hver hjuls, en vinnende kombinasjon og # 8221; om gangen. & # 8220; mye kode & # 8221; men veldig gjennomforbart. Jeg jobber med en na for a fullfore min spilleautomat, og vil legge inn mine funn her.

Jeg prover ogsa a implementere denne bloggens losning for a oppna en bedre & # 8216; spinnende effekt & # 8217 ;.

Massevis av god diskusjon her. Vennligst hold det i gang. Animasjon i Javascript er den eneste maten vi alle vil flytte vekk fra Flash.

Jeg tar tak i image.src for a sammenligne bildene i 5reels * 3slots-visningen. (Merk: Maskinen min har bare 9 vinnende linjer, men har villkort og "scatter", vinner. 1 wild og 1 scatter per hjul. (forskjellen er wild er vill for alle bilder bortsett fra scatter. scatter er en vinn uavhengig av linje eller hjul.)

Begynner med hjuls 9 kombinasjon, sammenligner jeg src av reel1 til reel2, og hvis det er en kamp (eller en wild), fortsetter jeg a reel3. Hvis en kamp er funnet pa reel3, har vi en vinnende linje, og jeg viser linjen9 grafikk, og fortsett til linje4 og linje5 for a bestemme belopet som er vant. Jeg gjor det samme for linje 8, gjennom linje 1. Etter det soker jeg etter & # 8220; scatters & # 8221 ;. Nar summen av & # 8216; gevinster & # 8217; er bestemt, viser jeg belopet og ruller det inn i spillernes beholdninger.

Hei, Har noen lost problemet for Firefox?! Bakgrunnen iamge bare disapeare pa visse punkter. Problemet ser ut til a v re i Spritely-pluginet her & # 8230; Hjelp v r sa snill.

Hei er det mulig a stoppe sporet automatisk? Takk!

* Utmerket * oppl ring og # 8211; Dette er akkurat det jeg trengte for et sott prosjekt jeg jobbet med for bloggen min (se resultatet her: http://unsolicited.elementfx.com/OSM/OSM.html & # 8211; og du blir kreditert

Dessverre har jeg det samme problemet som Chaara og Loki & # 8211; etter en rotasjon blir 1. symbolet & # 8220; hvit & # 8221; og viser ikke pa pafolgende spinn. Mens jeg har noen programmeringserfaring (dessverre, fra 1974!), Er jeg ikke Javascript savvy: Er det en losning pa dette?

Takk igjen! MUSEMEN.

Jeg tror jeg fant problemet: Hvis jeg starter spillet for siden laster fullstendig (det vil si: for hvert element laster, inkludert annonser og trackere) har jeg problemet. Hvis jeg venter pa at siden skal lastes helt, ikke noe problem

Takk igjen & # 8230; bra gjort!

Interessant tiln rming. Faktiske spilleautomater bruker virtuelle hjul, og de fysiske hjulene du ser er bare en animasjon for shill a se pa som viser det endelige, forutbestemte resultatet (de virtuelle hjulene tar resultatet basert pa et ekstremt stort tilfeldig tall og har ikke nodvendigvis samme mengde av hver symboler virtuell representasjon som vist pa fysisk hjul). Du kan ta et ekstremt stort antall, kjor det mot et sett med ekstremt store tabeller (de virtuelle hjulene), og animer det for a vise det beregnede resultatet. Mer kode, men mindre bilder.

Bare et helt annet svar her:

Trenger du en lisens for a kjore dette skriptet som en gamblingmaskin? Tenk deg at jeg ikke lader brukeren spille det eller a bli med pa nettstedet, men de kan fa poeng hvis de vinner, og med disse poeng kan de kjope bilder som premier eller lignende .. enda flere kan de oppgradere sin konto hvis de har x poeng?! Ellers vil oppgradering koste penger ..

Jeg prover bare a gjette scenariet der det kan v re ilegal!

For de forundret om hva som skjer i finalPos & # 8230; Jeg tror de nestede lokkene [for (i = 0 & # 8230;] kan erstattes med denne koden (kanskje litt mer omfattende):

var relativePos = pos% imgHeight;

var imgBasePos = pos & # 8211; relativePos;

best = imgBasePos + posArr [i];

@Saurabh: Takk mye for a dele dette kule spilleautomaten, setter jeg virkelig pris pa at & # 8230; Bare et forslag: bruk av mer meningsfulle variable navn ville v re nyttig for forstaelse (eller i det minste ytterligere kommentarer), spesielt innen finalPos (for eksempel k, posMin, best).

Takk for at du deler dette!

Bare funnet ut at posArr ikke er korrekt kommentert med symbolene. Det er ingen forskjell for dette eksempelet (siden det faktiske symbolet ikke betyr noe her), men kan v re forvirrende nar du arbeider med koden.

Endret posArr-erkl ring til:

posArr = [// posisjoner pa hjulsbilde, pikselforskjell fra bunn (!)

837, // 10 nummer7.

1000, // 12 kirseb r.

1085, // 13 banan.

1298, // 16 nummer 7.

1374 // 17 oransje.

btw: Jeg tror guavaen er ganske p re

Hvordan setter du dette pa jobb med ny versjon av jquery som 1.8.2?

Hvordan setter du alt bilde pa samme linje? nar de stopper?

Forst og fremst Takk for dette fantastiske Slots Script!

Jeg prover a tilpasse det slik at this.pos er satt til en bestemt pikselplassering, ettersom ikke alle mine ikoner er de samme (for eksempel s1: & # 8217; W & # 8217 ;, s2: & # 8217; I & # 8217 ;, s3: & # 8217; N & # 8217;)

Skriptet ditt bruker en funksjon for a finne den beste sluttposisjonen basert pa hvor n r ikonet er.

dette er min endrede funksjon:

this.pos = winspin [i]; // oppdater sluttplasseringen til sporet.

Jeg vil at hvert spor skal stoppe pa array posisjonene, dvs:

winFifty = new Array (3923, 1878, 436);

Som tilsvarer.

winFifty = nytt Array ( , 5, 0);

Enhver hjelp du kan gi vil bli verdsatt !?

Vil du sjekke ut en fullt funksjonell js spilleautomat med lyd, kassen grabgreen.luckydiem.com.

Dette er flott, ditt eksempel fungerer vakkert og forklaringen din er tydelig. Glad du var vert pa GitHub ogsa. Veldig hjelpsom.

Saurabh, takk sa mye for dette. Det er veldig kult. Jeg liker virkelig hvor fleksibel spilleautomaten og bildene er.

Jeg setter pris pa det

Hvis du ikke vil ha et oyeblikkelig fokusert pa uskarpt bilde, legg dette til stilarket for .slot div:

-webkit-overgang: bakgrunns-bilde 1.7s brukervennlig;

-moz-overgang: bakgrunns-bilde 1.7s brukervennlig;

-ms-overgang: bakgrunns-bilde 1.7s brukervennlig;

-o-overgang: bakgrunns-bilde 1.7s brukervennlig;

overgang: bakgrunnsbilde 1.7s enkelhet ut;

For tiden fungerer backround-bildet ikke pa firefox. Progressiv forbedring

Hvordan lager jeg skriptet for a alltid gi de samme resultatene, eller at jeg kan sporre hva skriptet gir resultatet?

Jeg leste innlegget ditt og onsket at jeg skrev det.

er det noen mate a ordne resultatet til a alltid vinne.

den var bra! dette innlegget er 6 ar og det er fortsatt rock!

Hei Mr Odhyan, kj re apps du har her .. btw, kan jeg bruke denne koden til kampanjene mine? Trenger du kreditt for dette? vennligst gi meg beskjed & # 8230;

Legg igjen et svar Avbryt svar.

Post navigasjon.

Opphavsrett & # 169; 2018 Saurabh Odhyan. Drevet av WordPress og Themelia.


Hallo! Vil du spille i det mest populære kasinoet? Vi samlet det for deg. Gå her nå!