How does a web game like Wordle work? What do you need to know to create your own game?
Not every game requires a huge development team and years of development to be a hit. Wordle, for example, was created by Josh Wardle for his partner Palak Shah in a short amount of time, and despite its simplicity and very few features, its incredible popularity earned it a New York Times ransom.
How does a web game like Wordle work
If you have an idea for a simple but addictive game that could grab the world’s attention and make you big money, it’s entirely possible to write a web application like Wordle yourself.
The Wordle website framework is, like any website, HTML, a hypertext markup language. This is the code that all websites rely on to tell your browser where to put elements when the page loads. The site you’re currently reading is HTML-encoded, providing not only the actual content, but instructions for displaying that content, from menu position to font size.
In addition to HTML, there is CSS, Cascading Style Sheets: this is an addition to HTML to facilitate the layout of elements, whether they are properties of an image or a block of text. With CSS, if you have multiple pages on your site, you can set their visual properties once rather than on a per-page basis.
If you want to be able to create web pages, you need to learn HTML and CSS, although many services allow you to do this without writing a single line of code. These services offer the ability to drag and drop your elements in a very advanced interface and take control of all the HTML and CSS.
For a site to be fully interactive like Wordle, you also need JavaScript to convert static HTML and CSS pages into more dynamic pages, whether it’s a search box or a toolbar. JavaScript can manipulate video, 2D or 3D, store information entered by the user, load data from a database, perform calculations, execute predefined code according to a particular user action, etc.
As Josh Wardle explained to TechCrunch, Wordle was written in JavaScript, code that is loaded when the page loads, allowing the game to be played offline after the initial load is complete. Modern browsers can understand and execute JavaScript, which in our case loads a word from a database, identifies user input, and provides information for each letter.
Josh Wardle himself admits that the game’s code is not particularly complex, which explains why it was possible to download Wordle in its entirety before the NYT bought it, with all the words in its database. It was also possible to find solutions by simply examining the site’s source code.
What do you need to know to create your own game?
But how do you create a game like Wordle yourself? Programming takes learning, but you don’t need to know everything about HTML, CSS, and JavaScript to create something at the Wordle level. As explained on Codecademy, one of the programming techniques used is a for loop that checks each letter entered and displays it in the appropriate color.
Codecademy is one of the sites where you can learn HTML, CSS, JavaScript and many other web development languages for free. The exercises are well structured and you always learn by doing them right in your browser. You will see how to do it and you will be able to see the consequences directly. Some advanced features and tutorials require a paid subscription, but much can already be learned for free.
Treehouse goes further than Codecademy and you need to pay $25/month to use it (free trial available). It’s a more professional and efficient resource for learning HTML, CSS, JavaScript, and more, but goes far beyond what you need for a game like Wordle. Consider if you want to go further.
The opposite of Tree House, Dash. The site only covers the basics of HTML, CSS, and JavaScript, but it’s completely free and especially beginner-friendly. Everything is managed right in your browser, and like Codecademy, you learn by doing to take full advantage of what these languages have to offer.
This list is far from exhaustive, especially since these are only English-language resources, you can easily find them in French, but they are a good base to start learning about HTML, CSS, and JavaScript. It’s up to you to play… and code!