Källkod till parkeringspussel: 30 nivåer i ett 3D-trafikpussel
Vad Beep Out-paketet innehåller, hur dess TypeScript-projekt är uppbyggt och vad en köpare oftast ändrar först.
Letar du efter källkod till parkeringspussel är det korta svaret detta: Beep Out är ett färdigt 3D-trafikpussel för webbläsaren med 30 nivåer, en byggversion som går att ladda upp och det redigerbara TypeScript-projektet bakom den, för 35 USD. Den här guiden öppnar paketet och visar vad varje del är till för.
Parkeringspussel ser enkla ut, och därför upptäcks ett svagt spel snabbt. Reglerna måste gå att läsa av med en blick, nivåordningen måste lära ut spelet och koden måste låta dig lägga till egna brädor utan att de gamla går sönder. Det är de tre sakerna vi tittar på här, tillsammans med hosting, licensen och vad utgåvan inte omfattar.
Vad källkoden till parkeringspusslet innehåller
Beep Out säljs som Local Browser Edition, version 1.1.0. Nedladdningen har två delar: ett spel du kan lägga ut redan idag och ett projekt du kan ändra.
- En färdig mapp game/ att ladda upp, med alla 30 nivåer.
- Läsbar JavaScript, CSS och data som körs i webbläsaren, så att du kan se vad som faktiskt körs.
- TypeScript-källkoden för utvecklare, med spelets tillgångar och tester.
- En illustrerad manual på engelska och portugisiska som täcker installation, filkarta, anpassning, felsökning och en FAQ.
- Licensmeddelanden för beroenden och typsnitt.
Gränssnittet finns på 14 språk: engelska, portugisiska, spanska, franska, tyska, italienska, nederländska, polska, turkiska, ryska, indonesiska, japanska, koreanska och förenklad kinesiska. Manualen finns bara på engelska och portugisiska, vilket spelar roll om din utvecklare inte läser något av dem.
Öppna Beep Out-sidan och spela demon
Hur trafikpusslet fungerar, regel för regel
Varje fordon har en pil på taket som visar dess utfart. Tryck eller klicka på en bil vars väg framåt är fri, så kör den iväg. Väljer du en som är blockerad kör den in i trafiken, så ordningen på dragen avgör nivån.
Från nivå 4 väntar en kö av passagerare vid busshållplatsen. Ett fordon kan bara lämna när dess färg stämmer med nästa passagerare. En ledig bil i fel färg parkerar i en ficka och lämnar av sig själv när dess passagerare kommer fram. Planen är liten, så för många fel färger fyller den, och spelarna måste planera flera drag i förväg. Det andra lagret är det som gör en vanlig trafikkrock till ett pussel om ordning.
Spelskärmen har hint (ledtråd), undo (ångra) och restart (starta om). Att klara en nivå utan blockerade tryck, ledtrådar eller undo ger en Clean Clear (ren rensning), och en valfri bästa tid per nivå sparas i webbläsaren. Avklarade nivåer låser upp fem färgstilar i Garage. Färgerna är kosmetiska: varje bil spelar likadant.
Så är koden organiserad
Det finns två platser att arbeta i, och det lönar sig att hålla dem åtskilda. Mappen game/ är det byggda resultatet: ladda upp den så spelar den. Utvecklarprojektet är där ändringarna görs: nivåer, inställningar, text, logotyper och ljudfiler. Efter en ändring bygger du om och ersätter den utlagda mappen game/ med hela det nya resultatet.
Stacken är TypeScript, Three.js och WebGL2, byggd med Vite. Filerna omfattar HTML, CSS, JavaScript, TypeScript och JSON. För ombyggnad behövs Node.js 22.12 eller nyare och npm. För att spela behövs inget av det.
Projektet levereras med fyra kommandon, och manualen förklarar vart och ett:
- npm run levels kontrollerar nivåfilerna innan du bygger.
- npm test kör testerna.
- npm run typecheck fångar typfel i TypeScript.
- npm run build skriver den nya spelmappen.
Nivåkontrollen är viktigare än den låter. Parkeringspussel går sönder på tysta sätt: en bräda som inte går att lösa, en passagerare utan matchande bil. Att köra kontrollen före varje bygge är billigare än att få höra om felet från spelarna.
Vad du ändrar först i en mall för parkeringspussel
Vi föreslår att du börjar med dessa fyra ändringar, i den här ordningen.
1. Namn, logotyp och varumärke
HTML-titeln och varumärkesinställningarna finns i källprojektet, med logotypfilerna i public/ och ljudet i en egen mapp. Ersätt filer och behåll samma sökvägar, bygg sedan om. White label är tillåtet: ditt varumärke eller din kunds ersätter vårt.
2. Nivåer
Nivåfilerna finns i source/. Redigera dem, validera med npm run levels, bygg om och ladda upp. Manualen har filkartan, så du behöver inte leta i koden efter en bräda.
3. Gränssnittstext och språk
Gränssnittstexten ligger i språkfiler. Om din publik talar ett av de 14 språken bör du läsa igenom varje skärm på det språket en gång, eftersom några ord oftast är värda att justera för din varumärkesröst.
4. Spelinställningar
Spelinställningarna ligger i konfigurationsfiler i stället för utspridda i koden. Ändra ett värde i taget och spela några nivåer efter varje ändring.
- Säkerhetskopiera det ursprungliga paketet.
- Ändra varumärkesfilerna och behåll deras sökvägar.
- Redigera eller lägg till nivåer och kör npm run levels.
- Kör npm test och npm run build.
- Ersätt hela den utlagda mappen game/, inte enskilda filer.
- Testa på de telefoner och webbläsare dina spelare använder.
Hosting, inbäddning och appbutiker
Ladda upp innehållet i game/ till valfri statisk HTTP(S)-hosting och öppna dess adress. Ingen PHP, databas, konto eller Node.js-server behövs för att spela. Det fungerar i en undermapp eller i en iframe på din egen sida, och manualen innehåller ett exempel på iframe-kod. Ge iframen tillräcklig höjd, och låt webbläsarlagringen vara påslagen om framsteg ska överleva en omladdning.
Att öppna index.html direkt från disk stöds inte, den måste serveras över HTTP(S). Webbläsaren behöver JavaScript, ES-moduler och WebGL2. Spelarna trycker på pekskärmar och klickar på dator. Under Settings (inställningar) finns ett Low graphics mode (läge för låg grafik) som sparar batteri på äldre telefoner.
Paketet innehåller inget nativt appprojekt. Vill du ha spelet i en appbutik, kopplat till en portal-SDK eller installerat på din server är det en separat tjänst som vi offererar per projekt.
Begär offert på ändringar, hosting eller en appversion
Vad den här utgåvan utelämnar
Beep Out är för en spelare och sparar data lokalt. Framsteg, rekord och inställningar stannar i spelarens webbläsare. Det finns ingen onlinemultiplayer, ingen onlineranking och inga molnsparade rekord, ingen annons-SDK och ingen portal-SDK. Nativa appar, hosting och hostade tjänster ingår inte i paketet.
För många sajter är det rätt form: inget att underhålla på en server och ingen spelardata som lämnar webbläsaren. Behöver du en topplista eller annonser bör du planera för det arbetet före lansering, inte efter.
Licens, support och pris i ett stycke
Ett köp ger en evig, icke-exklusiv licens att använda utgåvan i en slutprodukt, din eller en kunds. Spelarna kan få tillgång till den gratis eller via annonsintäkter. Du får ändra koden, grafiken och ljudet inom den produkten och ersätta vårt namn och vår logotyp, men du får inte sälja eller dela mallen, dess källkod eller dess tillgångar för sig. Supporten gäller i 6 månader, eller 12 med tillägget i kassan, och omfattar installation och användning av filerna samt rättning av reproducerbara fel. Listpriset är 35 USD. Till och med 30 november 2026 ger en Black Friday-kampanj 15 % rabatt på varje mall, så Beep Out kostar 29,75 USD. Från 1 december återgår priserna till listpris.
Läs hela licens- och supportvillkoren
Vanliga frågor
Behöver jag en server eller en databas?
Nej. Ladda upp innehållet i game/ till en statisk HTTP(S)-hosting och öppna index.html via den adressen. Framsteg och rekord sparas i spelarens webbläsare.
Kan jag lägga till egna parkeringsnivåer?
Ja. Redigera nivåfilerna i source/, validera dem med npm run levels, bygg om och ersätt den utlagda mappen game/ med det nya resultatet.
Fungerar trafikpusslet på telefoner?
Ja. Spelarna trycker på fordon på pekskärmar och klickar på dator. Webbläsaren måste stödja WebGL2, och en inställning för låg grafik hjälper äldre enheter. Testa på dina egna telefoner före lansering.
Kan jag lägga in spelet på min egen sida?
Ja. Lägg det i valfri mapp och bädda in det med en iframe. Manualen innehåller ett exempel.
Ingår annonser eller onlinepoäng?
Nej. Utgåvan har ingen annons-SDK, ingen onlineranking och ingen multiplayer. Att lägga till dem är skräddarsytt arbete som offereras per projekt.
Kan jag använda en licens för två kunder?
Nej. En licens gäller en slutprodukt. En andra kund behöver en egen licens, och flera mallar i samma order ger rabatt på paketet.
Närliggande pusselmallar
Om din publik gillar sortering mer än trafik är Mochi Monsters ett färgsorteringspussel med 60 nivåer i tre världar och ett Endless mode (läge utan slut), 39 USD i listpris. Vill du ha en kortare spelloop är Gridspark ett blockpussel på 8×8 med ett blixtdrag, ZAP, och en daglig utmaning med fast startvärde, 29 USD i listpris. Båda levereras med läsbar källkod och 14 gränssnittsspråk.
Se Mochi Monsters, färgsorteringspusslet
Köper du två eller fler mallar i samma order sänks priset på varje licens: 5 % rabatt för två, 10 % för tre, 15 % för fyra och 20 % för fem eller fler.