Minigolfpelin lähdekoodi: reiät, fysiikka ja 3D-radan kartta

Minigolfpelin lähdekoodi menestyy tai kaatuu yhden tehtävän varassa: reiän lisäämisessä. Ostaja, joka haluaa brändätyn radan, kausitason tai asiakkaan logon vihreälle, avaa tasotiedostot ensimmäisenä, ja jos reikä on haudattu moottorikoodiin, projekti pysähtyy. Puttidessä, 3D-minigolfpohjassamme, jokaisella radalla on oma reikätiedostonsa selkeällä JavaScriptillä, ja käsikirja kulkee läpi yhden lisäämisen.

Tämä opas seuraa pakettia niin kuin kehittäjä sen kohtaa: kansiot, kirjastot, rataa koskevat tiedostot, muutosten järjestys, isännöinti ja lisenssi. Tiedostonimet ovat pelin mukana tulevasta ostajan oppaasta.

Lyhyt vastaus kiireisille: Puttide on muotoiltua JavaScriptiä, jossa piirtämiseen käytetään Three.js:ää ja pallon fysiikkaan Rapieria, molemmat mukana paketissa. Ei käännösvaihetta, ei CDN:ää eikä palvelinkoodia.

Mitä minigolfpelin lähdekoodi sisältää

Puttide on valmis peli, jossa on 30 reikää viidellä saariradalla: Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden ja Volcano Forge, kussakin kuusi reikää. Rampit, portaalit, töytäisimet ja tuulimyllyt tekevät reiköistä pieniä palapelejä. Jokainen reikä palkitsee kolme tähteä (läpimeno, par tai parempi ja piilokolikko), ja pronssi-, hopea- ja kultamitalit palkitsevat parhaat kierrokset.

Ratojen lisäksi on päivähaaste kierteellä (tuulinen, jäinen vihreä, raskas pallo, joustavat seinät, kolikkoryntäys tai birdie-metsästys), Locker, jossa kolikoilla ostetaan palloja, polkuja ja muita kosmetiikkaesineitä, sekä kierroksia kahdelle–neljälle pelaajalle vuorotellen yhdellä laitteella. Käyttöliittymä on 14 kielellä.

• game/: valmis lähetettävä versio, ainoa kansio, jonka julkaiset.
• source/: sama peli kehittäjäpainoksena, README:n ja package.json-tiedoston kanssa.
• documentation/: yksi kuvitettu opas englanniksi ja portugaliksi.
• THIRD-PARTY-LICENSES/: kirjastojen ja fonttien lisenssitekstit.
• Versio 1.1.0, päivitetty 22. lokakuuta 2026.

Avaa Puttiden myyntisivu: demo, käsikirja ja hinta

Three.js, Rapier ja muu pino

Palloa simuloi Rapier 3D 0.21.0, joka toimii WebAssemblynä, ja näkymä piirretään Three.js r186:lla. Molemmat ovat kansioissa lib/three/ ja lib/rapier/ lisenssitiedostoineen, ja index.html-tiedostossa on import map, joka osoittaa pelin niihin. Käsikirja huomauttaa, että kirjastotiedostojen toiminta on ennallaan ja ne on vain muotoiltu luettaviksi.

Tällä on kaksi syytä. Ensinnäkin mitään ei ladata CDN:stä, joten portaali tai asiakas, jolla on tiukka tietoturvakäytäntö, tarvitsee vain isännöintinsä. Toiseksi kirjaston päivitys on manuaalinen, harkittu vaihe: source/package.json listaa tarkat versiot, ja kopioit uudet moduulitiedostot vastaavaan lib/-kansioon ja säilytät import map -polut.

• Three.js r186: MIT-lisenssi.
• Rapier 3D compat 0.21.0, WebAssembly upotettuna: Apache-2.0-lisenssi.
• Rubik- ja Fredoka-verkkofontit: SIL Open Font License 1.1.
• Kaksi musiikkiraitaa: music/menu.mp3 ja music/play-1.mp3.

Missä reiät, kolikot ja tekstit ovat

Polut ovat samat kansioissa source/ ja game/. Rataa koskeva data on jaettu saarittain, mikä pitää jokaisen tiedoston sen verran lyhyenä, että sen voi lukea yhdellä istumalla.

• src/course/courses.js: ratojen järjestys ja avausvaatimukset.
• src/course/holes.js: Sunlit Ruinsin reiät, geometrialla, parilla ja esteillä.
• src/course/pier.js, ice.js, lava.js ja sky.js: muiden neljän radan reiät.
• src/sim/constants.js: fysiikan säädöt.
• src/game/economy.js: pallot, polut ja asut hintoineen.
• src/ui/i18n.js ja sen aputiedostot: 14 kielen sanakirjat, mukaan lukien reikien nimet ja vihjeet.
• src/game/localRecords.js: radan ennätykset, jotka säilytetään selaimessa.
• src/audio/audio.js: äänitehosteet ja musiikkikartoitus probeTracks-kohdassa.
• css/style.css: käyttöliittymän värit, fontit ja responsiiviset tyylit.

Reiän lisääminen vaihe vaiheelta

Tämä on muutos, jonka useimmat ostajat tekevät, ja käsikirja kuvaa sen muutamalla rivillä. Olemme laajentaneet sen järjestykseen, jota itse seuraisimme.

1. Valitse radan tiedosto, johon uusi reikä kuuluu, esimerkiksi lava.js Volcano Forgelle.
2. Kopioi olemassa oleva reikämääritelmä, joka näyttää lähimmältä haluamaasi.
3. Anna sille yksilöllinen id. Id:n käyttäminen uudelleen sekoittaa tallennetun edistymisen.
4. Aseta par, lähtöpaikka ja maalin paikka, ja siirrä tai korvaa esteet.
5. Lisää reikä sen rataan courses.js-tiedostossa.
6. Lisää sen näyttönimi ja vihje kielisanakirjoihin, jokaiseen kieleen, jonka toimitat.
7. Pelaa se: testaa törmäykset, rajojen ulkopuolelta palautuminen ja kaikki kolme tähteä, piilokolikko mukaan lukien.

Muokkaa source/-kansiossa, kopioi muuttuneet tiedostot samoihin polkuihin game/-kansioon ja tarjoile kansio HTTP:llä testataksesi. package.json-tiedostossa on serve-skripti, tai voit ajaa python -m http.server 8765. Node.js on valinnainen, ja sitä tarvitaan vain, jos haluat npm:n hallitsevan kirjastoversioita.

Muut muutokset järkevässä järjestyksessä

1. Brändi ja värit: logo, värit ja fontit tiedostossa css/style.css. White label on sallittu, joten brändisi voi korvata meidän.
2. Hinnat Lockerissa: economy.js. Halvemmat kosmetiikkaesineet tekevät kevyestä sivustosta ystävällisemmän; kalliimmat venyttävät pitkää kampanjaa.
3. Tekstit: sanamuodot ja vihjeet kielitiedostoissa.
4. Musiikki: kaksi mukana tulevaa raitaa voi korvata nauhoituksilla, joihin sinulla on lisenssi. Kopioi tiedosto ja päivitä selkeä kartoitus tiedostoon audio.js (probeTracks); näkymämusiikki palaa pelimusiikkiraitaan.
5. Fysiikka: constants.js viimeisenä ja pienin askelin, koska jokainen reikä on viritetty nykyisiä arvoja vastaan.

Samaan lähestymistapaan, tavallinen JavaScript ilman 3D-kirjastoa, on rakennettu myös pool-pohjamme.

Velvet Pool: 8-pallo tavallisella JavaScriptillä ja WebGL2:lla

Sunset Rally: 3D-pöytätennis yhdeksän ottelun kampanjalla

Isännöinti, MIME-tyypit ja sovelluskuoret

Lataa kaikki game/-kansion sisältä kansioon, kuten public_html/puttide/, säilytä alikansiot ja avaa osoite HTTPS:llä. Palvelimella ei tarvita npm:ää, PHP:tä, tietokantaa tai tiliä. index.html-tiedoston avaaminen levyltä ei toimi, koska selaimet estävät moduulit file://-osoitteella.

Puttidessä on yksi isännöintiyksityiskohta, jota 2D-pelissä ei ole: fysiikka toimii WebAssemblynä. Palvelimesi on lähetettävä .js-tiedostot JavaScript-MIME-tyypillä ja .wasm-tiedostot tyypillä application/wasm. Isännöinti, joka tekee tämän väärin, näyttää tyhjän ruudun tai moduulivirheen, joten tarkista se ensimmäisenä päivänä.

• Selaimen vaatimukset: JavaScript, ES-moduulit, WebAssembly ja WebGL2.
• Portaalin iframe-kehyksessä salli koko näyttö ja automaattinen toisto.
• Kosketusnäytöillä: vedä tähdätäksesi ja lyödäksesi, kaksi sormea kääntää kameraa, nipistys zoomaa.
• Ei asennettava offline-sovellus: jokainen uusi lataus tavoittaa silti isännöintisi.

Natiivisovellusprojektit eivät kuulu pakettiin. Jos suunnittelet kauppajulkaisua, varaa aikaa kuoreelle ja sen testaukselle oikeilla puhelimilla, koska 3D-fysiikkapeli on raskaampi kuin korttipeli vanhemmilla laitteilla.

Mukana ei ole, ja lisenssi

Tämä on paikallinen selainpainos: ei verkkomoninpelausta eikä verkkohuoneita, ei verkkotulostaulua, ei pilvitilejä, ei mainos-SDK:ta, ei natiivisovelluksia eikä isännöintiä. Radan ennätykset, päivittäinen edistyminen ja saman laitteen kierrokset pysyvät pelaajan selaimessa, eikä mitään pistemäärää ladata. Tallennukset kuuluvat selaimen alkuperälle, joten siirtyminen toiseen domainiin aloittaa pelaajat alusta.

Puttide maksaa 39 dollaria; 30. marraskuuta 2026 asti Black Friday -kampanja tuo sen hintaan 33,15 dollaria, ja kahden tai useamman pohjan ostaminen samassa tilauksessa antaa 5–20 prosentin pakettialennuksen. Lisenssi on pysyvä ja ei-yksinomainen yhteen lopputuotteeseen, sinun tai yhden asiakkaan. Saat brändätä sen uudelleen, muuttaa koodia, taidetta ja ääntä sekä antaa pelaajien pelata maksutta tai mainosten kanssa, mutta et saa myydä pohjaa tai sen koodia itsessään. Tuki kestää kuusi kuukautta tai kaksitoista laajennuksella; räätälöidyt reiät, integraatiot ja isännöinti tarjotaan pyynnöstä.

Lisenssi, tuki ja palautusehdot kokonaisuudessaan

Usein kysytyt kysymykset

Onko minigolfin lähdekoodi TypeScriptiä?

Ei. Puttide on tavallista, muotoiltua JavaScriptiä kansioissa source/src ja game/src, ilman meidän omia minifioituja tai yhteen koottuja tiedostoja.

Voinko lisätä omia reikiä tai ratoja?

Kyllä. Kopioi reikä radan tiedostossa, anna sille yksilöllinen id, aseta par, lähtö ja maali, lisää se courses.js-tiedostoon ja lisää sen nimi ja vihje kielitiedostoihin.

Lataako se Three.js:n CDN:stä?

Ei. Three.js, Rapier, fontit ja musiikki ovat kaikki game/-kansion sisällä, joten peli tarvitsee vain isännöintisi.

Miksi isännöintini näyttää tyhjän ruudun?

Yleensä MIME-tyypit. Tarjoile .js JavaScriptinä ja .wasm tyypillä application/wasm, avaa peli HTTP(S):llä ja tarkista, että WebGL2 on käytössä.

Voivatko ystävät pelata yhdessä?

Kyllä, kaksi–neljä pelaajaa vuorottelee samalla laitteella. Verkkopeli ei kuulu tähän painokseen.

Onko tämä oikea minigolfpohja sinulle?

Puttide sopii perhe- tai urheiluportaaliin, toimistolle, joka rakentaa brändätyn radan yhdelle asiakkaalle, ja kehittäjälle, joka haluaa nähdä, miten Three.js ja Rapier toimivat yhdessä luettavassa koodissa. Se sopii heikommin projektiin, joka tarvitsee verkkokierroksia tai yhteistä tulostaulua ensimmäisestä päivästä lähtien.

Pelaa koko rata demossa puhelimella ja lue sitten käsikirjan osio reiän lisäämisestä. Jos se näyttää sinusta iltapäivän työltä, muu peli on jo rakennettu.

Pelaa Puttiden demo ja osta lisenssi