Wordle was a popular online word puzzle game that became a viral sensation in late 2021 and early 2022. It was a simple word guessing game where the objective was to guess a five-letter word within six attempts. Each day, there was a new word to guess, and the same word was used by all players worldwide. I saw this during the hight of the pandemic and decided to create a spin-off version that used random words every time the site was launched, and allowed for new and unique games for every player. In theory, an 'infinite' wordle, unlike the once-per-day format. I often enjoyed playing and so it was my belief that an infinite version would do quite well.
Guess the word: The players would start by entering any five-letter word into the game. My version is slightly different, as it allows any five characters, but it would of been trivial to change.
Coloured Feedback System:
Green: If a letter was both correct and in the correct position, it would be highlighted green!
Amber: If a letter was correct but in the WRONG position, it would be amber to indicate as such.
Red: This meant that the letter was not present in the word in any form.
Refine Your Guesses: Based on the feedback, players made new guesses. They had up to six tries to guess the correct word.
Win / Loss Conditions: If a player guessed the word correctly within the six tries, they won. If they failed to guess the word, the correct word was revealed at the end. In my game, it then gives an option to restart with a brand new word.
Since during the time was near the hight of the pandemic, simple but fun games like this were the key to people's dopamine hits. The ability of wordle's daily sharing function and competing with friends partnered with everybody being stuck inside at the time lead to a boom in popularity. It was easy to pick up, but hard to master. Whilst in this version, the charm of having a new daily word is lost, the benefits of having repeated instant hits of dopamine made me believe that it was worth the trade off. It was also a fun challenge as at the time i set a strict time limit of a day to complete it! It was tough but fun to recreate Josh Wardle's Pride and joy.
As Previously Mentioned, Wordle was created by Josh Wardle, a software engineer as a fun game for both them and their partner. It was later released to the public, and gained mass popularity. Later, in Mid January of 2022, The New York Times purchased Wordle and integrated it into it's selection of word-based games.
<div class="box-normal margin-one align-center">
<h1 class="wordleTitle">Wordle</h1>
</div>
<div class="box-normal margin-ten align-center flex-grid-row">
<div class="flex-size-one flex-center">
<table class="wordGrid">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
<div id="keyboardBox" class="box-normal margin-ten-l margin-ten-r align-center">
<div class="flex-center">
<div class="flex-size-one flex-center">
<table class="keyboardGrid kgAlpha">
<tr>
<td class="letterQ" onclick="addLetter('Q')">Q</td>
<td class="letterW" onclick="addLetter('W')">W</td>
<td class="letterE" onclick="addLetter('E')">E</td>
<td class="letterR" onclick="addLetter('R')">R</td>
<td class="letterT" onclick="addLetter('T')">T</td>
<td class="letterY" onclick="addLetter('Y')">Y</td>
<td class="letterU" onclick="addLetter('U')">U</td>
<td class="letterI" onclick="addLetter('I')">I</td>
<td class="letterO" onclick="addLetter('O')">O</td>
<td class="letterP" onclick="addLetter('P')">P</td>
</tr>
</table>
</div>
</div>
<div class="flex-center">
<div class="flex-size-one flex-center">
<table class="keyboardGrid kgBeta">
<tr>
<td class="letterA" onclick="addLetter('A')">A</td>
<td class="letterS" onclick="addLetter('S')">S</td>
<td class="letterD" onclick="addLetter('D')">D</td>
<td class="letterF" onclick="addLetter('F')">F</td>
<td class="letterG" onclick="addLetter('G')">G</td>
<td class="letterH" onclick="addLetter('H')">H</td>
<td class="letterJ" onclick="addLetter('J')">J</td>
<td class="letterK" onclick="addLetter('K')">K</td>
<td class="letterL" onclick="addLetter('L')">L</td>
</tr>
</table>
</div>
</div>
<div class="flex-center">
<div class="flex-size-one flex-center">
<table class="keyboardGrid kgCharlie">
<tr>
<td id="enter" onclick="enterLetters()">ENTER</td>
<td class="letterZ" onclick="addLetter('Z')">Z</td>
<td class="letterX" onclick="addLetter('X')">X</td>
<td class="letterC" onclick="addLetter('C')">C</td>
<td class="letterV" onclick="addLetter('V')">V</td>
<td class="letterB" onclick="addLetter('B')">B</td>
<td class="letterN" onclick="addLetter('N')">N</td>
<td class="letterM" onclick="addLetter('M')">M</td>
<td id="back" onclick="removeLetter()">⟻</td>
</tr>
</table>
</div>
</div>
<a class="button-large-red wide-lr-padding text-light margin-ten-t" href="wordleInfo.html">Return to Information</a>
</div>
<h2 class="winCondition align-center wordleTitle"></h2>
Here is the HTML for my version of Wordle. It used multiple tables for both the grid and the keyboard, partnered with some fancy CSS not listed to make it look pretty. Clicking the keyboard inputted the potential letter into the current slot, and once all 5 letters were chosen pressing enter inputted the combination. The back key on the virtual keyboard removed a letter. I opted to use a virtual keyboard like this as at the time the majority of players were on a mobile device so it was intuitive and easy to use!
$(".navHamBurger").click(function() {
$(".navNavItem").toggleClass("navItemHamDown");
$(".navNavGroup").toggleClass("checkDisplay");
$(".navHamBurger").toggleClass("navHamBurgerDown");
});
function backToTop() {
$('html').animate({ scrollTop: 0 }, 'fast');
document.documentElement.scrollTop = 0;
}
function showSources() {
$("#sources").toggleClass("sources");
window.scrollTo(0,document.body.scrollHeight);
}
var currentModalState = false;
function modalOpenClose(number) {
var modalgroup = "#modal" + number;
if (currentModalState === false) {
currentModalState = true;
$(modalgroup).toggleClass("display-i-block");
} else {
currentModalState = false;
$(modalgroup).toggleClass("display-i-block");
}
}
const dictionaryWordle = [too many words to display here! check the js :P];
var randomWord = dictionaryWordle[(Math.floor(Math.random() * dictionaryWordle.length))];
randomWord = randomWord.toUpperCase();
const randomWordSplit = [randomWord[0],randomWord[1],randomWord[2],randomWord[3],randomWord[4]];
const keyboardRows = [".kgAlpha",".kgBeta",".kgCharlie"];
var rowIndex = 0;
function addLetter(value,event) {
var currentTableState = $(".wordGrid");
var currentLetter = ".letter" + value;
if (currentTableState.find("tr").eq(rowIndex).find("td").eq(4).text() === "") {
var check = true;
var count = 0;
while (check === true) {
if (currentTableState.find("tr").eq(rowIndex).find("td").eq(count).text() === "") {
check = false;
currentTableState.find("tr").eq(rowIndex).find("td").eq(count).text(value);
currentTableState.find("tr").eq(rowIndex).find("td").eq(count).css({"border":"1px solid rgb(150, 150, 150)", "color":"black"});
} else {
count++
}
}
}
}
function removeLetter() {
var currentTableState = $(".wordGrid");
if (currentTableState.find("tr").eq(rowIndex).find("td").eq(0).text() !== "") {
var check = true;
var count = 4;
var value = "";
while (check === true) {
if (currentTableState.find("tr").eq(rowIndex).find("td").eq(count).text() !== "") {
check = false;
currentTableState.find("tr").eq(rowIndex).find("td").eq(count).text(value);
currentTableState.find("tr").eq(rowIndex).find("td").eq(count).css({"border":"1px solid rgb(230, 230, 230)", "color":"black"});
} else {
count--
}
}
}
}
function enterLetters() {
var currentTableState = $(".wordGrid");
if (rowIndex !== 5 && ((currentTableState.find("tr").eq(rowIndex).find("td").eq(4).text() !== "") === true)) {
var winCount = 0;
for (i=0; i < 5; i++) {
if (currentTableState.find("tr").eq(rowIndex).find("td").eq(i).text() === randomWordSplit[i]) {
currentTableState.find("tr").eq(rowIndex).find("td").eq(i).css({"background-color":"rgb(55, 180, 85)","color":"white"});
var letter = ".letter" + currentTableState.find("tr").eq(rowIndex).find("td").eq(i).text();
$(letter).css({"background-color":"rgb(55, 180, 85)","color":"white"});
winCount++
} else if (randomWordSplit.includes(currentTableState.find("tr").eq(rowIndex).find("td").eq(i).text()) === true) {
currentTableState.find("tr").eq(rowIndex).find("td").eq(i).css({"background-color":"rgb(250, 110, 50)","color":"white"});
var letter = ".letter" + currentTableState.find("tr").eq(rowIndex).find("td").eq(i).text();
var currentColor = document.querySelector(letter).style.backgroundColor;
if (currentColor !== "rgb(55, 180, 85)") {
$(letter).css({"background-color":"rgb(250, 110, 50)","color":"white"});
}
} else {
currentTableState.find("tr").eq(rowIndex).find("td").eq(i).css({"background-color":"rgb(70, 70, 70)","color":"white"});
var letter = ".letter" + currentTableState.find("tr").eq(rowIndex).find("td").eq(i).text();
var currentColor = document.querySelector(letter).style.backgroundColor;
if (currentColor !== "rgb(55, 180, 85)") {
if (currentColor !== "rgb(250, 110, 50)") {
$(letter).css({"background-color":"rgb(70, 70, 70)","color":"white"});
}
}
}
}
if (winCount === 5) {
winCheck(1);
}
rowIndex++
} else if (rowIndex === 5) {
var winCount = 0;
for (i=0; i < 5; i++) {
if (currentTableState.find("tr").eq(rowIndex).find("td").eq(i).text() === randomWordSplit[i]) {
currentTableState.find("tr").eq(rowIndex).find("td").eq(i).css({"background-color":"rgb(55, 180, 85)","color":"white"});
var letter = ".letter" + currentTableState.find("tr").eq(rowIndex).find("td").eq(i).text();
$(letter).css({"background-color":"rgb(55, 180, 85)","color":"white"});
winCount++
} else if (randomWordSplit.includes(currentTableState.find("tr").eq(rowIndex).find("td").eq(i).text()) === true) {
currentTableState.find("tr").eq(rowIndex).find("td").eq(i).css({"background-color":"rgb(250, 110, 50)","color":"white"});
var letter = ".letter" + currentTableState.find("tr").eq(rowIndex).find("td").eq(i).text();
var currentColor = document.querySelector(letter).style.backgroundColor;
if (currentColor !== "rgb(55, 180, 85)") {
$(letter).css({"background-color":"rgb(250, 110, 50)","color":"white"});
}
} else {
currentTableState.find("tr").eq(rowIndex).find("td").eq(i).css({"background-color":"rgb(70, 70, 70)","color":"white"});
var letter = ".letter" + currentTableState.find("tr").eq(rowIndex).find("td").eq(i).text();
var currentColor = document.querySelector(letter).style.backgroundColor;
if (currentColor !== "rgb(55, 180, 85)") {
if (currentColor !== "rgb(250, 110, 50)") {
$(letter).css({"background-color":"rgb(70, 70, 70)","color":"white"});
}
}
}
}
if (winCount === 5) {
winCheck(1);
} else {
winCheck(0);
}
}
}
function winCheck(value) {
if (value === 1) {
$("#keyboardBox").toggleClass("display-hide");
$(".winCondition").text("Congratulations! You won! The word was " + randomWord + ".");
$("#restartButton").toggleClass("display-hide");
} else {
$("#keyboardBox").toggleClass("display-hide");
$(".winCondition").text("Sorry, you lost! Better luck next time. The word was " + randomWord + ".");
$("#restartButton").toggleClass("display-hide");
}
}
Here is where the magic happens! the function addLetter finds the current state of the board, changes the screen to shown the inputted letters. The removeLetter function does the opposite. Once the user presses enter, the enterLetters function will run and it will do a check to initially see if 5 letters are chosen.
For every letter, it checks to see if its in the word, and its position. It then changes the colour of the letters accordingly to indicate whether it was correct, partially correct or wrong. This function is ran every time a word is inputted.
If all 5 are correct, it will run the winCheck function, which will show the congratulations screen and toggles the restart button to be shown. If all 6 guesses are entered and its wrong on the 6th guess, wincheck will be 0 and it will display losing text and again, shows the restart button.
Thank you very much for reading through this small project I made. Here is the link to the game itself to play, and all code is open-source and free to use. This was a fun project i worked on during 2022 and was enjoyable at the time. Despite the sadness of COVID-19, I still found motivation to do what i love!