Pysäköintipelin lähdekoodi: 30 tason 3D-liikennepalapeli sisältä

Jos etsit pysäköintipelin lähdekoodia, lyhyt vastaus on tämä: Beep Out on valmis 3D-liikennepalapeli selaimeen, jossa on 30 tasoa, valmis ladattava koontiversio ja sen takana oleva muokattava TypeScript-projekti. Hinta on 35 dollaria. Tämä opas avaa paketin ja kertoo, mihin kukin osa on tarkoitettu.

Pysäköintipelit näyttävät yksinkertaisilta, ja siksi huono peli paljastuu nopeasti. Säännöt täytyy ymmärtää yhdellä silmäyksellä, tasojärjestyksen täytyy opettaa, ja koodin täytyy antaa lisätä omia lautoja rikkomatta vanhoja. Näitä kolmea asiaa tarkastelemme tässä, sekä isännöintiä, lisenssiä ja sitä, mitä versio ei sisällä.

Mitä pysäköintipelin lähdekoodi sisältää

Beep Out myydään paikallisena selainversiona 1.1.0. Lataus koostuu kahdesta osasta: pelistä, jonka voit isännöidä heti, ja projektista, jota voit muokata.

• Valmis ladattava game/-kansio, jossa on kaikki 30 tasoa.
• Luettavissa oleva ajonaikainen JavaScript, CSS ja data, joten näet, mitä selain ajaa.
• TypeScript-kehityslähdekoodi pelin resursseineen ja testeineen.
• Kuvitettu käsikirja englanniksi ja portugaliksi: asennus, tiedostokartta, muokkaus, vianetsintä ja UKK.
• Riippuvuuksien ja fonttien lisenssihuomautukset.

Käyttöliittymä on 14 kielellä: englanti, portugali, espanja, ranska, saksa, italia, hollanti, puola, turkki, venäjä, indonesia, japani, korea ja yksinkertaistettu kiina. Käsikirja on itsessään vain englanniksi ja portugaliksi, mikä on tärkeää, jos kehittäjäsi ei osaa kumpaakaan.

Avaa Beep Outin sivu ja pelaa demo

Miten liikennepalapeli toimii säännöltä säännölle

Jokaisessa ajoneuvossa on katolla nuoli, joka näyttää sen poistumissuunnan. Napauta tai klikkaa autoa, jonka edessä tie on vapaa, ja se ajaa pois. Jos valitset tukkiutuneen, se törmää liikenteeseen, joten siirtojen järjestys ratkaisee tason.

Tasosta 4 alkaen bussipysäkillä odottaa matkustajajono. Ajoneuvo voi lähteä vain, kun sen väri vastaa seuraavaa matkustajaa. Vapaa auto väärällä värillä pysäköityy paikkaan ja lähtee itsekseen, kun sen matkustaja tulee vuorolleen. Parkkialue on pieni, joten liian monet väärät värit täyttävät sen, ja pelaajien täytyy suunnitella useita siirtoja eteenpäin. Tämä toinen kerros tekee tavallisesta tukosta järjestyspalapelin.

Pelinäkymässä on vihje, kumoa ja aloita uudelleen. Jos taso suoritetaan ilman estettyjä napautuksia, vihjeitä tai kumoamisia, saa suorituksen Clean Clear (puhdas läpäisy). Valinnainen paras aika tasolta tallennetaan selaimeen. Suoritetut tasot avaavat viisi maalityyliä Garagessa (talli). Maalit ovat kosmeettisia: jokainen auto ajaa samalla tavalla.

Miten koodi on järjestetty

Työskenteleviä paikkoja on kaksi, ja kannattaa pitää ne erillään. game/-kansio on käännetty tuloste: lataa se, niin peli toimii. Kehitysprojekti on paikka, jossa muutokset tehdään: tasot, asetukset, tekstit, logot ja äänitiedostot. Muutoksen jälkeen käännät projektin ja korvaat isännöidyn game/-kansion koko uudella tulosteella.

Pohjana on TypeScript, Three.js ja WebGL2, käännettynä Viteella. Tiedostoja ovat HTML, CSS, JavaScript, TypeScript ja JSON. Uudelleenkäännökseen tarvitaan Node.js 22.12 tai uudempi ja npm. Pelaaminen ei vaadi mitään näistä.

Projektissa on neljä komentoa, ja käsikirja selittää jokaisen:

• npm run levels tarkistaa tasotiedostot ennen käännöstä.
• npm test ajaa testit.
• npm run typecheck etsii tyyppivirheet TypeScriptistä.
• npm run build kirjoittaa uuden game-kansion.

Tasotarkistaja on tärkeämpi kuin miltä kuulostaa. Pysäköintipelit epäonnistuvat hiljaisesti: lauta, jota ei voi ratkaista, tai matkustaja, jolle ei ole sopivaa autoa. Tarkistuksen ajaminen ennen jokaista käännöstä on halvempaa kuin kuulla siitä pelaajilta.

Mitä muuttaa ensin pysäköinti-palapelipohjassa

Suosittelemme aloittamaan näistä neljästä muutoksesta tässä järjestyksessä.

1. Nimi, logo ja brändi

HTML-otsikko ja brändiasetukset ovat lähdeprojektissa, logotiedostot public/-kansiossa ja ääni omassa kansiossaan. Korvaa tiedostot säilyttäen samat polut ja käännä sitten uudelleen. White label on sallittu: oma brändisi tai asiakkaasi korvaa meidän brändimme.

2. Tasot

Tasojen kirjoitustiedostot ovat kansiossa source/. Muokkaa niitä, tarkista komennolla npm run levels, käännä ja lataa. Käsikirjassa on tiedostokartta, joten lautaa ei tarvitse etsiä koodista.

3. Käyttöliittymän teksti ja kielet

Käyttöliittymän teksti on kielitiedostoissa. Jos yleisösi puhuu jotakin 14 kielestä, lue jokainen näkymä kyseisellä kielellä kerran, sillä muutama sana kannattaa yleensä sovittaa brändin äänensävyyn.

4. Pelin asetukset

Pelin asetukset on pidetty asetustiedostoissa eikä hajautettu koodiin. Muuta yksi arvo kerrallaan ja pelaa muutama taso jokaisen muutoksen jälkeen.

1. Varmuuskopioi alkuperäinen paketti.
2. Muuta bränditiedostoja säilyttäen niiden polut.
3. Muokkaa tai lisää tasoja ja aja npm run levels.
4. Aja npm test ja npm run build.
5. Korvaa isännöity game/-kansio kokonaan, älä yksittäisiä tiedostoja.
6. Testaa niillä puhelimilla ja selaimilla, joita pelaajasi käyttävät.

Isännöinti, upotus ja sovelluskaupat

Lataa game/-kansion sisältö mihin tahansa staattiseen HTTP(S)-palvelimeen ja avaa sen osoite. Pelaamiseen ei tarvita PHP:tä, tietokantaa, tiliä eikä Node.js-palvelinta. Peli toimii alikansiossa tai iframe-kehyksessä omalla sivullasi, ja käsikirjassa on esimerkki iframe-upotuksesta. Anna iframelle riittävä korkeus, ja pidä selaimen tallennus käytössä, jos edistymisen pitää säilyä uudelleenlatauksessa.

index.html:n avaaminen suoraan levyltä ei ole tuettua, vaan se täytyy tarjota HTTP(S)-palvelun kautta. Selaimen täytyy tukea JavaScriptiä, ES-moduuleja ja WebGL2:ta. Pelaajat napauttavat kosketusnäytöllä ja klikkaavat tietokoneella. Asetuksissa on Low graphics -tila, joka säästää akkua vanhemmilla puhelimilla.

Paketti ei sisällä natiivia sovellusprojektia. Jos haluat pelin sovelluskauppaan, portaalin SDK:hon kytkettynä tai asennettuna omalle palvelimellesi, se on erillinen palvelu, jonka hinnoittelemme projektikohtaisesti.

Pyydä tarjous muutoksista, isännöinnistä tai sovellusversiosta

Mitä tämä versio jättää pois

Beep Out on yksinpeli, jossa data on paikallista. Edistyminen, ennätykset ja asetukset jäävät pelaajan selaimeen. Siinä ei ole verkkomoninpeliä, verkkotulostauluja, pilvitilejä, mainos-SDK:ta eikä portaalin SDK:ta. Natiivisovellukset, isännöinti ja palvelut eivät kuulu pakettiin.

Monille sivustoille tämä on oikea muoto: palvelimella ei ole ylläpidettävää, eikä pelaajien tietoja lähde selaimesta. Jos tarvitset tulostaulun tai mainoksia, suunnittele ne ennen julkaisua eikä sen jälkeen.

Lisenssi, tuki ja hinta yhdessä kappaleessa

Yksi osto antaa ikuisen, ei-yksinomaisen lisenssin käyttää versiota yhdessä lopputuotteessa, omassasi tai yhden asiakkaasi. Pelaajat voivat käyttää sitä ilmaiseksi tai mainostuloilla. Saat muuttaa koodia, kuvitusta ja ääntä kyseisessä tuotteessa ja korvata nimemme ja logomme omallasi, mutta et saa myydä tai jakaa pohjaa, sen lähdekoodia tai omaisuutta erikseen. Tuki kestää 6 kuukautta, tai 12 kuukautta kassalla valittavalla laajennuksella, ja kattaa asennuksen, tiedostojen käytön ja toistettavissa olevien virheiden korjaamisen. Listahinta on 35 dollaria. Black Friday -tarjous antaa 15 % alennuksen kaikista pelipohjista 30. marraskuuta 2026 asti, joten Beep Out maksaa 29,75 dollaria. Listahinnat palaavat 1. joulukuuta alkaen.

Lue koko lisenssi- ja tukiehdot

Usein kysytyt kysymykset

Tarvitsenko palvelimen tai tietokannan?

Et. Lataa game/-kansion sisältö staattiseen HTTP(S)-palveluun ja avaa index.html tuon osoitteen kautta. Edistyminen ja ennätykset tallentuvat pelaajan selaimeen.

Voinko lisätä omia pysäköintitasoja?

Kyllä. Muokkaa tasojen kirjoitustiedostoja kansiossa source/, tarkista ne komennolla npm run levels, käännä ja korvaa isännöity game/-kansio uudella tulosteella.

Toimiiko liikennepeli puhelimilla?

Kyllä. Pelaajat napauttavat ajoneuvoja kosketusnäytöllä ja klikkaavat tietokoneella. Selaimen täytyy tukea WebGL2:ta, ja Low graphics -asetus auttaa vanhoja laitteita. Testaa omilla puhelimillasi ennen julkaisua.

Voinko upottaa pelin omalle sivulleni?

Kyllä. Isännöi se missä tahansa kansiossa ja upota iframella. Käsikirjassa on esimerkkikoodi.

Onko mainoksia tai verkkopisteitä mukana?

Ei. Versiossa ei ole mainos-SDK:ta, verkkotulostaulua eikä moninpeliä. Niiden lisääminen on mukautettua työtä, joka hinnoitellaan projektikohtaisesti.

Voinko käyttää yhtä lisenssiä kahdelle asiakkaalle?

Et. Yksi lisenssi kattaa yhden lopputuotteen. Toinen asiakas tarvitsee toisen lisenssin, ja useamman pelipohjan tilauksessa saa paketti-alennuksen.

Aiheeseen liittyviä palapelipohjia

Jos yleisösi pitää lajittelusta enemmän kuin liikenteestä, Mochi Monsters on värilajittelupalapeli, jossa on 60 tasoa kolmessa maailmassa ja Endless-tila (Endless mode), 39 dollarin listahinnalla. Jos haluat lyhyemmän pelisession, Gridspark on 8×8-palikkapalapeli, jossa on salamanopea ZAP-siirto ja siemennetty päivittäinen haaste, 29 dollarin listahinnalla. Molemmissa on luettava lähdekoodi ja 14 käyttöliittymän kieltä.

Katso Mochi Monsters, värilajittelupalapeli

Katso Gridspark, palikkapalapeli

Kaksi tai useampi pelipohja samassa tilauksessa alentaa jokaista lisenssiä: 5 % kahdesta, 10 % kolmesta, 15 % neljästä ja 20 % viidestä tai useammasta.

Hanki Beep Outin pysäköintipelin lähdekoodi