Πηγαίος κώδικας παιχνιδιού parking puzzle: μέσα στο Beep Out

Αν ψάχνετε πηγαίο κώδικα για parking puzzle, η σύντομη απάντηση είναι η εξής: το Beep Out είναι ένα έτοιμο τρισδιάστατο παζλ κυκλοφορίας για τον browser με 30 επίπεδα, έτοιμο build για ανέβασμα και το επεξεργάσιμο έργο TypeScript από πίσω, με 35 $. Ο οδηγός αυτός ανοίγει το πακέτο και δείχνει σε τι χρησιμεύει κάθε μέρος του.

Τα παιχνίδια parking jam φαίνονται απλά, γι' αυτό ένα κακό γρήγορα αποκαλύπτεται. Οι κανόνες πρέπει να διαβάζονται με μια ματιά, η σειρά των επιπέδων πρέπει να διδάσκει, και ο κώδικας πρέπει να σας αφήνει να προσθέτετε δικές σας πίστες χωρίς να χαλάνε οι παλιές. Αυτά τα τρία εξετάζουμε εδώ, μαζί με τη φιλοξενία, την άδεια και όσα δεν περιλαμβάνει η έκδοση.

Τι περιέχει το πακέτο πηγαίου κώδικα parking puzzle

Το Beep Out πωλείται ως Local Browser Edition, έκδοση 1.1.0. Το κατέβασμα έχει δύο μέρη: ένα παιχνίδι που μπορείτε να φιλοξενήσετε σήμερα και ένα έργο που μπορείτε να αλλάξετε.

• Ένα έτοιμο για ανέβασμα φάκελο game/ με όλα τα 30 επίπεδα.
• Αναγνώσιμο JavaScript, CSS και δεδομένα για το runtime, ώστε να βλέπετε τι τρέχει ο browser.
• Τον πηγαίο κώδικα TypeScript για developers, με τα assets του παιχνιδιού και τα τεστ.
• Εικονογραφημένο εγχειρίδιο στα αγγλικά και τα πορτογαλικά, που καλύπτει εγκατάσταση, χάρτη αρχείων, προσαρμογή, αντιμετώπιση προβλημάτων και FAQ.
• Σημειώσεις άδειας για εξαρτήσεις και γραμματοσειρές.

Η διεπαφή υπάρχει σε 14 γλώσσες: αγγλικά, πορτογαλικά, ισπανικά, γαλλικά, γερμανικά, ιταλικά, ολλανδικά, πολωνικά, τουρκικά, ρωσικά, ινδονησιακά, ιαπωνικά, κορεατικά και απλοποιημένα κινέζικα. Το ίδιο το εγχειρίδιο είναι μόνο στα αγγλικά και τα πορτογαλικά, κάτι που έχει σημασία αν ο developer σας δεν διαβάζει ούτε τα δύο.

Ανοίξτε τη σελίδα του Beep Out και παίξτε την επίδειξη

Πώς λειτουργεί το παζλ κυκλοφορίας, κανόνα προς κανόνα

Κάθε όχημα έχει στη στέγη του ένα βέλος που δείχνει την έξοδό του. Πατήστε ή κάντε κλικ σε ένα αυτοκίνητο του οποίου ο δρόμος μπροστά είναι ελεύθερος και φεύγει. Αν επιλέξετε ένα μπλοκαρισμένο, πέφτει πάνω στην κίνηση, άρα η σειρά των κινήσεων καθορίζει το επίπεδο.

Από το επίπεδο 4 μια ουρά επιβατών περιμένει στη στάση. Ένα όχημα μπορεί να φύγει μόνο όταν το χρώμα του ταιριάζει με τον επόμενο επιβάτη. Ένα ελεύθερο αυτοκίνητο λάθος χρώματος παρκάρει σε θέση και φεύγει μόνο του όταν έρθει ο επιβάτης του. Ο χώρος είναι μικρός, άρα πολλά λάθος χρώματα τον γεμίζουν, και ο παίκτης πρέπει να σχεδιάζει αρκετές κινήσεις μπροστά. Αυτό το δεύτερο επίπεδο μετατρέπει ένα απλό μποτιλιάρισμα σε παζλ ακολουθίας.

Η οθόνη παιχνιδιού έχει hint (υπόδειξη), undo (αναίρεση) και restart (επανεκκίνηση). Η ολοκλήρωση ενός επιπέδου χωρίς μπλοκαρισμένα κλικ, υποδείξεις ή undo δίνει ένα Clean Clear (καθαρό ξεκαθάρισμα), και ένας προαιρετικός καλύτερος χρόνος ανά επίπεδο αποθηκεύεται στον browser. Τα ολοκληρωμένα επίπεδα ξεκλειδώνουν πέντε στυλ βαφής στο Garage (γκαράζ). Οι βαφές είναι διακοσμητικές: όλα τα αυτοκίνητα παίζουν το ίδιο.

Πώς είναι οργανωμένος ο κώδικας

Υπάρχουν δύο σημεία εργασίας και καλό είναι να τα κρατάτε χωριστά. Ο φάκελος game/ είναι το έτοιμο αποτέλεσμα: ανεβάζετε και παίζει. Το έργο developer είναι όπου γίνονται οι αλλαγές: επίπεδα, ρυθμίσεις, κείμενα, λογότυπα και αρχεία ήχου. Μετά από κάθε αλλαγή κάνετε build και αντικαθιστάτε τον φιλοξενούμενο φάκελο game/ με το πλήρες νέο αποτέλεσμα.

Η τεχνολογική βάση είναι TypeScript, Three.js και WebGL2, με build μέσω Vite. Τα αρχεία περιλαμβάνουν HTML, CSS, JavaScript, TypeScript και JSON. Για build χρειάζεται Node.js 22.12 ή νεότερο και npm. Για να παίξετε, δεν χρειάζεται τίποτα από αυτά.

Το έργο έχει τέσσερις εντολές, και το εγχειρίδιο εξηγεί καθεμία:

• Το npm run levels ελέγχει τα αρχεία επιπέδων πριν από το build.
• Το npm test τρέχει τα τεστ.
• Το npm run typecheck εντοπίζει σφάλματα τύπων στο TypeScript.
• Το npm run build γράφει τον νέο φάκελο παιχνιδιού.

Ο έλεγχος επιπέδων έχει μεγαλύτερη σημασία απ' όσο ακούγεται. Τα παζλ στάθμευσης αποτυγχάνουν σιωπηλά: μια πίστα που δεν λύνεται, ένας επιβάτης χωρίς ταιριαστό αυτοκίνητο. Το να τρέχετε τον έλεγχο πριν από κάθε build κοστίζει λιγότερο από το να το μάθετε από τους παίκτες.

Τι να αλλάξετε πρώτα σε ένα πρότυπο parking puzzle

Προτείνουμε να ξεκινήσετε με αυτές τις τέσσερις αλλαγές, με αυτή τη σειρά.

1. Όνομα, λογότυπο και branding

Ο τίτλος της HTML και οι ρυθμίσεις brand βρίσκονται στο έργο πηγαίου κώδικα, με τα αρχεία λογοτύπου στο public/ και τον ήχο στον δικό του φάκελο. Αντικαταστήστε αρχεία κρατώντας τις ίδιες διαδρομές, και μετά κάντε build. Το white label (λευκή ετικέτα) επιτρέπεται: το δικό σας brand ή του πελάτη σας αντικαθιστά το δικό μας.

2. Επίπεδα

Τα αρχεία δημιουργίας επιπέδων βρίσκονται στο source/. Επεξεργαστείτε τα, επικυρώστε με npm run levels, κάντε build και ανεβάστε. Το εγχειρίδιο έχει τον χάρτη αρχείων, οπότε δεν χρειάζεται να ψάχνετε στον κώδικα για να βρείτε μια πίστα.

3. Κείμενα διεπαφής και γλώσσες

Τα κείμενα της διεπαφής βρίσκονται σε αρχεία γλωσσών. Αν το κοινό σας μιλά μία από τις 14 γλώσσες, διαβάστε μία φορά κάθε οθόνη σε αυτή τη γλώσσα, αφού συνήθως αξίζει να προσαρμόσετε μερικές λέξεις για τη φωνή του brand σας.

4. Ρυθμίσεις παιχνιδιού

Οι ρυθμίσεις του παιχνιδιού φυλάσσονται σε αρχεία ρυθμίσεων και όχι διάσπαρτες στον κώδικα. Αλλάξτε μία τιμή τη φορά και παίξτε μερικά επίπεδα μετά από κάθε αλλαγή.

1. Κρατήστε αντίγραφο ασφαλείας του αρχικού πακέτου.
2. Αλλάξτε τα αρχεία brand κρατώντας τις διαδρομές τους.
3. Επεξεργαστείτε ή προσθέστε επίπεδα και τρέξτε npm run levels.
4. Τρέξτε npm test και npm run build.
5. Αντικαταστήστε ολόκληρο τον φιλοξενούμενο φάκελο game/, όχι μεμονωμένα αρχεία.
6. Δοκιμάστε στα τηλέφωνα και τους browsers που χρησιμοποιούν οι παίκτες σας.

Φιλοξενία, ενσωμάτωση και app stores

Ανεβάστε το περιεχόμενο του game/ σε οποιαδήποτε στατική φιλοξενία HTTP(S) και ανοίξτε τη διεύθυνσή του. Δεν χρειάζεται PHP, βάση δεδομένων, λογαριασμός ή διακομιστής Node.js για να παίξει. Λειτουργεί σε υποφάκελο ή μέσα σε iframe της δικής σας σελίδας, και το εγχειρίδιο περιλαμβάνει ένα παράδειγμα iframe. Δώστε στο iframe αρκετό ύψος και κρατήστε την αποθήκευση του browser ενεργή αν η πρόοδος πρέπει να επιβιώνει από ανανέωση.

Το άνοιγμα του index.html απευθείας από τον δίσκο δεν υποστηρίζεται· πρέπει να σερβίρεται μέσω HTTP(S). Ο browser χρειάζεται JavaScript, ES modules και WebGL2. Οι παίκτες πατούν στις οθόνες αφής και κάνουν κλικ στον υπολογιστή, και οι Ρυθμίσεις έχουν τη λειτουργία Low graphics mode (λειτουργία χαμηλών γραφικών) που εξοικονομεί μπαταρία σε παλιότερα τηλέφωνα.

Το πακέτο δεν περιλαμβάνει έργο εγγενούς εφαρμογής. Αν θέλετε το παιχνίδι σε app store, συνδεδεμένο με SDK πύλης ή εγκατεστημένο στον διακομιστή σας, είναι ξεχωριστή υπηρεσία που προσφέρουμε ανά έργο.

Ζητήστε προσφορά για αλλαγές, φιλοξενία ή έκδοση εφαρμογής

Τι αφήνει έξω αυτή η έκδοση

Το Beep Out είναι για έναν παίκτη με τοπικά δεδομένα. Η πρόοδος, οι εγγραφές και οι ρυθμίσεις μένουν στον browser του παίκτη. Δεν υπάρχει online multiplayer, online κατάταξη ή εγγραφές στο cloud, κανένα SDK διαφημίσεων και κανένα SDK πύλης. Εγγενείς εφαρμογές, φιλοξενία και φιλοξενούμενες υπηρεσίες δεν περιλαμβάνονται στο πακέτο.

Για πολλούς ιστότοπους αυτή είναι η σωστή μορφή: τίποτα να συντηρείτε σε διακομιστή και κανένα δεδομένο παίκτη δεν φεύγει από τον browser. Αν χρειάζεστε κατάταξη ή διαφημίσεις, προγραμματίστε τη δουλειά πριν από την κυκλοφορία και όχι μετά.

Άδεια, υποστήριξη και τιμή σε μία παράγραφο

Με μία αγορά παίρνετε άδεια διαρκή και μη αποκλειστική για να χρησιμοποιήσετε την έκδοση σε ένα τελικό προϊόν, δικό σας ή ενός πελάτη. Οι παίκτες μπορούν να το έχουν δωρεάν ή μέσω διαφημίσεων. Μπορείτε να αλλάξετε τον κώδικα, τα γραφικά και τον ήχο μέσα σε αυτό το προϊόν και να βάλετε το δικό σας όνομα και λογότυπο, αλλά δεν μπορείτε να μεταπωλήσετε ή να μοιραστείτε το πρότυπο, τον πηγαίο κώδικα ή τα assets του μόνα τους. Η υποστήριξη διαρκεί 6 μήνες, ή 12 με την επέκταση στο ταμείο, και καλύπτει εγκατάσταση και χρήση των αρχείων και διόρθωση αναπαραγώγιμων σφαλμάτων. Η κανονική τιμή είναι 35 $· έως τις 30 Νοεμβρίου 2026 μια προσφορά Black Friday κάνει έκπτωση 15% σε κάθε πρότυπο, άρα το Beep Out κοστίζει 29,75 $, και από την 1η Δεκεμβρίου οι τιμές επιστρέφουν στην κανονική.

Διαβάστε τους πλήρεις όρους άδειας και υποστήριξης

Συχνές ερωτήσεις

Χρειάζομαι διακομιστή ή βάση δεδομένων;

Όχι. Ανεβάστε το περιεχόμενο του game/ σε στατική φιλοξενία HTTP(S) και ανοίξτε το index.html μέσω αυτής της διεύθυνσης. Η πρόοδος και οι εγγραφές αποθηκεύονται στον browser του παίκτη.

Μπορώ να προσθέσω δικά μου επίπεδα parking;

Ναι. Επεξεργαστείτε τα αρχεία δημιουργίας επιπέδων στο source/, επικυρώστε τα με npm run levels, κάντε build και αντικαταστήστε τον φιλοξενούμενο φάκελο game/ με το νέο αποτέλεσμα.

Λειτουργεί το παζλ κυκλοφορίας στα τηλέφωνα;

Ναι. Οι παίκτες πατούν τα οχήματα σε οθόνες αφής και κάνουν κλικ στον υπολογιστή. Ο browser πρέπει να υποστηρίζει WebGL2, και η ρύθμιση Low graphics βοηθά σε παλιότερες συσκευές. Δοκιμάστε στα δικά σας τηλέφωνα πριν την κυκλοφορία.

Μπορώ να βάλω το παιχνίδι μέσα στη δική μου σελίδα;

Ναι. Φιλοξενήστε το σε οποιονδήποτε φάκελο και ενσωματώστε το με iframe. Το εγχειρίδιο περιλαμβάνει ένα παράδειγμα.

Περιλαμβάνονται διαφημίσεις ή online βαθμολογίες;

Όχι. Η έκδοση δεν έχει SDK διαφημίσεων, online κατάταξη ή multiplayer. Η προσθήκη τους είναι προσαρμοσμένη εργασία, με προσφορά ανά έργο.

Μπορώ να χρησιμοποιήσω μία άδεια για δύο πελάτες;

Όχι. Μία άδεια καλύπτει ένα τελικό προϊόν. Ένας δεύτερος πελάτης χρειάζεται δεύτερη άδεια, και πολλά πρότυπα σε μία παραγγελία παίρνουν έκπτωση πακέτου.

Σχετικά παζλ πρότυπα

Αν το κοινό σας προτιμά την ταξινόμηση από την κυκλοφορία, το Mochi Monsters είναι ένα παζλ ταξινόμησης χρωμάτων (color sort) με 60 επίπεδα σε τρεις κόσμους και λειτουργία Endless mode (ατελείωτη λειτουργία), 39 $ στην κανονική τιμή. Αν θέλετε πιο σύντομο κύκλο συνεδρίας, το Gridspark είναι ένα παζλ μπλοκ 8×8 με κίνηση αστραπής ZAP και καθημερινή πρόκληση, 29 $ στην κανονική τιμή. Και τα δύο έρχονται με αναγνώσιμο πηγαίο κώδικα και 14 γλώσσες διεπαφής.

Δείτε το Mochi Monsters, το παζλ ταξινόμησης χρωμάτων

Δείτε το Gridspark, το παζλ μπλοκ

Η αγορά δύο ή περισσότερων προτύπων στην ίδια παραγγελία μειώνει κάθε άδεια: 5% έκπτωση για δύο, 10% για τρία, 15% για τέσσερα και 20% για πέντε ή περισσότερα.

Πάρτε τον πηγαίο κώδικα του παζλ στάθμευσης Beep Out