Parking Puzzle Game Source Code: Inside a 30-Level 3D Traffic Puzzle
What the Beep Out package holds, how its TypeScript project is laid out, and what a buyer usually edits first.
If you are looking for parking puzzle game source code, the short answer is this: Beep Out is a finished 3D traffic puzzle for the browser with 30 levels, a ready-to-upload build and the editable TypeScript project behind it, for $35. This guide opens the package and shows what each part is for.
Parking jam games look simple, which is why a weak one gets found out fast. The rules have to be readable at a glance, the level order has to teach, and the code has to let you add your own boards without breaking the old ones. Those are the three things we look at here, along with hosting, the licence and what the edition does not include.
What the parking puzzle game source code package contains
Beep Out is sold as a Local Browser Edition, version 1.1.0. The download has two halves: a game you can host today and a project you can change.
- A ready-to-upload game/ folder with all 30 levels.
- Readable runtime JavaScript, CSS and data, so you can see what the browser runs.
- The TypeScript developer source, with the game assets and tests.
- An illustrated manual in English and Portuguese covering installation, the file map, customisation, troubleshooting and an FAQ.
- Dependency and font licence notices.
The interface comes in 14 languages: English, Portuguese, Spanish, French, German, Italian, Dutch, Polish, Turkish, Russian, Indonesian, Japanese, Korean and Simplified Chinese. The manual itself is in English and Portuguese only, which matters if your developer reads neither.
Open the Beep Out page and play the demo
How the traffic puzzle works, rule by rule
Every vehicle has an arrow on its roof that shows its exit. Tap or click a car whose road ahead is clear and it drives away. Pick one that is blocked and it bumps into traffic, so the order of moves decides the level.
From level 4 a queue of passengers waits at the bus stop. A vehicle can only leave when its colour matches the next passenger. A free car of the wrong colour parks in a bay and leaves on its own when its passenger comes up. The lot is small, so too many wrong colours fill it, and players have to plan several moves ahead. That second layer is what turns a plain jam into a sequencing puzzle.
The play screen has hint, undo and restart. Finishing a level without blocked taps, hints or undo gives a Clean Clear, and an optional best time per level is stored in the browser. Cleared levels unlock five paint styles in the Garage. Paints are cosmetic: every car plays the same.
How the code is organised
There are two places to work, and it pays to keep them apart. The game/ folder is the built output: upload it and it plays. The developer project is where changes happen: levels, settings, text, logos and audio files. After a change you rebuild and replace the hosted game/ folder with the complete new output.
The stack is TypeScript, Three.js and WebGL2, built with Vite. Files include HTML, CSS, JavaScript, TypeScript and JSON. Rebuilding needs Node.js 22.12 or newer and npm. Playing needs none of that.
The project ships with four commands, and the manual explains each one:
- npm run levels checks your level files before you build.
- npm test runs the tests.
- npm run typecheck catches type errors in the TypeScript.
- npm run build writes the new game folder.
A level checker matters more than it sounds. Parking puzzles fail in quiet ways: a board that cannot be solved, a passenger with no matching car. Running the check before each build is cheaper than hearing about it from players.
What to change first in a parking puzzle template
We suggest starting with these four changes, in this order.
1. Name, logo and branding
The HTML title and brand settings live in the source project, with the logo files in public/ and the audio in its own folder. Replace files while keeping the same paths, then rebuild. White label is allowed: your brand or your client's replaces ours.
2. Levels
The level authoring files are in source/. Edit them, validate with npm run levels, rebuild and upload. The manual has the file map, so you do not need to search the code to find a board.
3. Interface text and languages
Interface text sits in language files. If your audience speaks one of the 14 languages, read every screen in that language once, since a few words are usually worth adjusting for a brand voice.
4. Game settings
Game settings are kept in config files rather than spread through the code. Change one value at a time and play a few levels after each change.
- Back up the original package.
- Change branding files, keeping their paths.
- Edit or add levels and run npm run levels.
- Run npm test and npm run build.
- Replace the whole hosted game/ folder, not single files.
- Test on the phones and browsers your players use.
Hosting, embedding and app stores
Upload the contents of game/ to any static HTTP(S) host and open its address. No PHP, database, account or Node.js server is needed to play. It works in a subfolder or inside an iframe on your own page, and the manual includes an example iframe snippet. Give the iframe enough height and keep browser storage enabled if progress must survive a reload.
Opening index.html straight from disk is not supported; it needs to be served over HTTP(S). The browser needs JavaScript, ES modules and WebGL2. Players tap on touch screens and click on desktop, and Settings has a Low graphics mode that saves battery on older phones.
The package does not include a native app project. If you want the game in an app store, connected to a portal SDK or installed on your server, that is a separate service that we quote per project.
Ask for a quote for changes, hosting or an app version
What this edition leaves out
Beep Out is single-player with local data. Progress, records and settings stay in the player's browser. There is no online multiplayer, no online ranking or cloud records, no advertising SDK and no portal SDK. Native apps, hosting and hosted services are not part of the package.
For many sites that is the right shape: nothing to maintain on a server and no player data leaving the browser. If you need a leaderboard or ads, plan for that work before launch instead of after.
Licence, support and price in one paragraph
One purchase gives a perpetual, non-exclusive licence to use the edition in one end product, yours or one client's. Players can access it free or through advertising monetisation. You may change the code, art and audio inside that product and replace our name and logo, but you may not resell or share the template, its source code or its assets on their own. Support lasts 6 months, or 12 with the extension at checkout, and covers installing and using the files and fixing reproducible defects. The list price is $35; until 30 November 2026 a Black Friday promotion takes 15% off every template, so Beep Out costs $29.75, and from 1 December prices return to list.
Read the full licence and support terms
FAQ
Do I need a server or a database?
No. Upload the contents of game/ to a static HTTP(S) host and open index.html through that address. Progress and records are saved in the player's browser.
Can I add my own parking levels?
Yes. Edit the level authoring files in source/, validate them with npm run levels, rebuild and replace the hosted game/ folder with the new output.
Does the traffic puzzle work on phones?
Yes. Players tap vehicles on touch screens and click on desktop. The browser must support WebGL2, and a Low graphics setting helps older devices. Test on your own phones before launch.
Can I put the game inside my own page?
Yes. Host it in any folder and embed it with an iframe. The manual includes an example snippet.
Are ads or online scores included?
No. The edition has no advertising SDK, online ranking or multiplayer. Adding them is custom work, quoted per project.
Can I use one licence for two clients?
No. One licence covers one end product. A second client needs a second licence, and several templates in one order get a bundle discount.
Related puzzle templates
If your audience likes sorting more than traffic, Mochi Monsters is a color sorting puzzle with 60 levels in three worlds and an Endless mode, $39 at list price. If you want a shorter session loop, Gridspark is an 8×8 block puzzle with a lightning ZAP move and a seeded daily challenge, $29 at list price. Both come with readable source and 14 interface languages.
See Mochi Monsters, the color sort puzzle
See Gridspark, the block puzzle
Buying two or more templates in the same order lowers each licence: 5% off for two, 10% for three, 15% for four and 20% for five or more.