This simple project has been created as an example during TeachTech 2022 to illustrate concepts during mentoring assignments.
TeachTech is a non-profit initiative, composed solely of volunteer IT professionals, whose goal is to teach the basics of programming to people with no previous knowledge, free of charge.
Wordle is a web-based word game created and developed by Welsh software engineer Josh Wardle, and owned and published by The New York Times Company since 2022.
Players have six attempts to guess a five-letter word, with feedback given for each guess in the form of colored tiles indicating when letters match or occupy the correct position.
Download Git and Visual Studio Code.
Install Live Server extension in Visual Studio Code.
Clone the project in your computer.
git clone https://github.com/marcosDLCS/wordle-101.gitWith VSCode, go to the desired folder and open the file wordle.html. Find the "Go Live" button in the right bottom part of the editor interface and press it.
On our way to programming a Wordle-like game, we will start with a version with a very basic structure and, step by step, we will add styles and functionality to make the game look like its twin in a convincing manner:
|
|
First of all, the HTML structure to support the game must be created. The document will consist of different areas:
-
Title
-
Explanation of the rules of the game
-
Board where to display the accepted words
-
Action panel
-
List of all attempts (including non-validated ones)
-
Footer
Start with a basic container for each row.
Now we are going to add new elements:
-
Inputs, buttons and forms
-
Lists
In this first phase you should not style the document. Simply focus on using the correct HTML elements and apply the appropriate classes and identifiers. You also do not have to create the cell structure for the words in the table. That part will be refined later with other elements and styles.
In the following step simple styles will be applied to make the website more usable and better looking.
Based on the sketches we will try to centre the content and make it "responsive" to some extent. Also we are going to style the buttons and the input elements.
The introduction of custom text fonts and the use of background colors and shading will be an asset.
We are going to add a little dynamic behavior to our game:
-
Store a list of possible words in an object / array
-
At the start of the program, randomly select a word from the list to guess
-
Allow the user to enter a word via input and, after pressing a button, issue an alert announcing whether they guessed correctly or not (with an exact word comparison)
-
At this point, all the user’s word attempts should be displayed in the lower list
-
Put the current year in the footer near to the author information
-
Create a data structure to store the data related to the game we are playing. We have to think about how to store the word to hit and the invalid attempts made so far
-
Count the number of attempts and don’t let more than 6. When the maximum is reached, warn with an alert that you can’t play anymore
-
Validate the user’s attempts. Do not allow empty strings, numbers or words that do not have an exact length of 5 positions to be entered. Show custom warnings via alerts when:
-
Text contains numbers
-
Text is less than five characters long
-
The text is longer than five characters
-
-
In spite of the validations, all the user’s attempts must still be shown in the lower list
-
Create and give functionality to the Reset game button and make the board and word lists on the screen show as they did at the beginning (empty)
-
Remove values from internal data structures
-
Create a 5x6 board to put the letters of each validated word separately
-
Color the rows of incorrect words a reddish color
-
If correct, use a green color to color the row
-
Find a suitable color palette
Now it is time to save the state of our game and allow us to resume the game where we left off even if we reload the browser.
To do this we will use LocalStorage.
In this section we will add some more behavior:
-
If the letter of the word entered is not in the word we are looking for, we color it gray
-
If the letter is in the word, but not in the correct position, we color it yellow
-
If the letter is in the correct position, we color it green
In this section we will try to improve certain aspects of our game that are not so good at the moment.
In the functional section:
-
We will only allow words to be entered as letters from A to Z, without punctuation marks
-
Only the first occurrence of a letter in the word that is not in its position will be marked yellow
-
We will move alert warnings to a notification section at the top of the game board so as not to detract from the user experience
Refactoring:
-
We will group the various functions in the code and give better variable names
-
We will add useful comments that explain the flow of the game
-
We will group the notification messages in a structure that makes them more usable
-
We will create the board elements dynamically