Let’s play a game!

Over the past two years, I’ve learnt a bit of Javascript (JS) to scrape and transform data from websites. Having never written JS before, this was my entry to coding for the web and was quite fun. To extend my skills, I wanted to use some of the front-end JS I’ve learnt to build a simple word game. This is that game!

Let’s Play!

First, you can find the rules here: How to Play.

Then, find another human near you and click below to play.

Play WordBugs

Now onto how I built this:

Story Time

This game started as a spoken-out-aloud game played with my SO who’s a vocabulary fiend like me (she’s better though).The spoken rules are identical to the “How to Play” rules above.

Initially, the scope was simple. The game interface was just there to keep scores and the current word fragment. The players were still responsible for defining if a word was created and/or if the current letters couldn’t lead to a word. After a quick wireframe in Notes:

I fired up VS Code and using the incredibly helpful Live Server plugin and too many Google searches, I built this out of plain old HTML and CSS:

Not exactly pretty, but it gave me the framework to ✨do cool stuff✨.

First, I defined the instructions for the interactions with the site:

• If addButton tapped:
  • Take the characters from the text box and append them to the existing word fragment.
  • Clear the text box.
• If resetButton tapped:
  • Set p1score and p2score to zero
  • Set word fragment to empty string
  • Clear the text box
• If p1winButton tapped:
  • Increment p1score
  • Set word fragment to empty string
  • Clear the text box
• If p2winButton tapped:
  • Increment p2score
  • Set word fragment to empty string
  • Clear the text box

Then I took these specs and wrote the actual JS, making the site work interactively. This was the real “it’s alive” moment for me.

After adding in Bootstrap to make the site pretty and responsive (shout out to Start Bootstrap for the theme), I had a prettier version with identical functionality:

This looked nice but wasn’t very smart. I wanted the logic for valid and invalid words to be built into the game with automatic scoring.

That would need more JS and the addition of a word list. After some searching, I happened upon the SCOWL (Spell Checker Oriented Word Lists) and Friends database. It’s really handy because it lets you build word lists based on parameters like British and American Spelling, diacritics and size of word list.

A new challenge was that this word list had to be downloaded by the user’s browser each time the game loaded (assuming no caching) so I chose the smallest word list available (SCOWL_10) for testing. It had 4492 words with the options chosen and was 37KB in size. I updated the site code and it could now automatically score players based on it’s internal word list:

However, this list was severely restrictive when actually playing. It just didn’t have enough words. Since the average 20-year-old American knows 42000 words, we’d need a word list with a lot more words. Also, due to the nature of the game, I expect players to play towards more esoteric words to beat opponents (check your vocabulary here). So I went back to SCOWL and grabbed SCOWL_50 with ±104k words and a 992KB file size. That worked but I needed to trim down that 992KB file size.

Knowing how the game works allowed me to do just that. Looking at this extract of my SCOWL_50 in Excel, I see potential optimizations. Can you see them?

First, we can remove all the words with apostrophes as these aren’t part of the game. Second, any words < 3 characters in length can be dropped due to the 3 character minimum word length. Third, since the game considers a player to have lost the moment a valid english word is made, there are many words that will never be used. Zoo will match and end the turn before zoological, zoologist, zoologists, zoology, zoom, zoomed, zooming, zooms and zoos could be chosen so they should be culled.

Am I going to manually go through those 100k words to do this? Hell no, Python will handle it.

No, not that python. (Yes I made this joke before, yes I still think it’s funny.)

Time to fire up Anaconda and drop into a jupyter notebook and code up the word removal logic in python:

Also not a snake.

But first, some pseudocode:

✍️Not Pretty✍️

And the actual code in the jupyter notebook (split into two parts for easier debugging):

This worked way above my expectations:

• SCOWL_10
  • Initial File Size: 35KB
  • Initial Number of words: 4492
  • Final (post-processing) File Size: 14KB
  • Final (post-processing) Number of words: 1977
• SCOWL_50
  • Initial File Size: 991KB
  • Initial Number of words: 104332
  • Final (post-processing) File Size: 106KB
  • Final (post-processing) Number of words: 12794
• SCOWL_95 (a massive word list)
  • Initial File Size: 7MB
  • Initial Number of words: 671196
  • Final (post-processing) File Size: 305KB
  • Final (post-processing) Number of words: 34046

It’s crazy that the massive SCOWL_95 list that I included just for fun could end up around 5% of it’s initial file size and only 305KB. That’s a third of the size of the SCOWL_50 list so I was very happy there. Lots of weird, archaic and esoteric words are now the word list currently used in WordBugs.

To close things off, I wanted the ability to “install” WordBugs so it works like a native app. Files were generated here and added. Now when adding to the home screen, it resembles a native app, neat.

Look Ma, no URL bar

Post-Build Summary

I am now a front-end web developer and game designer! Ok, not really, but I’ve learnt a fair bit and am happy with how the game turned out. Coding for the web is really fun and having every browser be a live JS environment means that anyone can have a play. Big shout outs to MDN for their excellent documentation.

The Future

Apart from aesthetic tweaks, word list corrections and a future port to React, online multiplayer could be fun…

If you have any questions/would like to share your experience with JavaScript, Python or general front-end stuff, leave a reply below. Also get in touch if you find any word bugs or code bugs! 😃 To get an email when I write another post, click here to subscribe. Thanks for reading!

❤️