How To Code Viral Wordle Game In JavaScript

How to code Wordle online word games

If your social feeds are full of people sharing green, gray, and yellow square emojis, you’re probably familiar with Wordle, the deceptively simple online word game that’s been blown up in recent months.

Wordle challenges you to guess a random word of five letters in six attempts. Playing Wordle can be frustratingly difficult, but coding it was easy, according to Josh Wardle, who built the game in November as a fun activity for his wife. Now hundreds of thousands of people play Wordle every day and share their statistics (in the form of emoji squares) on social media.

Are you curious about how a viral game like this is made? Here are the skills you need to learn to code a game as simple and satisfying as Wordle:

How Wordle works

Wordle has a keyboard and 30 letters that change color after each guess: A green square means you have selected the correct letter in the correct position, yellow means that the word contains the letter elsewhere, and gray means that it does not is in the word at. all. That is it.

Wordle is deliberately underplayed, according to Wardle. “I built it as simple as possible,” Wardle, a Brooklyn-based software engineer who previously worked at Reddit, told TechCrunch.

It’s not an app or a piece of software, “it’s literally just a website and some JavaScript downloading,” Wardle told TechCrunch. “And once downloaded, it never has to do anything again.” Wordle lives on Wardle’s personal website, which has no backend, so it will not be bound by the growing fanbase, he told TechCrunch.

How to build a game like Wordle

All it takes to encode a game like Wordle is JavaScript, HTML and some CSS, explains Nik Dolan-Stern, a Curriculum Developer at Codecademy. “Basically, any beginner’s course in a language can teach you most of the mechanics of this game,” they say.

Once you have mastered the programming language, Nik says you could use loops to create the mechanism that checks for guesswork in the solution. “All that logic is pretty straightforward,” they say. “Okay, is this letter contained in this set of other letters? Is it both in the set and in the correct position?”

For example, here is a piece of code that Nik wrote (check out their workspace here):

  for (let i = 0; i < guess.length; i++) {
    let guessLetter = guess.charAt(i);
    let solutionLetter = solution.charAt(i);
    if (guessLetter === solutionLetter) {
      result.push("Green");
    }
    else if (solution.indexOf(guessLetter) != -1) {
      result.push("Yellow");
    }
    else {
      result.push("Grey");
    }
  }

Wordle’s runaway success is proof that even beginner code can create cultural influence. “The fact that this is popular is so cool because I love the idea of ​​students seeing this and feeling, ‘This is something I can do,'” Nik says.

So far, Wardle has said it’s off the table to make a Wordle app. “I do not have the skills,” he told TechCrunch. “I had to invest the time to learn to do it, which I could do, but it would be an investment of my time.”

Motivated to build your own Wordle-like game? Start by taking our Learn JavaScript course, then learn how to build a video game app with our game development courses. You can share your progress (and get some help from the community if you need it) in our forums. And do not forget to write again to show the finished product. Who knows? Maybe your game goes viral too.


JavaScript Tutorial: Learn JavaScript for Free | Code Academy

Learn the basic JavaScript principles you need for front-end or back-end development.

William

Leave a Reply

Your email address will not be published. Required fields are marked *