Kuinka luoda oma sanapeli

Miten Wordlen kaltainen verkkopeli toimii? Mitä sinun tulee tietää oman pelin luomiseksi?

Kaikki pelit eivät vaadi valtavaa kehitystiimiä ja vuosien kehitystä ollakseen hitti. Josh Wardle loi Wordlen esimerkiksi kumppanilleen Palak Shahille lyhyessä ajassa, ja sen yksinkertaisuudesta ja harvoista ominaisuuksista huolimatta sen uskomaton suosio ansaitsi sen New York Timesin lunnaita.

Miten Wordlen kaltainen verkkopeli toimii

Jos sinulla on idea yksinkertaisesta mutta koukuttavasta pelistä, joka saattaisi kiinnittää maailman huomion ja ansaita rahaa, on täysin mahdollista kirjoittaa Wordlen kaltainen verkkosovellus itse.

Wordle-verkkosivustokehys on, kuten mikä tahansa verkkosivusto, HTML, hypertekstikuvauskieli. Tämä on koodi, johon kaikki verkkosivustot luottavat kertoessaan selaimellesi, mihin elementit asetetaan sivun latautuessa. Tällä hetkellä lukemasi sivusto on HTML-koodattu, ja se tarjoaa todellisen sisällön lisäksi ohjeet sisällön näyttämiseen valikon sijainnista kirjasinkokoon.

HTML:n lisäksi on olemassa CSS, Cascading Style Sheets: tämä on lisäys HTML:ään helpottamaan elementtien asettelua, olivatpa ne sitten kuvan tai tekstilohkon ominaisuuksia. Jos sivustollasi on useita sivuja, voit CSS:n avulla määrittää niiden visuaaliset ominaisuudet kerran sivukohtaisen periaatteen sijaan.

Jos haluat pystyä luomaan web-sivuja, sinun on opittava HTML- ja CSS-kieli, vaikka monet palvelut mahdollistavat tämän tekemisen kirjoittamatta yhtään koodiriviä. Nämä palvelut tarjoavat mahdollisuuden vetää ja pudottaa elementtejäsi erittäin edistyneessä käyttöliittymässä ja hallita kaikkia HTML- ja CSS-tiedostoja.

Jotta sivusto olisi täysin interaktiivinen, kuten Wordle, tarvitset myös JavaScriptin, joka muuntaa staattiset HTML- ja CSS-sivut dynaamisemmiksi sivuiksi, olipa kyseessä hakukenttä tai työkalupalkki. JavaScript voi manipuloida videota, 2D tai 3D, tallentaa käyttäjän syöttämiä tietoja, ladata tietoja tietokannasta, suorittaa laskelmia, suorittaa ennalta määritettyä koodia tietyn käyttäjän toiminnon mukaan jne.

Kuten Josh Wardle selitti TechCrunchille, Wordle on kirjoitettu JavaScriptillä, koodilla, joka ladataan sivun latautuessa, mikä mahdollistaa pelin pelaamisen offline-tilassa, kun ensimmäinen lataus on valmis. Nykyaikaiset selaimet voivat ymmärtää ja suorittaa JavaScriptin, joka meidän tapauksessamme lataa sanan tietokannasta, tunnistaa käyttäjän syötteen ja antaa tietoja jokaisesta kirjaimesta.

Josh Wardle itse myöntää, että pelin koodi ei ole erityisen monimutkainen, mikä selittää, miksi Wordle oli mahdollista ladata kokonaisuudessaan ennen kuin NYT osti sen, kaikki sanat sen tietokannassa. Ratkaisuja voitiin löytää myös pelkästään sivuston lähdekoodia tutkimalla.

Mitä sinun tulee tietää oman pelin luomiseksi?

Mutta miten voit luoda Wordlen kaltaisen pelin itse? Ohjelmointi vaatii oppimista, mutta sinun ei tarvitse tietää kaikkea HTML:stä, CSS:stä ja JavaScriptistä luodaksesi jotain Wordle-tasolla. Kuten Codecademyssa selitettiin, yksi käytetyistä ohjelmointitekniikoista on for-silmukka, joka tarkistaa jokaisen syötetyn kirjaimen ja näyttää sen sopivalla värillä.

Codecademy on yksi sivustoista, joissa voit oppia HTML:ää, CSS:ää, JavaScriptiä ja monia muita verkkokehityskieliä ilmaiseksi. Harjoitukset ovat hyvin jäsenneltyjä ja opit aina tekemällä ne suoraan selaimessasi. Näet, miten se tehdään, ja voit nähdä seuraukset suoraan. Jotkut edistyneet ominaisuudet ja opetusohjelmat vaativat maksullisen tilauksen, mutta paljon voidaan jo oppia ilmaiseksi.

Treehouse menee Codecademya pidemmälle, ja sinun on maksettava 25 dollaria kuukaudessa käyttääksesi sitä (ilmainen kokeiluversio saatavilla). Se on ammattimaisempi ja tehokkaampi resurssi HTML:n, CSS:n, JavaScriptin ja muiden oppimiseen, mutta se menee paljon pidemmälle kuin mitä Wordlen kaltaisessa pelissä tarvitset. Harkitse, haluatko mennä pidemmälle.

Tree Housen vastakohta, Dash . Sivusto kattaa vain HTML:n, CSS:n ja JavaScriptin perusteet, mutta se on täysin ilmainen ja erityisen aloittelijaystävällinen. Kaikkea hallitaan suoraan selaimessasi, ja Codecademyn tavoin opit hyödyntämään näiden kielten tarjoamia ominaisuuksia.

Tämä luettelo ei ole läheskään tyhjentävä, varsinkin koska nämä ovat vain englanninkielisiä resursseja, löydät ne helposti ranskaksi, mutta ne ovat hyvä perusta HTML-, CSS- ja JavaScript-opiskelulle. On sinun tehtäväsi pelata… ja koodata!