Οδηγός

Πηγαίος κώδικας παιχνιδιού ping pong: τα αρχεία του Sunset Rally

Ένα τρισδιάστατο ping pong για τον browser, ανοιχτό αρχείο προς αρχείο: πού βρίσκονται η φυσική, η βαθμολογία, η εκστρατεία και οι τοποθεσίες, και τι να αλλάξετε πρώτα.

Γραφικά του Sunset Rally: ένα κόκκινο ρακέτα και μια μπάλα πάνω από πράσινο τραπέζι πινγκ πονγκ σε βεράντα κήπου στο ηλιοβασίλεμα, κάτω από κερασιές και φανάρια.

Αν χρειάζεστε πηγαίο κώδικα για πινγκ πονγκ που μπορείτε να φιλοξενήσετε και να αλλάξετε, το Sunset Rally είναι ένα έτοιμο τρισδιάστατο πινγκ πονγκ για τον browser με εκστρατεία εννέα αγώνων, τρεις αντιπάλους CPU, εργαστήριο και το πλήρες έργο TypeScript, με 39 $ στην κανονική τιμή. Ο φάκελος παιχνιδιού είναι ήδη χτισμένος και μη συμπιεσμένος, οπότε μπορείτε να τον ανεβάσετε πρώτα και να τον διαβάσετε μετά.

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

Πώς παίζεται το πινγκ πονγκ

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

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

Υπάρχουν τρεις αντίπαλοι CPU με τα δικά τους στυλ: ο υπομονετικός Capi, ο παιχνιδιάρης Nori και ο ακριβής Miso, το καθένα σε Easy (εύκολο), Normal (κανονικό) ή Hard (δύσκολο). Η λειτουργία Training mode (λειτουργία προπόνησης) δίνει έναν συμπαίκτη που επιστρέφει κάθε μπάλα. Μετά από αγώνα, ένα replay (επανάληψη) δείχνει ξανά το αποφασιστικό σημείο.

Παίξτε την επίδειξη του Sunset Rally

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

  • Ένα έτοιμο για ανέβασμα φάκελο game/, ήδη χτισμένο και μη συμπιεσμένο.
  • Το πηγαίο κώδικα TypeScript για developers με το Vite setup του και τα assets του παιχνιδιού, στο source/.
  • Εικονογραφημένα εγχειρίδια στα αγγλικά και τα πορτογαλικά με πραγματικά στιγμιότυπα.
  • Γραμματοσειρές και αρχεία ήχου που συνοδεύουν το παιχνίδι.
  • Σημειώσεις άδειας τρίτων και ένα changelog.

Η τεχνολογία είναι TypeScript, Three.js r184, Vite και WebGL2. Τα αρχεία περιλαμβάνουν HTML, CSS, JavaScript, TypeScript και JSON. Η διεπαφή υπάρχει σε 14 γλώσσες: αγγλικά, πορτογαλικά, ισπανικά, γαλλικά, γερμανικά, ιταλικά, ολλανδικά, πολωνικά, τουρκικά, ρωσικά, ινδονησιακά, ιαπωνικά, κορεατικά και απλοποιημένα κινέζικα. Τα εγχειρίδια είναι μόνο στα αγγλικά και τα πορτογαλικά.

Στο πακέτο περιλαμβάνεται και το περιεχόμενο γύρω από τους αγώνες: μια Sunset Circuit (κύκλωμα Sunset) εννέα αγώνων σε τρία στάδια, τρεις τοποθεσίες, ο κήπος Sunset, ο κήπος Sakura και το Seaside café (καφέ Seaside), σε πρωί, απόγευμα, νύχτα ή βροχή, και ένα workshop (εργαστήριο) όπου τα νομίσματα από τις νίκες αγοράζουν χρώματα ρακέτας, λαστιχάκια, σχήματα, λαβές, ξύλα, ταινία άκρων, αυτοκόλλητα και στυλ μπάλας και τραπεζιού.

Πού βρίσκονται τα πράγματα στον κώδικα

Το εγχειρίδιο αντιστοιχίζει κάθε μέρος του παιχνιδιού σε αρχείο. Αυτή είναι η λίστα που κρατάτε ανοιχτή όταν δουλεύετε:

  • Campaign.ts: οι εννέα αγώνες της εκστρατείας και οι στόχοι αστεριών τους.
  • Places.ts: πώς φαίνεται κάθε τοποθεσία.
  • physics.ts: η φυσική της μπάλας και της ρακέτας.
  • match.ts: βαθμολογία και κανόνες αγώνα.
  • i18n.ts: κείμενο διεπαφής στα αγγλικά και τα πορτογαλικά· οι άλλες γλώσσες βρίσκονται στον φάκελο locales.
  • styles.css: η εμφάνιση των μενού και των οθονών.

Κάθε αγώνας εκστρατείας έχει έως τρία αστέρια: νίκη, τρία χτυπήματα στις γωνίες και ανταλλαγή δέκα χτυπημάτων. Αυτό κάνει 27 αστέρια, και η ολοκλήρωση κάθε τοποθεσίας κερδίζει ένα βραβείο εργαστηρίου. Επειδή οι συνθήκες αστεριών βρίσκονται σε ένα αρχείο εκστρατείας, μπορείτε να κάνετε την εκστρατεία ευκολότερη ή δυσκολότερη χωρίς να ψάχνετε στον κώδικα.

Τι να αλλάξετε πρώτα σε πρότυπο πινγκ πονγκ

Προτείνουμε αυτή τη σειρά, από το μικρότερο ρίσκο στο μεγαλύτερο.

  1. Κείμενο διεπαφής και όνομα παιχνιδιού, στο i18n.ts και τον φάκελο locales.
  2. Χρώματα και οθόνες, στο styles.css.
  3. Στυλ εργαστηρίου για ρακέτες, μπάλες και τραπέζια, ώστε ο εξοπλισμός να φέρει το brand σας.
  4. Οπτικά τοποθεσιών, στο Places.ts.
  5. Αγώνες εκστρατείας και στόχοι αστεριών, στο Campaign.ts.
  6. Φυσική και βαθμολογία, στα physics.ts και match.ts, μόνο αν χρειάζεστε διαφορετική αίσθηση.

Το εγχειρίδιο προσθέτει τρεις κανόνες που αξίζει να ακολουθήσετε. Κρατήστε σταθερά τα unlock IDs, τα item IDs και τα κλειδιά αποθήκευσης, αλλιώς οι παίκτες χάνουν όσα κέρδισαν. Κάντε backup πριν ξεκινήσετε. Αλλάξτε ένα χαρακτηριστικό τη φορά, ώστε να ξέρετε ποια επεξεργασία προκάλεσε τι.

Το white label επιτρέπεται: το όνομα και το λογότυπό σας, ή του πελάτη σας, μπορούν να αντικαταστήσουν το δικό μας.

Ανακατασκευή, φιλοξενία και ενσωμάτωση

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

Για να αλλάξετε τον πηγαίο κώδικα, χρειάζεστε Node.js (συνιστάται 24 LTS) και npm. Επεξεργαστείτε το TypeScript, ξαναχτίστε με Vite και αντικαταστήστε τον φιλοξενούμενο φάκελο game/ με το νέο αποτέλεσμα.

Ο browser χρειάζεται JavaScript, ES modules και WebGL2. Υποστηρίζονται αφή και ποντίκι, και τα χειριστήρια προσαρμόζονται στο μέγεθος της οθόνης. Η απόδοση εξαρτάται από τον browser και τη συσκευή, οπότε δοκιμάστε στα τηλέφωνα που χρησιμοποιούν οι παίκτες σας.

  1. Ανεβάστε το game/ σε φάκελο δοκιμής στον host σας.
  2. Παίξτε έναν αγώνα σε υπολογιστή και έναν σε τηλέφωνο.
  3. Κάντε τις αλλαγές κειμένου και στυλ στο source/ και ξαναχτίστε.
  4. Αντικαταστήστε ολόκληρο τον φάκελο δοκιμής και παίξτε ξανά.
  5. Μετακινήστε το στην τελική διεύθυνση.

Τι δεν περιλαμβάνει αυτή η έκδοση

Αυτή η έκδοση παίζεται απέναντι στην CPU: εκστρατεία, ελεύθερος αγώνας και προπόνηση. Το online multiplayer, τα online δωμάτια, οι online κατατάξεις και οι λογαριασμοί στο cloud δεν αποτελούν μέρος του πακέτου, και δεν υπάρχει λειτουργία δύο παικτών. Δεν υπάρχουν SDK ή λογαριασμοί διαφημίσεων, και εγγενείς εφαρμογές και φιλοξενία δεν περιλαμβάνονται.

Η πρόοδος μένει στον browser του παίκτη: αστέρια εκστρατείας, αποτελέσματα, στατιστικά, replays και αντικείμενα εργαστηρίου. Δεν χρησιμοποιείται διακομιστής ή λογαριασμός, άρα δεν υπάρχει τίποτα να συντηρήσετε μετά την κυκλοφορία.

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

Ζητήστε προσφορά για προσαρμοσμένη εργασία

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

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

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

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

Χρειάζεται να χτίσω κάτι για να χρησιμοποιήσω αυτό το πινγκ πονγκ;

Όχι. Ο φάκελος game/ είναι ήδη χτισμένος. Ανεβάστε το περιεχόμενό του σε στατικό web host και ανοίξτε τη διεύθυνση. Το Node.js και το npm χρειάζονται μόνο αν αλλάξετε το TypeScript και ξαναχτίσετε.

Υπάρχει λειτουργία δύο παικτών ή online;

Όχι. Αυτή η έκδοση παίζεται απέναντι στην CPU στην εκστρατεία, στους ελεύθερους αγώνες και στην προπόνηση.

Μπορώ να αλλάξω την εκστρατεία και τους στόχους αστεριών;

Ναι. Οι αγώνες και οι συνθήκες αστεριών βρίσκονται στο Campaign.ts. Ξαναχτίστε μετά με Node.js.

Μπορώ να αλλάξω τον τρόπο που συμπεριφέρεται η μπάλα;

Ναι. Η φυσική βρίσκεται στο physics.ts και οι κανόνες βαθμολογίας στο match.ts. Αλλάξτε ένα πράγμα τη φορά και δοκιμάστε απέναντι σε κάθε αντίπαλο.

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

Ναι, με χειριστήρια αφής που προσαρμόζονται στην οθόνη. Το WebGL2 είναι απαραίτητο, και η απόδοση εξαρτάται από τη συσκευή, οπότε δοκιμάστε τα τηλέφωνα που στοχεύετε.

Πού αποθηκεύεται η πρόοδος;

Στον browser του παίκτη. Δεν χρησιμοποιείται διακομιστής ή λογαριασμός.

Άλλα αθλητικά πρότυπα για σύγκριση

Αν χτίζετε γωνία αθλητικών για έναν ιστότοπο, δύο άλλα πρότυπα ταιριάζουν καλά δίπλα στο Sunset Rally. Το Velvet Pool είναι ένα billiard 8 μπαλών με αντίπαλο CPU και τοπικά δύο παίκτες, γραμμένο σε vanilla JavaScript με WebGL2, 39 $ στην κανονική τιμή. Το Puttide είναι ένα τρισδιάστατο mini golf με 30 τρύπες, χτισμένο με Three.js και Rapier, 39 $ στην κανονική τιμή. Και τα δύο έχουν 14 γλώσσες διεπαφής.

Το Sunset Rally ταιριάζει σε πύλες και ιστότοπους που θέλουν αθλητικό παιχνίδι με σύντομους αγώνες, σε στούντιο που παραδίδουν branded παιχνίδι σε έναν πελάτη, και σε developers που θέλουν ένα αναγνώσιμο έργο TypeScript και Three.js για να μάθουν ή να επεκτείνουν. Αν χρειάζεστε δύο παίκτες στην ίδια συσκευή, το Velvet Pool έχει αυτή τη λειτουργία και το Sunset Rally όχι.

Δείτε το Velvet Pool, το παιχνίδι 8 μπαλών

Δείτε το Puttide, το τρισδιάστατο mini golf

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

Πάρτε τον πηγαίο κώδικα πινγκ πονγκ του Sunset Rally