Hur man skapar ditt eget ordspel

Hur fungerar ett webbspel som Wordle? Vad behöver du veta för att skapa ditt eget spel?

Alla spel kräver inte ett stort utvecklingsteam och år av utveckling för att bli en hit. Wordle, till exempel, skapades av Josh Wardle för sin partner Palak Shah på kort tid, och trots sin enkelhet och väldigt få funktioner gav dess otroliga popularitet det en New York Times lösensumma.

Hur fungerar ett webbspel som Wordle

Om du har en idé om ett enkelt men beroendeframkallande spel som kan fånga världens uppmärksamhet och tjäna dig stora pengar, är det fullt möjligt att skriva en webbapplikation som Wordle själv.

Ramverket för Wordle-webbplatsen är, precis som vilken webbplats som helst, HTML, ett hypertextmarkeringsspråk. Detta är koden som alla webbplatser förlitar sig på för att tala om för din webbläsare var du ska placera element när sidan laddas. Webbplatsen du för närvarande läser är HTML-kodad, och tillhandahåller inte bara det faktiska innehållet, utan också instruktioner för att visa innehållet, från menyposition till teckenstorlek.

Förutom HTML finns det CSS, Cascading Style Sheets: detta är ett tillägg till HTML för att underlätta layouten av element, oavsett om de är egenskaper hos en bild eller ett textblock. Med CSS, om du har flera sidor på din webbplats, kan du ställa in deras visuella egenskaper en gång istället för per sida.

Om du vill kunna skapa webbsidor behöver du lära dig HTML och CSS, även om många tjänster låter dig göra detta utan att skriva en enda rad kod. Dessa tjänster erbjuder möjligheten att dra och släppa dina element i ett mycket avancerat gränssnitt och ta kontroll över all HTML och CSS.

För att en webbplats ska vara helt interaktiv som Wordle behöver du även JavaScript för att konvertera statiska HTML- och CSS-sidor till mer dynamiska sidor, oavsett om det är en sökruta eller ett verktygsfält. JavaScript kan manipulera video, 2D eller 3D, lagra information som angetts av användaren, ladda data från en databas, utföra beräkningar, exekvera fördefinierad kod enligt en viss användaråtgärd, etc.

Som Josh Wardle förklarade för TechCrunch, skrevs Wordle i JavaScript, kod som laddas när sidan laddas, vilket gör att spelet kan spelas offline efter att den första laddningen är klar. Moderna webbläsare kan förstå och köra JavaScript, som i vårt fall laddar ett ord från en databas, identifierar användarinmatning och ger information för varje bokstav.

Josh Wardle medger själv att spelets kod inte är särskilt komplex, vilket förklarar varför det gick att ladda ner Wordle i sin helhet innan NYT köpte det, med alla ord i dess databas. Det gick också att hitta lösningar genom att helt enkelt granska sajtens källkod.

Vad behöver du veta för att skapa ditt eget spel?

Men hur skapar man ett spel som Wordle själv? Programmering kräver lärande, men du behöver inte veta allt om HTML, CSS och JavaScript för att skapa något på Wordle-nivå. Som förklarats på Codecademy är en av programmeringsteknikerna som används en for-loop som kontrollerar varje bokstav som skrivs in och visar den i lämplig färg.

Codecademy är en av webbplatserna där du kan lära dig HTML, CSS, JavaScript och många andra webbutvecklingsspråk gratis. Övningarna är välstrukturerade och du lär dig alltid genom att göra dem rätt i din webbläsare. Du kommer att se hur du gör det och du kommer att kunna se konsekvenserna direkt. Vissa avancerade funktioner och tutorials kräver en betald prenumeration, men mycket kan redan läras gratis.

Treehouse går längre än Codecademy och du måste betala $25/månad för att använda det (gratis provversion tillgänglig). Det är en mer professionell och effektiv resurs för att lära sig HTML, CSS, JavaScript och mer, men går långt utöver vad du behöver för ett spel som Wordle. Fundera på om du vill gå längre.

Motsatsen till Tree House, Dash . Webbplatsen täcker bara grunderna i HTML, CSS och JavaScript, men den är helt gratis och särskilt nybörjarvänlig. Allt hanteras direkt i din webbläsare, och precis som Codecademy lär du dig genom att göra för att dra full nytta av vad dessa språk har att erbjuda.

Den här listan är långt ifrån uttömmande, särskilt eftersom det bara är engelskspråkiga resurser, du kan enkelt hitta dem på franska, men de är en bra bas för att börja lära dig om HTML, CSS och JavaScript. Det är upp till dig att spela… och koda!