How to Build a Wordle Clone With JavaScript
Worlde is a popular game that took the world by storm in early 2022. Recreating the Wordle game or at least building a simpler version of it is something that developers who are new to JavaScript should consider.
How Wordle Works
In Wordle, there is a secret five-letter word. The player has six tries and must guess different five-letter words to see how close they are to the secret word.
After the player submits a guess, Wordle uses colors to tell the player how close they are to the secret word. If a letter has the color yellow, it means that the letter is in the secret word, but in the wrong position.
The green color tells the user that the letter is in the secret word and in the right position, while the grey color tells the player that the letter is not in the word.
Setting Up the Development Server
The code used in this project is available in aGitHub repositoryand is free for you to use under the MIT license. If you want to have a look at a live version of this project, you can check out thisdemo.
The project uses theVite build toolvia theCommand Line Interface (CLI)for scaffolding. Make sure you have Yarn installed on your computer because it is generally faster than theNode Package Manager (NPM). Open your terminal and run the following command:
This will create a new Vite project. The framework should beVanillaand the variant should be set toJavaScript. Now run:
This will install all the dependencies necessary to make the project work. After this installation, run the following command to start the development server:
Setting Up the Game and Designing the Keyboard
Open the project in your code editor, clear the contents of themain.jsfile, and make sure your project folder looks like this:
Now, replace the contents of theindex.htmlfile with the following boilerplate code:
For the CSS, head over to this project’s GitHub Repository and copy the contents of thestyle.cssfile into your ownstyle.cssfile.
Now, in the terminal, install the Toastify NPM package by running the following command:
Toastify is a popular JavaScript package that allows you to show alerts to the user. Next, in themain.jsfile, import thestyle.cssfile and thetoastifyutility.
Define the following variables to make interaction with the DOM elements easier:
Setting Up the Game Board
Since Wordle is a game where the user has to guess a five-letter word in six tries, define a variable calledboardContentthat holds an array of six arrays. Then define the variablescurrentRowandcurrentBoxto make it easier to traverseboardContent.
To render the board with five boxes in each of the six rows using HTML elements, use nested loops to iterate and create the elements. Finally, append them to the board.
Adding the Keyboard and Listening to Keyboard Input
To create the keyboard, iterate through the keys usingforEach, creating a button element for each entry. Set the button’s text toBackspaceif the entry is*, otherwise set it to the entry value.
Assign thekeyclass to the button, and set thedata-keyattribute to the uppercase entry value. Next, add a click event listener to the button that calls the functioninsertKeywith the uppercase entry value.
Getting a New Word From an API
When the user first loads the game, the game should fetch a new five-letter word from theRandom wordAPI. This word is then stored in thesecretWordvariable.
In the code block above, themainfunction runs if the random word is successfully fetched. Define amainfunction right below thegetNewWordfunction:
To style each box on the board, you’ll need a list of all the boxes in each row. Declare a variable,rowthat grabs all the rows in the DOM. Also, set themessagedisplay style tonone:
Next, add akeyupevent listener to the window object and check if the released key is valid. If valid, focus on the corresponding button, simulate a click, and blur it after a 250ms delay:
Under thekeyupevent listener, set up event listeners for two buttons:showBtnandrestartBtn. When the player clicksshowBtn, display a toast notification with the value of thesecretWordvariable.
ClickingrestartBtnreloads the page. Also, make sure you include anisValidCharacterfunction to check if a key is a valid character.
Outside themainfunction, create arenderBoxfunction and provide three parameters:row(the row number),box(the box index within the row), anddata(the text content to update).
Handling Keyboard Input With a Function
To handle the key inputs and to update the board, create aninsertKeyfunction with akeyparameter. The function should behave according to the parameter passed.
Evaluating the Player’s Guess
Create anevaluatefunction that accepts a row parameter. This function is responsible for evaluating the player’s guess.
Every game has aShow Answerbutton that appears only after the user has made four guesses. So, in the function, implement the functionality that does just that:
Then define the guess variable and an answer variable that checks if the letters are in the correct position.
The tile coloring algorithm will come in handy here. Recall that a tile or letter should be green if it is in the word and in the correct spot.
If the tile is in the word but in the wrong spot, the tile is yellow and finally, the grey color is for tiles that are not in the word.
The given code block above performs an element-by-element comparison between theguessarray and theanswerarray. Based on the results of this comparison, the code updates thecolorsarray.
Next, define asetColorsfunction that can take in thecolorsarray as a parameter and color the tiles appropriately:
The game is now complete. All you have to do now is call thegetNewWordfunction, and you are good to go.
Congratulations, you just recreated Wordle.
Take Your JavaScript Skills to the Next Level by Recreating Games
Learning a new language as a beginner is not easy. Recreating games like Tic-tac-toe, Hangman, and Wordle in a language like JavaScript, can help beginners master the concepts of the language by putting them in practice.
By building these fun game projects, you could make programming less tedious and also hone your skills at the same time.
My iPhone does it all, but I still need my dumb phone.
Tor spoiled me forever.
Obsidian finally feels complete.
These are the best free movies I found on Tubi, but there are heaps more for you to search through.
Taming data is easier than it looks.
