Sådan laver du dit eget ordspil

Hvordan fungerer et webspil som Wordle? Hvad skal du vide for at skabe dit eget spil?

Ikke alle spil kræver et stort udviklingsteam og mange års udvikling for at blive et hit. Wordle, for eksempel, blev skabt af Josh Wardle til sin partner Palak Shah på kort tid, og på trods af dets enkelhed og meget få funktioner, gav dens utrolige popularitet det en New York Times løsesum.

Hvordan fungerer et webspil som Wordle

Hvis du har en idé til et simpelt, men vanedannende spil, der kunne fange verdens opmærksomhed og tjene dig store penge, er det fuldt ud muligt at skrive en webapplikation som Wordle selv.

Wordle-webstedsrammen er, som ethvert websted, HTML, et hypertekst-opmærkningssprog. Dette er koden, som alle websteder er afhængige af for at fortælle din browser, hvor elementer skal placeres, når siden indlæses. Det websted, du i øjeblikket læser, er HTML-kodet og giver ikke kun det faktiske indhold, men også instruktioner til visning af dette indhold, fra menuposition til skriftstørrelse.

Ud over HTML er der CSS, Cascading Style Sheets: dette er en tilføjelse til HTML for at lette layoutet af elementer, uanset om de er egenskaber for et billede eller en tekstblok. Med CSS, hvis du har flere sider på dit websted, kan du indstille deres visuelle egenskaber én gang i stedet for pr. side.

Hvis du vil kunne lave websider, skal du lære HTML og CSS, selvom mange tjenester giver dig mulighed for at gøre dette uden at skrive en eneste linje kode. Disse tjenester tilbyder muligheden for at trække og slippe dine elementer i en meget avanceret grænseflade og tage kontrol over al HTML og CSS.

For at et websted skal være fuldt interaktivt som Wordle, skal du også bruge JavaScript til at konvertere statiske HTML- og CSS-sider til mere dynamiske sider, uanset om det er et søgefelt eller en værktøjslinje. JavaScript kan manipulere video, 2D eller 3D, gemme information indtastet af brugeren, indlæse data fra en database, udføre beregninger, udføre foruddefineret kode i henhold til en bestemt brugerhandling osv.

Som Josh Wardle forklarede til TechCrunch, blev Wordle skrevet i JavaScript, kode, der indlæses, når siden indlæses, hvilket gør det muligt for spillet at blive spillet offline, efter den første indlæsning er fuldført. Moderne browsere kan forstå og udføre JavaScript, som i vores tilfælde indlæser et ord fra en database, identificerer brugerinput og giver information for hvert bogstav.

Josh Wardle indrømmer selv, at spillets kode ikke er særlig kompleks, hvilket forklarer, hvorfor det var muligt at downloade Wordle i sin helhed, før NYT købte det, med alle ordene i dets database. Det var også muligt at finde løsninger ved blot at undersøge sidens kildekode.

Hvad skal du vide for at skabe dit eget spil?

Men hvordan laver du selv et spil som Wordle? Programmering kræver læring, men du behøver ikke at vide alt om HTML, CSS og JavaScript for at skabe noget på Wordle-niveau. Som forklaret på Codecademy er en af ​​de anvendte programmeringsteknikker en for-løkke, der kontrollerer hvert indtastet bogstav og viser det i den passende farve.

Codecademy er et af webstederne, hvor du kan lære HTML, CSS, JavaScript og mange andre webudviklingssprog gratis. Øvelserne er godt strukturerede, og du lærer altid ved at lave dem lige i din browser. Du vil se, hvordan du gør det, og du vil være i stand til at se konsekvenserne direkte. Nogle avancerede funktioner og tutorials kræver et betalt abonnement, men meget kan allerede læres gratis.

Treehouse går længere end Codecademy, og du skal betale $25/måned for at bruge det (gratis prøveversion tilgængelig). Det er en mere professionel og effektiv ressource til at lære HTML, CSS, JavaScript og mere, men går langt ud over, hvad du har brug for til et spil som Wordle. Overvej om du vil videre.

Det modsatte af Tree House, Dash . Siden dækker kun det grundlæggende i HTML, CSS og JavaScript, men det er helt gratis og især begyndervenligt. Alt styres direkte i din browser, og ligesom Codecademy lærer du ved at gøre for at drage fuld fordel af, hvad disse sprog har at tilbyde.

Denne liste er langt fra udtømmende, især da disse kun er engelsksprogede ressourcer, du kan nemt finde dem på fransk, men de er et godt udgangspunkt for at begynde at lære om HTML, CSS og JavaScript. Det er op til dig at spille… og kode!