Hoe u uw eigen woordspel kunt maken

Hoe werkt een webgame als Wordle? Wat moet je weten om je eigen game te maken?

Niet elke game vereist een enorm ontwikkelingsteam en jaren van ontwikkeling om een ​​hit te worden. Wordle is bijvoorbeeld in korte tijd gemaakt door Josh Wardle voor zijn partner Palak Shah, en ondanks zijn eenvoud en zeer weinig functies leverde zijn ongelooflijke populariteit het een losgeld van de New York Times op.

Hoe werkt een webgame als Wordle

Als je een idee hebt voor een eenvoudig maar verslavend spel dat de aandacht van de wereld zou kunnen trekken en je veel geld zou kunnen opleveren, is het heel goed mogelijk om zelf een webtoepassing zoals Wordle te schrijven.

Het Wordle-websiteframework is, zoals elke website, HTML, een hypertext-markup-taal. Dit is de code waarop alle websites vertrouwen om uw browser te vertellen waar elementen moeten worden geplaatst wanneer de pagina wordt geladen. De site die u momenteel aan het lezen bent, is HTML-gecodeerd en biedt niet alleen de daadwerkelijke inhoud, maar ook instructies voor het weergeven van die inhoud, van menupositie tot lettergrootte.

Naast HTML is er CSS, Cascading Style Sheets: dit is een toevoeging aan HTML om de lay-out van elementen te vergemakkelijken, of het nu gaat om eigenschappen van een afbeelding of een blok tekst. Met CSS kunt u, als u meerdere pagina’s op uw site heeft, hun visuele eigenschappen eenmalig instellen in plaats van per pagina.

Als u webpagina’s wilt kunnen maken, moet u HTML en CSS leren, hoewel u met veel services dit kunt doen zonder een enkele regel code te schrijven. Deze services bieden de mogelijkheid om uw elementen in een zeer geavanceerde interface te slepen en neer te zetten en de controle over alle HTML en CSS over te nemen.

Om een ​​site volledig interactief te maken, zoals Wordle, heb je ook JavaScript nodig om statische HTML- en CSS-pagina’s om te zetten in meer dynamische pagina’s, of het nu een zoekvak of een werkbalk is. JavaScript kan video manipuleren, 2D of 3D, informatie opslaan die door de gebruiker is ingevoerd, gegevens uit een database laden, berekeningen uitvoeren, vooraf gedefinieerde code uitvoeren volgens een bepaalde gebruikersactie, enz.

Zoals Josh Wardle aan TechCrunch uitlegde, is Wordle geschreven in JavaScript, code die wordt geladen wanneer de pagina wordt geladen, waardoor het spel offline kan worden gespeeld nadat de eerste keer laden is voltooid. Moderne browsers kunnen JavaScript begrijpen en uitvoeren, dat in ons geval een woord uit een database laadt, gebruikersinvoer identificeert en informatie geeft voor elke letter.

Josh Wardle geeft zelf toe dat de code van het spel niet bijzonder ingewikkeld is, wat verklaart waarom het mogelijk was om Wordle in zijn geheel te downloaden voordat de NYT het kocht, met alle woorden in de database. Het was ook mogelijk om oplossingen te vinden door simpelweg de broncode van de site te onderzoeken.

Wat moet je weten om je eigen game te maken?

Maar hoe maak je zelf een spel als Wordle? Programmeren vereist leren, maar je hoeft niet alles te weten over HTML, CSS en JavaScript om iets op Wordle-niveau te maken. Zoals uitgelegd op Codecademy, is een van de gebruikte programmeertechnieken een for-lus die elke ingevoerde letter controleert en deze in de juiste kleur weergeeft.

Codecademy is een van de sites waar je gratis HTML, CSS, JavaScript en vele andere webontwikkelingstalen kunt leren. De oefeningen zijn goed gestructureerd en je leert altijd door ze direct in je browser te doen. U zult zien hoe u het moet doen en u zult de gevolgen direct kunnen zien. Voor sommige geavanceerde functies en tutorials is een betaald abonnement vereist, maar veel kan al gratis worden geleerd.

Treehouse gaat verder dan Codecademy en je moet $ 25/maand betalen om het te gebruiken (gratis proefversie beschikbaar). Het is een professionelere en efficiëntere bron voor het leren van HTML, CSS, JavaScript en meer, maar gaat veel verder dan wat je nodig hebt voor een game als Wordle. Overweeg of je verder wilt gaan.

Het tegenovergestelde van Tree House, Dash . De site behandelt alleen de basisprincipes van HTML, CSS en JavaScript, maar is volledig gratis en vooral beginnersvriendelijk. Alles wordt rechtstreeks in uw browser beheerd en net als Codecademy leert u door te doen om volledig te profiteren van wat deze talen te bieden hebben.

Deze lijst is verre van volledig, vooral omdat dit alleen Engelstalige bronnen zijn, je kunt ze gemakkelijk in het Frans vinden, maar ze vormen een goede basis om te leren over HTML, CSS en JavaScript. Het is aan jou om te spelen… en te coderen!