Kildekode til parkeringspuslespil: Beep Out med 30 3D-niveauer
Hvad Beep Out-pakken indeholder, hvordan dets TypeScript-projekt er opbygget, og hvad en køber typisk redigerer først.
Hvis du leder efter kildekode til parkeringspuslespil, er det korte svar dette: Beep Out er et færdigt 3D-trafikpuslespil til browseren med 30 niveauer, en build klar til upload og det redigerbare TypeScript-projekt bag, til 35 USD. Denne guide åbner pakken og viser, hvad hver del er til.
Parkeringskø-spil ser enkle ud, og derfor bliver et svagt et hurtigt afsløret. Reglerne skal kunne læses med et blik, rækkefølgen af niveauerne skal lære noget, og koden skal lade dig tilføje egne brætter uden at ødelægge de gamle. Det er de tre ting, vi ser på her, sammen med hosting, licensen og det, udgaven ikke omfatter.
Hvad kildekode til parkeringspuslespil-pakken indeholder
Beep Out sælges som Local Browser Edition, version 1.1.0. Downloaden har to halvdele: et spil, du kan hoste i dag, og et projekt, du kan ændre.
- En færdig game/-mappe, klar til upload, med alle 30 niveauer.
- Læsbar runtime-JavaScript, CSS og data, så du kan se, hvad browseren kører.
- Udviklerens TypeScript-kildekode med spillets assets og tests.
- En illustreret manual på engelsk og portugisisk, der dækker installation, filoversigt, tilpasning, fejlfinding og en FAQ.
- Noter om licenser for afhængigheder og skrifttyper.
Grænsefladen findes på 14 sprog: engelsk, portugisisk, spansk, fransk, tysk, italiensk, hollandsk, polsk, tyrkisk, russisk, indonesisk, japansk, koreansk og forenklet kinesisk. Selve manualen findes kun på engelsk og portugisisk, hvilket har betydning, hvis din udvikler ikke læser nogen af dem.
Åbn Beep Out-siden og spil demoen
Hvordan trafikpuslespillet fungerer, regel for regel
Hvert køretøj har en pil på taget, der viser dets udgang. Tryk eller klik på en bil, hvis vejen foran er fri, så kører den væk. Vælger du en, der er blokeret, kører den ind i trafikken, så rækkefølgen af træk afgør niveauet.
Fra niveau 4 venter en kø af passagerer ved busstoppestedet. Et køretøj kan kun køre, når dets farve matcher den næste passager. En ledig bil i den forkerte farve parkerer i en plads og kører selv, når dens passager kommer op. Pladsen er lille, så for mange forkerte farver fylder den, og spillerne må planlægge flere træk frem. Det andet lag er det, der gør et almindeligt trafikkaos til et rækkefølgepuslespil.
Spilskærmen har hint, undo og restart. Den, der gennemfører et niveau uden blokerede tryk, hints eller undo, får en Clean Clear (ren gennemførelse), og en valgfri bedste tid pr. niveau gemmes i browseren. Gennemførte niveauer låser fem malingsstile op i Garage. Malingerne er kosmetiske: alle biler kører ens.
Sådan er koden organiseret
Der er to steder at arbejde, og det betaler sig at holde dem adskilt. game/-mappen er det færdigbyggede output: upload den, og den spiller. Udviklerprojektet er der, hvor ændringerne sker: niveauer, indstillinger, tekst, logoer og lydfiler. Efter en ændring bygger du igen og erstatter den hostede game/-mappe med det samlede nye output.
Stakken er TypeScript, Three.js og WebGL2, bygget med Vite. Filerne omfatter HTML, CSS, JavaScript, TypeScript og JSON. At bygge igen kræver Node.js 22.12 eller nyere og npm. At spille kræver ingen af delene.
Projektet leveres med fire kommandoer, og manualen forklarer hver enkelt:
- npm run levels kontrollerer dine niveaufiler, før du bygger.
- npm test kører testene.
- npm run typecheck fanger typefejl i TypeScript.
- npm run build skriver den nye spilmappe.
Niveaukontrollen betyder mere, end den lyder. Parkeringspuslespil fejler på stille måder: et bræt, der ikke kan løses, eller en passager uden en matchende bil. At køre kontrollen før hver build er billigere, end at høre om det fra spillerne.
Det skal du ændre først i et parkeringspuslespil-skabelon
Vi foreslår at starte med disse fire ændringer, i denne rækkefølge.
1. Navn, logo og branding
HTML-titlen og brandindstillingerne ligger i kildeprojektet, logofilerne i public/ og lyden i sin egen mappe. Erstat filer, og behold de samme stier, og byg så igen. White label er tilladt: dit brand eller din kundes erstatter vores.
2. Niveauer
Filerne til niveauopbygning ligger i source/. Ret dem, valider med npm run levels, byg igen og upload. Manualen har filoversigten, så du ikke behøver at lede i koden efter et bræt.
3. Grænsefladetekst og sprog
Grænsefladeteksten ligger i sprogfiler. Hvis dit publikum taler et af de 14 sprog, så læs hver skærm på det sprog én gang, for nogle få ord er normalt værd at justere til en brandstemme.
4. Spilindstillinger
Spilindstillingerne ligger i konfigurationsfiler frem for spredt i koden. Ændr én værdi ad gangen, og spil nogle niveauer efter hver ændring.
- Tag en sikkerhedskopi af den originale pakke.
- Ændr brandingfilerne, og behold deres stier.
- Ret eller tilføj niveauer, og kør npm run levels.
- Kør npm test og npm run build.
- Erstat hele den hostede game/-mappe, ikke enkelte filer.
- Test på de telefoner og browsere, dine spillere bruger.
Hosting, indlejring og app-butikker
Upload indholdet af game/ til enhver statisk HTTP(S)-host, og åbn adressen. Der kræves ingen PHP, database, konto eller Node.js-server for at spille. Det virker i en undermappe eller i et iframe på din egen side, og manualen indeholder et eksempel på et iframe-uddrag. Giv iframe'et nok højde, og hold browserlager aktiveret, hvis fremskridt skal overleve en genindlæsning.
Åbning af index.html direkte fra disken understøttes ikke; den skal serveres over HTTP(S). Browseren skal understøtte JavaScript, ES-moduler og WebGL2. Spillerne trykker på touchskærme og klikker på desktop, og under Settings (indstillinger) findes en Low graphics mode, der sparer batteri på ældre telefoner.
Pakken indeholder ikke et native app-projekt. Hvis du vil have spillet i en app-butik, forbundet til en portal-SDK eller installeret på din server, er det en separat ydelse, som vi giver tilbud på pr. projekt.
Bed om et tilbud på ændringer, hosting eller en app-version
Hvad denne udgave udelader
Beep Out er til enkeltspiller med lokale data. Fremskridt, rekorder og indstillinger bliver i spillerens browser. Der er ingen online multiplayer, ingen online-rangliste eller skylagrede rekorder, ingen reklame-SDK og ingen portal-SDK. Native apps, hosting og hostede tjenester indgår ikke i pakken.
For mange sider er det den rigtige form: intet at vedligeholde på en server, og ingen spillerdata forlader browseren. Har du brug for en rangliste eller reklamer, så planlæg det arbejde før lancering i stedet for efter.
Licens, support og pris i ét afsnit
Ét køb giver en evigvarende, ikke-eksklusiv licens til at bruge udgaven i ét slutprodukt, dit eller én kundes. Spillerne kan få adgang gratis eller via reklameindtægter. Du må ændre koden, grafikken og lyden i det produkt og erstatte vores navn og logo, men du må ikke videresælge skabelonen, dens kildekode eller dens assets alene. Support varer 6 måneder, eller 12 med tillægget ved kassen, og dækker installation og brug af filerne samt rettelse af reproducerbare fejl. Listeprisen er 35 USD; indtil 30. november 2026 giver en Black Friday-kampagne 15 % rabat på alle skabeloner, så Beep Out koster 29,75 USD, og fra 1. december vender priserne tilbage til listepris.
Læs de fulde licens- og supportvilkår
Ofte stillede spørgsmål
Har jeg brug for en server eller en database?
Nej. Upload indholdet af game/ til en statisk HTTP(S)-host, og åbn index.html via den adresse. Fremskridt og rekorder gemmes i spillerens browser.
Kan jeg tilføje mine egne parkeringsniveauer?
Ja. Ret niveaufilerne i source/, valider dem med npm run levels, byg igen, og erstat den hostede game/-mappe med det nye output.
Virker trafikpuslespillet på telefoner?
Ja. Spillerne trykker på køretøjer på touchskærme og klikker på desktop. Browseren skal understøtte WebGL2, og en Low graphics-indstilling hjælper ældre enheder. Test på dine egne telefoner før lancering.
Kan jeg lægge spillet inde på min egen side?
Ja. Host det i en hvilken som helst mappe, og indlejr det med et iframe. Manualen indeholder et eksempel.
Er reklamer eller onlinescorer inkluderet?
Nej. Udgaven har ingen reklame-SDK, online-rangliste eller multiplayer. At tilføje dem er skræddersyet arbejde, der prissættes pr. projekt.
Kan jeg bruge én licens til to kunder?
Nej. Én licens dækker ét slutprodukt. En anden kunde kræver en ekstra licens, og flere skabeloner i samme bestilling giver en bundle-rabat.
Beslægtede puslespilsskabeloner
Hvis dit publikum hellere sorterer end kører trafik, er Mochi Monsters et farvesorteringspuslespil med 60 niveauer i tre verdener og en Endless mode, til 39 USD på listepris. Vil du have en kortere spilløkke, er Gridspark et 8×8 blokpuslespil med et lyn-træk, ZAP, og en daglig udfordring med fast seed, til 29 USD på listepris. Begge leveres med læsbar kildekode og 14 grænsefladesprog.
Se Mochi Monsters, farvesorteringspuslespillet
Se Gridspark, blokpuslespillet
Køber du to eller flere skabeloner i samme bestilling, falder prisen pr. licens: 5 % rabat for to, 10 % for tre, 15 % for fire og 20 % for fem eller flere.