Kuidas luua oma sõnamängu

Kuidas veebimäng nagu Wordle töötab? Mida peate teadma oma mängu loomiseks?

Mitte iga mäng ei nõua tohutut arendusmeeskonda ja aastatepikkust arendustööd, et olla hitt. Näiteks Wordle’i lõi Josh Wardle oma partnerile Palak Shahile lühikese ajaga ning vaatamata selle lihtsusele ja väga vähestele funktsioonidele tõi selle uskumatu populaarsus sellele New York Timesi lunaraha.

Kuidas selline veebimäng nagu Wordle töötab?

Kui teil on idee lihtsast, kuid sõltuvust tekitavast mängust, mis võiks köita kogu maailma tähelepanu ja teenida palju raha, on täiesti võimalik ise kirjutada selline veebirakendus nagu Wordle.

Wordle veebisaidi raamistik on nagu iga veebisait, HTML hüperteksti märgistuskeel. See on kood, mida kõik veebisaidid kasutavad, et öelda teie brauserile, kuhu lehe laadimisel elemendid panna. Sait, mida praegu loete, on HTML-kodeeritud, pakkudes mitte ainult tegelikku sisu, vaid ka juhiseid selle sisu kuvamiseks alates menüü asukohast kuni fondi suuruseni.

Lisaks HTML-ile on olemas CSS, Cascading Style Sheets: see on HTML-i lisand, mis hõlbustab elementide paigutust, olgu need siis pildi või tekstiploki omadused. Kui teie saidil on mitu lehte, saate CSS-i abil määrata nende visuaalsed omadused üks kord, mitte lehepõhiselt.

Kui soovite veebilehti luua, peate õppima HTML-i ja CSS-i, kuigi paljud teenused võimaldavad teil seda teha ilma ühtegi koodirida kirjutamata. Need teenused pakuvad võimalust oma elemente väga täiustatud liideses pukseerida ja kogu HTML-i ja CSS-i üle kontrollida.

Selleks, et sait oleks täielikult interaktiivne nagu Wordle, vajate ka JavaScripti, et teisendada staatilised HTML- ja CSS-lehed dünaamilisemateks lehtedeks, olgu see siis otsingukast või tööriistariba. JavaScript saab manipuleerida videoga, 2D või 3D, salvestada kasutaja sisestatud teavet, laadida andmeid andmebaasist, teha arvutusi, käivitada eelnevalt määratletud koodi vastavalt konkreetsele kasutajatoimingule jne.

Nagu Josh Wardle TechCrunchile selgitas, kirjutati Wordle JavaScriptis – koodis, mis laaditakse lehe laadimisel, võimaldades mängu pärast esmase laadimise lõppemist võrguühenduseta mängida. Kaasaegsed brauserid suudavad mõista ja käivitada JavaScripti, mis meie puhul laadib sõna andmebaasist, tuvastab kasutaja sisendi ja annab teavet iga tähe kohta.

Josh Wardle ise tunnistab, et mängu kood ei ole eriti keeruline, mis seletab, miks oli võimalik Wordle tervikuna alla laadida enne, kui NYT selle ostis, koos kõigi sõnadega selle andmebaasis. Lahendusi oli võimalik leida ka lihtsalt saidi lähtekoodi uurides.

Mida peate teadma oma mängu loomiseks?

Aga kuidas saate ise Wordle-laadset mängu luua? Programmeerimine nõuab õppimist, kuid Wordle’i tasemel millegi loomiseks ei pea te teadma kõike HTML-i, CSS-i ja JavaScripti kohta. Nagu Codecademy’s selgitatud, on üheks kasutatavaks programmeerimistehnikaks for-silmus, mis kontrollib iga sisestatud tähte ja kuvab selle sobiva värviga.

Codecademy on üks saitidest, kus saate tasuta õppida HTML-i, CSS-i, JavaScripti ja paljusid teisi veebiarenduskeeli. Harjutused on hästi üles ehitatud ja saate alati õppida, tehes neid otse brauseris. Näete, kuidas seda teha, ja näete otseselt tagajärgi. Mõned täiustatud funktsioonid ja õpetused nõuavad tasulist tellimust, kuid palju saab õppida juba tasuta.

Treehouse läheb Codecademyst kaugemale ja selle kasutamiseks peate maksma 25 dollarit kuus (saadaval on tasuta prooviversioon). See on professionaalsem ja tõhusam ressurss HTML-i, CSS-i, JavaScripti ja muu õppimiseks, kuid läheb palju kaugemale sellest, mida vajate sellise mängu jaoks nagu Wordle. Mõelge, kas soovite kaugemale minna.

Puumaja vastand, Dash . Sait hõlmab ainult HTML-i, CSS-i ja JavaScripti põhitõdesid, kuid see on täiesti tasuta ja eriti algajasõbralik. Kõike hallatakse otse teie brauseris ja sarnaselt Codecademyga õpite ka nende keelte pakutavast täielikult ära kasutama.

See nimekiri pole kaugeltki ammendav, eriti kuna tegemist on ainult ingliskeelsete ressurssidega, mille leiate hõlpsalt prantsuse keeles, kuid need on hea alus HTML-i, CSS-i ja JavaScripti tundmaõppimiseks. Mängimine ja kodeerimine on teie otsustada!