Kildekode til parkeringspuslespill: Beep Out, 30 nivåer i 3D
Hva Beep Out-pakken inneholder, hvordan TypeScript-prosjektet er bygget, og hva kjøperen vanligvis endrer først.
Hvis du leter etter kildekode til parkeringspuslespill, er kort svar dette: Beep Out er et ferdig 3D-trafikkpuslespill for nettleseren med 30 nivåer, en klar byggepakke og det redigerbare TypeScript-prosjektet bak, for $35. Denne guiden åpner pakken og viser hva hver del er til for.
Parkeringspuslespill ser enkle ut, og derfor blir et svakt et raskt avslørt. Reglene må være lesbare med et blikk, rekkefølgen av nivåer må lære spilleren noe, og koden må la deg legge til egne brett uten å ødelegge de gamle. Det er tre ting vi ser på her, sammen med hosting, lisensen og hva utgaven ikke inkluderer.
Hva kildekoden til parkeringspuslespillet inneholder
Beep Out selges som lokal nettleserutgave, versjon 1.1.0. Nedlastingen har to deler: et spill du kan legge ut i dag, og et prosjekt du kan endre.
- En klar til opplasting game/-mappe med alle 30 nivåene.
- Lesbar JavaScript, CSS og data for kjøringen i nettleseren, slik at du kan se hva nettleseren kjører.
- TypeScript-utviklerkildekoden, med spillressursene og testene.
- En illustrert veiledning på engelsk og portugisisk, som dekker installasjon, filkart, tilpasning, feilsøking og en FAQ.
- Lisensmerknader for avhengigheter og skrifttyper.
Grensesnittet finnes på 14 språk: engelsk, portugisisk, spansk, fransk, tysk, italiensk, nederlandsk, polsk, tyrkisk, russisk, indonesisk, japansk, koreansk og forenklet kinesisk. Veiledningen er bare på engelsk og portugisisk, noe som betyr noe hvis utvikleren din ikke leser noen av dem.
Åpne Beep Out-siden og spill demoen
Hvordan trafikkpuslespillet fungerer, regel for regel
Hvert kjøretøy har en pil på taket som viser utkjøringen. Trykk eller klikk på en bil som har fri vei fremover, så kjører den bort. Velger du en som er blokkert, støter den på trafikken, så rekkefølgen på trekkene avgjør nivået.
Fra nivå 4 står en kø med passasjerer ved busstoppet. Et kjøretøy kan bare kjøre bort når fargen stemmer med neste passasjer. En ledig bil med feil farge parkerer i en parkeringsplass og kjører av seg selv når passasjeren kommer fram. Plassen er liten, så for mange feil farger fyller den, og spilleren må planlegge flere trekk fremover. Det andre laget er det som gjør et vanlig trafikkork til et rekkefølgepuslespill.
Spillskjermen har hint, undo (angre) og restart (start på nytt). Å fullføre et nivå uten blokkerte trykk, hint eller angring gir en Clean Clear (ren gjennomkjøring), og en valgfri beste tid per nivå lagres i nettleseren. Fullførte nivåer låser opp fem malingsstiler i Garage (garasje). Malingen er kosmetisk: alle bilene kjører likt.
Hvordan koden er organisert
Det er to steder å jobbe, og det lønner seg å holde dem adskilt. game/-mappen er den ferdige byggingen: last den opp, så spiller den. Utviklerprosjektet er der endringene gjøres: nivåer, innstillinger, tekst, logoer og lydfiler. Etter en endring bygger du på nytt og erstatter den hostede game/-mappen med hele det nye resultatet.
Stacken er TypeScript, Three.js og WebGL2, bygget med Vite. Filene omfatter HTML, CSS, JavaScript, TypeScript og JSON. For å bygge på nytt trengs Node.js 22.12 eller nyere og npm. For å spille trengs ingenting av dette.
Prosjektet har fire kommandoer, og veiledningen forklarer hver av dem:
- npm run levels sjekker nivåfilene dine før du bygger.
- npm test kjører testene.
- npm run typecheck fanger typefeil i TypeScript.
- npm run build skriver den nye spillmappen.
En nivåsjekker betyr mer enn det høres ut som. Parkeringspuslespill feiler på stille måter: et brett som ikke kan løses, en passasjer uten en matchende bil. Å kjøre sjekken før hver bygging er billigere enn å få vite om det fra spillerne.
Hva du bør endre først i en mal for parkeringspuslespill
Vi foreslår å starte med disse fire endringene, i denne rekkefølgen.
1. Navn, logo og merkevare
HTML-tittelen og merkevareinnstillingene ligger i kildeprosjektet, med logofilene i public/ og lyden i sin egen mappe. Erstatt filer og behold de samme stiene, og bygg deretter på nytt. Hvitmerking er tillatt: din merkevare eller din kundes erstatter vår.
2. Nivåer
Filene for nivåoppsett ligger i source/. Rediger dem, valider med npm run levels, bygg på nytt og last opp. Veiledningen har filkartet, så du trenger ikke lete i koden etter et brett.
3. Grensesnittekst og språk
Grensesnittteksten ligger i språkfiler. Hvis publikummet ditt snakker ett av de 14 språkene, les gjennom hver skjerm på det språket én gang, siden noen få ord vanligvis er verdt å justere for merkevarens tone.
4. Spillinnstillinger
Spillinnstillingene holdes i konfigurasjonsfiler i stedet for spredt i koden. Endre én verdi om gangen, og spill noen nivåer etter hver endring.
- Ta sikkerhetskopi av den originale pakken.
- Endre merkevarefilene, og behold stiene deres.
- Rediger eller legg til nivåer, og kjør npm run levels.
- Kjør npm test og npm run build.
- Erstatt hele den hostede game/-mappen, ikke enkeltfiler.
- Test på telefonene og nettleserne spillerne bruker.
Hosting, innbygging og appbutikker
Last opp innholdet i game/ til en statisk HTTP(S)-host og åpne adressen. Ingen PHP, database, konto eller Node.js-server trengs for å spille. Det fungerer i en undermappe eller i en iframe på din egen side, og veiledningen inneholder et eksempel på iframe-kode. Gi iframen nok høyde, og behold nettleserlagring aktivert hvis fremdriften skal overleve en oppdatering av siden.
Å åpne index.html rett fra disk støttes ikke; filen må serveres over HTTP(S). Nettleseren trenger JavaScript, ES-moduler og WebGL2. Spillerne trykker på berøringsskjermer og klikker på datamaskin, og modusen Low graphics (lav grafikk) under Settings sparer batteri på eldre telefoner.
Pakken inneholder ikke et nativt app-prosjekt. Hvis du vil ha spillet i en appbutikk, koblet til en portal-SDK eller installert på serveren din, er det en egen tjeneste som vi gir tilbud på per prosjekt.
Be om et tilbud på endringer, hosting eller en appversjon
Hva denne utgaven ikke inkluderer
Beep Out er for én spiller og bruker lokale data. Fremdrift, rekorder og innstillinger ligger i spillerens nettleser. Det finnes ingen flerspiller på nett, ingen ledertavle på nett eller skyrekorder, ingen annonse-SDK og ingen portal-SDK. Native apper, hosting og hostede tjenester er ikke en del av pakken.
For mange nettsteder er det riktig form: ingenting å vedlikeholde på en server, og ingen spillerdata som forlater nettleseren. Trenger du ledertavle eller annonser, planlegg for det arbeidet før lansering i stedet for etter.
Lisens, støtte og pris i ett avsnitt
Ett kjøp gir en evigvarende, ikke-eksklusiv lisens til å bruke utgaven i ett sluttprodukt, ditt eller én kundes. Spillerne kan få tilgang gratis eller gjennom annonseinntekter. Du kan endre koden, grafikken og lyden i det produktet og erstatte vårt navn og logo, men du kan ikke videreselge eller dele malen, kildekoden eller ressursene alene. Støtten varer i 6 måneder, eller 12 med tillegget i kassen, og dekker installasjon og bruk av filene samt retting av feil som kan reproduseres. Listeprisen er $35. Frem til 30. november 2026 gir en Black Friday-kampanje 15 % rabatt på alle maler, så Beep Out koster $29,75, og fra 1. desember går prisene tilbake til listepris.
Les hele lisens- og støttevilkårene
Vanlige spørsmål
Trenger jeg en server eller en database?
Nei. Last opp innholdet i game/ til en statisk HTTP(S)-host og åpne index.html via den adressen. Fremdrift og rekorder lagres i spillerens nettleser.
Kan jeg legge til egne parkeringsnivåer?
Ja. Rediger nivåfilene i source/, valider dem med npm run levels, bygg på nytt og erstatt den hostede game/-mappen med det nye resultatet.
Fungerer trafikkpuslespillet på telefoner?
Ja. Spillerne trykker på kjøretøyene på berøringsskjermer og klikker på datamaskin. Nettleseren må støtte WebGL2, og innstillingen for lav grafikk hjelper eldre enheter. Test på dine egne telefoner før lansering.
Kan jeg legge spillet inn i en egen side?
Ja. Host det i en hvilken som helst mappe og bygg det inn med en iframe. Veiledningen inneholder et eksempel på kode.
Er annonser eller nettbaserte poeng inkludert?
Nei. Utgaven har ingen annonse-SDK, nettbasert ledertavle eller flerspiller. Å legge det til er tilpasset arbeid, som gis tilbud på per prosjekt.
Kan jeg bruke én lisens for to kunder?
Nei. Én lisens dekker ett sluttprodukt. En andre kunde trenger en andre lisens, og flere maler i samme bestilling gir rabatt på hver lisens.
Beslektede puslespillmaler
Hvis publikummet ditt liker sortering mer enn trafikk, er Mochi Monsters et fargesorteringspuslespill med 60 nivåer i tre verdener og en Endless-modus (endeløs), $39 til listepris. Vil du ha en kortere spilløkke, er Gridspark et 8×8 blokkpuslespill med et lynraskt ZAP-trekk og en fast daglig utfordring, $29 til listepris. Begge følger med lesbar kildekode og 14 språk i grensesnittet.
Se Mochi Monsters, fargesorteringspuslespillet
Se Gridspark, blokkpuslespillet
Å kjøpe to eller flere maler i samme bestilling gir lavere pris per lisens: 5 % rabatt for to, 10 % for tre, 15 % for fire og 20 % for fem eller flere.