Codice sorgente di un gioco di ping pong: Sunset Rally file per file
Un gioco di ping pong 3D per il browser, aperto file per file: dove stanno fisica, punteggio, campagna e ambientazioni, e cosa modificare per primo.
Se cercate il codice sorgente di un gioco di ping pong da ospitare sul vostro sito e da modificare, Sunset Rally è un gioco di tennistavolo 3D per il browser già completo: una campagna di nove partite, tre avversari controllati dal computer, un'officina e l'intero progetto TypeScript, a $39 di listino. La cartella del gioco è già compilata e non minificata, quindi potete caricarla subito e studiarla con calma più tardi.
I giochi sportivi sono più difficili da adattare di quanto sembri, perché il divertimento sta nella fisica e nei controlli, non nei menu. In questa guida vediamo dove si trova ciascuna di queste parti nel progetto Sunset Rally, cosa si può cambiare senza rischi e cosa questa edizione non comprende.
Come si gioca
Le partite si giocano a sette punti contro un avversario controllato dal computer. La racchetta si muove con il puntatore o trascinando il dito, e i colpi partono da soli. Spingere verso l'alto dà potenza, spostarsi di lato indirizza la pallina, tirare verso il basso produce una smorzata, e una pallina che resta alta è lì per essere schiacciata.
Un aiuto facoltativo, che si può attivare e disattivare durante la partita, porta la racchetta all'altezza della pallina. Su un sito pubblico conta: anche chi gioca per la prima volta da telefono riesce a rimandare la palla.
Gli avversari sono tre, ognuno con il suo stile: il paziente Capi, la giocosa Nori e il preciso Miso, ciascuno in modalità Facile, Normale o Difficile. In allenamento c'è un compagno che rimanda ogni pallina. A fine partita, un replay mostra di nuovo il punto decisivo.
Gioca alla demo di Sunset Rally
Cosa contiene il pacchetto con il codice sorgente del gioco di ping pong
- Una cartella game/ pronta da pubblicare, già compilata e non minificata.
- Il sorgente TypeScript per sviluppatori, con la configurazione Vite e gli asset del gioco, nella cartella source/.
- Manuali illustrati in inglese e portoghese, con schermate reali.
- Font e file audio inclusi nel gioco.
- Note di licenza di terze parti e un changelog.
Lo stack è TypeScript, Three.js r184, Vite e WebGL2. I file sono HTML, CSS, JavaScript, TypeScript e JSON. L'interfaccia è disponibile in 14 lingue: inglese, portoghese, spagnolo, francese, tedesco, italiano, olandese, polacco, turco, russo, indonesiano, giapponese, coreano e cinese semplificato. I manuali sono solo in inglese e portoghese.
Anche tutto ciò che circonda le partite fa parte del pacchetto: un Sunset Circuit di nove partite in tre tappe, tre ambientazioni (il giardino al tramonto, il giardino dei ciliegi e il caffè sul mare) di mattina, di pomeriggio, di notte o sotto la pioggia, e un'officina dove le monete vinte comprano colori della racchetta, gomme, forme, impugnature, legni, bordini, adesivi e stili per pallina e tavolo.
Dove si trovano le cose nel codice
Il manuale associa ogni parte del gioco a un file. Questo è l'elenco da tenere aperto mentre lavorate:
- Campaign.ts: le nove partite della campagna e i loro obiettivi a stelle.
- Places.ts: l'aspetto di ogni ambientazione.
- physics.ts: la fisica di pallina e racchetta.
- match.ts: punteggio e regole della partita.
- i18n.ts: i testi dell'interfaccia in inglese e portoghese; le altre lingue sono nella cartella locales.
- styles.css: lo stile di menu e schermate.
Ogni partita della campagna vale fino a tre stelle: vincere, colpire tre angoli e tenere uno scambio di dieci colpi. In tutto sono 27 stelle, e completare ogni ambientazione fa guadagnare un premio dell'officina. Dato che le condizioni delle stelle stanno in un unico file della campagna, potete renderla più facile o più difficile senza frugare nel codice.
Cosa modificare per primo in un template di ping pong
Vi suggeriamo questo ordine, dal rischio più basso al più alto.
- Testi dell'interfaccia e nome del gioco, in i18n.ts e nella cartella locales.
- Colori e schermate, in styles.css.
- Stili dell'officina per racchette, palline e tavoli, così l'attrezzatura porta il vostro marchio.
- Grafica delle ambientazioni, in Places.ts.
- Partite della campagna e obiettivi a stelle, in Campaign.ts.
- Fisica e punteggio, in physics.ts e match.ts, solo se vi serve una sensazione di gioco diversa.
Il manuale aggiunge tre regole da rispettare. Non cambiate gli ID degli sblocchi, gli ID degli oggetti e le chiavi di salvataggio, altrimenti i giocatori perdono ciò che hanno guadagnato. Fate un backup prima di iniziare. Cambiate una funzione alla volta, così saprete quale modifica ha causato cosa.
Il white label è consentito: il vostro nome e il vostro logo, o quelli del vostro cliente, possono sostituire i nostri.
Ricompilare, pubblicare e incorporare
Per giocare non serve compilare nulla. Caricate il contenuto di game/ su qualsiasi hosting HTTP(S) che serva file statici, mantenete i percorsi relativi e aprite l'indirizzo. Non servono PHP, database o account.
Per modificare il sorgente servono Node.js (consigliata la 24 LTS) e npm. Modificate il TypeScript, ricompilate con Vite e sostituite la cartella game/ pubblicata con il nuovo output.
Il browser deve supportare JavaScript, i moduli ES e WebGL2. Sono supportati sia il touch sia il mouse, e i controlli si adattano alle dimensioni dello schermo. Le prestazioni dipendono dal browser e dal dispositivo, quindi provate il gioco sui telefoni usati dai vostri giocatori.
- Caricate game/ in una cartella di prova sul vostro hosting.
- Giocate una partita da un browser desktop e una da telefono.
- Fate le modifiche a testi e stile in source/ e ricompilate.
- Sostituite l'intera cartella di prova e giocate di nuovo.
- Spostate il tutto all'indirizzo definitivo.
Cosa non comprende questa edizione
Questa edizione si gioca contro il computer: campagna, partita libera e allenamento. Multigiocatore online, stanze online, classifiche online e account cloud non fanno parte del pacchetto, e non c'è una modalità a due giocatori. Non ci sono SDK o account pubblicitari, e app native e hosting non sono inclusi.
I progressi restano nel browser del giocatore: stelle della campagna, risultati, statistiche, replay e oggetti dell'officina. Non si usano server né account, quindi dopo il lancio non c'è nulla da mantenere.
Se vi serve una modalità online, un SDK per portali, una versione per gli store di app o l'installazione sul vostro server, si tratta di un servizio a parte, con preventivo per progetto.
Chiedi un preventivo per un lavoro su misura
Licenza, assistenza e prezzo in breve
Un acquisto dà una licenza perpetua e non esclusiva per un prodotto finale, vostro o di un cliente, che i giocatori possono usare gratis o con monetizzazione pubblicitaria. Potete modificare codice, grafica e audio all'interno di quel prodotto, ma non potete rivendere o distribuire il template, il suo codice sorgente o i suoi asset da soli. L'assistenza dura 6 mesi, o 12 con l'estensione al momento dell'acquisto, e copre installazione e uso dei file e correzione dei difetti riproducibili; personalizzazioni, hosting e integrazione di SDK o portali hanno un preventivo a parte. Il prezzo di listino è $39; fino al 30 novembre 2026 una promozione Black Friday toglie il 15% da ogni template, quindi Sunset Rally costa $33.15, e dal 1° dicembre i prezzi tornano a listino.
Domande frequenti
Devo compilare qualcosa per usare questo gioco di ping pong?
No. La cartella game/ è già compilata. Caricate il suo contenuto su un hosting web statico e aprite l'indirizzo. Node.js e npm servono solo se modificate il TypeScript e ricompilate.
C'è una modalità a due giocatori o online?
No. Questa edizione si gioca contro il computer, nella campagna, nelle partite libere e in allenamento.
Posso modificare la campagna e gli obiettivi a stelle?
Sì. Partite e condizioni delle stelle sono in Campaign.ts. Poi ricompilate con Node.js.
Posso cambiare il comportamento della pallina?
Sì. La fisica è in physics.ts e le regole del punteggio in match.ts. Cambiate una cosa alla volta e provate contro ogni avversario.
Funziona sui telefoni?
Sì, con controlli touch che si adattano allo schermo. Serve WebGL2 e le prestazioni dipendono dal dispositivo, quindi provatelo sui telefoni a cui puntate.
Dove vengono salvati i progressi?
Nel browser del giocatore. Non si usano server né account.
Altri template sportivi da confrontare
Se state costruendo un angolo dedicato allo sport sul vostro sito, due altri template stanno bene accanto a Sunset Rally. Velvet Pool è un gioco di biliardo a 8 palle con avversario controllato dal computer e modalità a due giocatori in locale, scritto in JavaScript puro con WebGL2, a $39 di listino. Puttide è un minigolf 3D con 30 buche, basato su Three.js e Rapier, a $39 di listino. Entrambi hanno l'interfaccia in 14 lingue.
Sunset Rally è adatto a portali e siti che vogliono un gioco sportivo con partite brevi, a studi che consegnano un gioco personalizzato a un cliente e a sviluppatori che cercano un progetto TypeScript e Three.js leggibile da studiare o ampliare. Se vi servono due giocatori sullo stesso dispositivo, Velvet Pool ha quella modalità e Sunset Rally no.
Scopri Velvet Pool, il biliardo a 8 palle
Scopri Puttide, il minigolf 3D
Acquistando due o più template in un solo ordine, ogni licenza costa meno: 5% di sconto per due, 10% per tre, 15% per quattro e 20% per cinque o più.