Broncode van een parkeerpuzzelspel: wat zit er in Beep Out
Wat het Beep Out-pakket bevat, hoe het TypeScript-project is opgebouwd en wat een koper meestal als eerste aanpast.
Als je op zoek bent naar broncode van een parkeerpuzzelspel, is het korte antwoord dit: Beep Out is een af 3D-verkeerspuzzel voor de browser, met 30 levels, een build die je direct kunt uploaden en het bewerkbare TypeScript-project erachter, voor $35. Deze gids opent het pakket en laat zien waar elk onderdeel voor dient.
Parkeerpuzzels lijken simpel, en daardoor valt een zwak exemplaar snel op. De regels moeten in één oogopslag duidelijk zijn, de levelvolgorde moet leren, en de code moet je toestaan eigen borden toe te voegen zonder de oude te breken. Naar die drie dingen kijken we hier, samen met hosting, de licentie en wat deze editie niet bevat.
Wat het pakket broncode van het parkeerpuzzelspel bevat
Beep Out wordt verkocht als de Local Browser Edition, versie 1.1.0. Het download bestaat uit twee delen: een spel dat je vandaag nog kunt hosten en een project dat je kunt aanpassen.
- Een kant-en-klare map game/ met alle 30 levels.
- Leesbare JavaScript voor de runtime, CSS en data, zodat je ziet wat de browser uitvoert.
- De TypeScript-broncode voor ontwikkelaars, met de spelbestanden en de tests.
- Een geïllustreerde handleiding in het Engels en Portugees over installatie, de bestandsindeling, aanpassingen, probleemoplossing en een FAQ.
- Licentievermeldingen voor afhankelijkheden en lettertypen.
De interface komt in 14 talen: Engels, Portugees, Spaans, Frans, Duits, Italiaans, Nederlands, Pools, Turks, Russisch, Indonesisch, Japans, Koreaans en vereenvoudigd Chinees. De handleiding zelf is alleen in het Engels en Portugees, wat ertoe doet als je ontwikkelaar geen van beide spreekt.
Open de Beep Out-pagina en speel de demo
Hoe de verkeerspuzzel werkt, regel voor regel
Elk voertuig heeft op het dak een pijl die aangeeft waar het uitrijdt. Tik of klik op een auto waarvan de weg vooruit vrij is, en hij rijdt weg. Kies je een geblokkeerde, dan botst hij tegen het verkeer, dus de volgorde van de zetten bepaalt het level.
Vanaf level 4 wacht er een rij passagiers bij de bushalte. Een voertuig kan alleen vertrekken als zijn kleur past bij de volgende passagier. Een vrije auto van de verkeerde kleur parkeert op een plek en vertrekt vanzelf zodra zijn passagier aan de beurt is. De parkeerplaats is klein, dus te veel verkeerde kleuren vullen hem, en spelers moeten meerdere zetten vooruit plannen. Die tweede laag maakt van een gewone file een volgordepuzzel.
Het speelscherm heeft hint, ongedaan maken en opnieuw beginnen. Een level afronden zonder geblokkeerde tikken, hints of ongedaan maken geeft een Clean Clear, en een optionele beste tijd per level wordt in de browser bewaard. Afgeronde levels ontgrendelen vijf verfstijlen in de Garage. De verf is cosmetisch: elke auto speelt hetzelfde.
Hoe de code is georganiseerd
Er zijn twee plekken om in te werken, en het loont om ze gescheiden te houden. De map game/ is de gebouwde uitvoer: upload die en het speelt. Het ontwikkelproject is waar wijzigingen gebeuren: levels, instellingen, tekst, logo's en audiobestanden. Na een wijziging bouw je opnieuw en vervang je de gehoste map game/ door de volledige nieuwe uitvoer.
De stack is TypeScript, Three.js en WebGL2, gebouwd met Vite. De bestanden zijn HTML, CSS, JavaScript, TypeScript en JSON. Voor het opnieuw bouwen heb je Node.js 22.12 of nieuwer en npm nodig. Spelen heeft niets van dat alles nodig.
Het project bevat vier commando's, en de handleiding legt elk ervan uit:
- npm run levels controleert je levelbestanden vóór je bouwt.
- npm test draait de tests.
- npm run typecheck vindt typefouten in de TypeScript.
- npm run build schrijft de nieuwe spelmap.
Een levelcontrole is belangrijker dan het lijkt. Parkeerpuzzels falen op stille manieren: een bord dat niet op te lossen is, of een passagier zonder passende auto. De controle vóór elke build kost minder dan dat spelers je erover moeten vertellen.
Wat je als eerste aanpast in een parkeerpuzzel-template
We stellen voor om met deze vier wijzigingen te beginnen, in deze volgorde.
1. Naam, logo en huisstijl
De HTML-titel en de merkinstellingen staan in het broncodeproject, de logobestanden in public/ en de audio in een eigen map. Vervang bestanden met behoud van dezelfde paden en bouw daarna opnieuw. Witlabel is toegestaan: je eigen merk of dat van je klant vervangt het onze.
2. Levels
De bestanden om levels te maken staan in source/. Pas ze aan, valideer met npm run levels, bouw opnieuw en upload. De handleiding bevat de bestandsindeling, zodat je niet door de code hoeft te zoeken om een bord te vinden.
3. Interfacetekst en talen
De interfacetekst staat in taalbestanden. Spreekt je publiek een van de 14 talen, lees dan elk scherm eenmaal in die taal, want een paar woorden loont het meestal aan te passen aan de toon van je merk.
4. Spelinstellingen
Spelinstellingen staan in configuratiebestanden en niet verspreid door de code. Wijzig één waarde tegelijk en speel na elke wijziging een paar levels.
- Maak een back-up van het originele pakket.
- Wijzig de merkbestanden en behoud de paden.
- Bewerk of voeg levels toe en draai npm run levels.
- Draai npm test en npm run build.
- Vervang de hele gehoste map game/, niet losse bestanden.
- Test op de telefoons en browsers die je spelers gebruiken.
Hosting, insluiten en app-winkels
Upload de inhoud van game/ naar elke statische HTTP(S)-host en open het adres. Er is geen PHP, database, account of Node.js-server nodig om te spelen. Het werkt in een submap of in een iframe op je eigen pagina, en de handleiding bevat een voorbeeld van een iframe-snippet. Geef het iframe voldoende hoogte, en houd browseropslag ingeschakeld als de voortgang een herlaadbeurt moet overleven.
index.html rechtstreeks vanaf de schijf openen wordt niet ondersteund; het moet via HTTP(S) worden aangeboden. De browser heeft JavaScript, ES-modules en WebGL2 nodig. Spelers tikken op touchschermen en klikken op de desktop, en de instellingen hebben een modus Lage grafische kwaliteit die de batterij spaart op oudere telefoons.
Het pakket bevat geen native app-project. Wil je het spel in een app-winkel, gekoppeld aan een portal-SDK of geïnstalleerd op je eigen server, dan is dat een aparte dienst die we per project offreren.
Vraag een offerte aan voor wijzigingen, hosting of een app-versie
Wat deze editie niet bevat
Beep Out is een spel voor één speler met lokale gegevens. Voortgang, records en instellingen blijven in de browser van de speler. Er is geen online multiplayer, geen online ranglijst of cloudrecords, geen advertentie-SDK en geen portal-SDK. Native apps, hosting en gehoste diensten vallen buiten het pakket.
Voor veel sites is dat de juiste vorm: niets om op een server te onderhouden en geen spelersgegevens die de browser verlaten. Heb je een ranglijst of advertenties nodig, plan dat werk dan vóór de lancering en niet erna.
Licentie, support en prijs in één alinea
Eén aankoop geeft een eeuwigdurende, niet-exclusieve licentie om de editie te gebruiken in één eindproduct, van jou of van één klant. Spelers kunnen het gratis spelen of via advertentie-inkomsten. Je mag de code, kunst en audio binnen dat product wijzigen en onze naam en ons logo vervangen, maar je mag de template, de broncode of de assets niet afzonderlijk doorverkopen of delen. Support loopt 6 maanden, of 12 met de extensie bij het afrekenen, en omvat het installeren en gebruiken van de bestanden en het oplossen van reproduceerbare fouten. De lijstprijs is $35. Tot 30 november 2026 geldt een Black Friday-actie van 15% op elke template, dus Beep Out kost $29,75. Vanaf 1 december gaan de prijzen terug naar de lijstprijs.
Lees de volledige licentie- en supportvoorwaarden
Veelgestelde vragen
Heb ik een server of een database nodig?
Nee. Upload de inhoud van game/ naar een statische HTTP(S)-host en open index.html via dat adres. Voortgang en records worden bewaard in de browser van de speler.
Kan ik mijn eigen parkeerlevels toevoegen?
Ja. Bewerk de bestanden om levels te maken in source/, valideer ze met npm run levels, bouw opnieuw en vervang de gehoste map game/ door de nieuwe uitvoer.
Werkt de verkeerspuzzel op telefoons?
Ja. Spelers tikken op voertuigen op touchschermen en klikken op de desktop. De browser moet WebGL2 ondersteunen, en een instelling voor lage grafische kwaliteit helpt oudere toestellen. Test op je eigen telefoons vóór de lancering.
Kan ik het spel in mijn eigen pagina opnemen?
Ja. Host het in een willekeurige map en voeg het in met een iframe. De handleiding bevat een voorbeeldsnippet.
Zijn advertenties of online scores inbegrepen?
Nee. De editie heeft geen advertentie-SDK, online ranglijst of multiplayer. Die toevoegen is maatwerk en wordt per project geofferd.
Kan ik één licentie voor twee klanten gebruiken?
Nee. Eén licentie dekt één eindproduct. Een tweede klant heeft een tweede licentie nodig, en meerdere templates in één bestelling krijgen een bundelkorting.
Verwante puzzel-templates
Als je publiek meer van sorteren houdt dan van verkeer, is Mochi Monsters een kleursorteerpuzzel met 60 levels in drie werelden en een Endless-modus, $39 van de lijstprijs. Wil je een kortere speelcyclus, dan is Gridspark een blokpuzel van 8×8 met een bliksemzet, ZAP, en een dagelijkse uitdaging met vaste seed, $29 van de lijstprijs. Beide komen met leesbare broncode en 14 interfacetalen.
Bekijk Mochi Monsters, de kleursorteerpuzzel
Bekijk Gridspark, de blokpuzel
Wie twee of meer templates in dezelfde bestelling koopt, krijgt een lagere prijs per licentie: 5% korting voor twee, 10% voor drie, 15% voor vier en 20% voor vijf of meer.