Blog

So, I - like many others - started playing Wordle (a great game) around Christmas 2021. I loved it but it remined me of a game I built in Python for my kids when I was trying to learn more languages. It was just like one of the old code cracking games but with actual words. I had made it about 3 years prior and so thought it wouold be good to test what I remembered.

I created a basic version of wordle in about half an hour on python using the command line as the user interface. It worked but wasn't very exciting.

Next, considering I had become more familiar with Javacsript over those 3 years, I thought I'd convert what I'd done to JS. 2 reasons: Firstly, it was another challenge and secondly, it could then be made into a website based game, just like wordle. I wasn't aware that thousands of other people had the same idea. What's different though between myself and most of the other enthusiasts was for the most part that I had made mine from scratch. A benefit of this approach was that along the way I could make decisions about exactly how I wanted it to behave. For example, I initially implemented very basic letter colouring logic that I eventually changed because people thought it was misleading if there were double letters. But that was my code and my choice - and then my users' choice for me to change it. I enjoyed this freedom. Another expression of my freedom was to allow users to guess any letters, it didn't have to be a word, it just had to be letters.

My initial stab didn't have a daily challenge but that was naive given that it was this that made wordle go viral in the 1st place - that daily comparison with your peers. So I refactored some code to have 2 modes: daily vs practice. This meant I could use practice mode as a test bed for other features such as displaying the number of possible answers based on what had already been guessed. It was starting to stretch my abilities.

I started to become more active on reddit - something I'd never really been on before - and engaging with the lovers of wordle the world over. It was really nice to see such an appetite for this kind of game and it meant I could discuss potential new features with a really engaged audience.

My next challenges are to show a countdown of how many attempts you have left after each go. I don't have a grid like the original. Just a styling preference. Plus, as I removed the user input field and replaced it with letter tiles appearing a syou type, it was much easier to leave it centre aligned (therefore rendering a grid useless). I'd also like to implement a method of challenging a friend to a word that you choose - the challenge a friend function does work well but isn't massively used so I wasn't to encourage as many social shares as possible. This would of course need to be based on a real word.

One thing that I would urge anyone to do, who is considering doing this (making a wordle spin off) would be to keep it client side only. It's what makes it special. It has a certain charm and simplicity that appeals. It should be low maintainance - require 0 network calls and work from good old fashioned HTML, CSS and JS.

What's great about it is that it has lots of different challenges to code - and none of them are original so there's planty of resources online to help. I would often try to recreate something myself, and if it worked - great! I would live with it and maintain it; such as the modals that are used for displaying the instructions and the statistics to the user. I got those working but they also had added complexity because they wouldn't always cover the keyboard and therefore the user could still type whilst they were on screen (not ideal). So then came the overlay, which is the semi-transparent layer between the modal and the game that protects everything else. Coding these bits was fine but other bits such as the countdown timer to the next game were tough and so I had to use things like codepen etc. to help. Luckily Javascript is a great language and easy to pick up so nothing was ever too hard. Actually that's a lie - the hard bit as mentioned above was updating the logic to show the correct colours on the user's guesses. Blue for a letter in the word but incorrectly placed...fine! Green for a correctly placed letter...also fine! But then you get a load of double letter scenarios; either they guess a letter twice that only exists once and neither are placed correctly. With the initial logic both appear blue. But this is misleading and the user thinks there are 2 of that letter in the answer. So there are some loops within loops and variables comparisons that switch context which I gradually worked out but it was tough. What really helped with this was a logical process flow diagram. It meant I could debug without writing code, testing words against pre determined answers to see how they woudl appear. Then I just had to code up the final result. Tip: give yourself really clear commenting as you build. This will really help to read complex bits of code and use sensible variable names. You don't want to trip yourself up for no good reason.