A web version of the Boggle word game that includes a timer playing, then shows the maximum possible score and can highlight the path of each word found in the puzzle.
This is web implementation of the word game Boggle. It lets players generate new games using a grid of 16 lettered dice that conforms to their selected number of vowels (using more or fewer vowels makes it harder), then runs a timer while players find as many words as possible in the grid. At the end of the game, players can display a list of all the possible words in the current game and see the maximum possible score.
Choose the number of vowels to include in each game (changes the difficulty), then start the timer and find as many words as you can in 3 minutes. When the timer runs out, see how you did by checking the words you found against all the words represented in the game and see the game's maximum possible score.
When you open the webpage, a new game is generated by shuffling the dice and showing them on the screen. If you prefer, you can change the number of vowels you want in the puzzle, and a new game will be created with that number of vowels (games with either very low or very high numbers of vowels can be harder).
You then start the built-in timer and write down all words you find following the rules of Boggle (consecutive letters in words can connect in any direction, including diagonally, but each die can only be used once in each word).
When the time expires, count and score the words you found.
Then you can click on the checkbox to show the full list of words found in the puzzle and the maximum possible score. Clicking on any of the words in that list highlights its 'word path', or how it can be formed in the current puzzle. How well did you do?
A web worker loads a list of words while the game is being set up with the number of vowels you select. When you want to display the answers, the list of words is used to find all words in the current game and the paths taken by each through the letter dice.
To make this, I used a web worker that loaded a list of English words, later used to solve each game, in the background so that it doesn't affect the rest of the game rendering.
Each of the dice has the same letter faces as in the physical game, and this came with some extra edge case handling required for the 'Qu' die face having two letters instead of the usual one, and one of the dice not having any vowels.
I used a list of lists as the data structure to represent the 2-D board when shuffling for a new game, displaying the current game, and solving the game to show all the words that it contains.
For this solving, nested for loops and repeated function calls are used to find all the words in the given game by tracing potential paths letter-by-letter. This is set up to ensure that smaller words found inside larger words (e.g. 'home' and 'unfathomed') are counted as independent words.
This also keeps a record of the path each word forms through the game, so its can be highlighted when you click on any entry in the list of words found in the game.
A suite of functions using setInterval provide the ability to start, stop, re-start, and clear the built-in game timer.
game functions toggle highlighting the path formed by any word when it's clicked in the word list, and allowing the word list to be sorted either alphabetically (to find a particular word easily), or by the order that their first letter appears in the game grid (to see all words that start at a given die).
I've played a lot of Boggle with family and always have been curious about all the words in each game, because you never find them all by eye. This app lets you see the words you may have missed.
My family likes playing the word game Boggle. When playing, I've always been fascinated by how many words can be in certain game that some people see and other people don't.
That got me curious to make a web version that allows you to play Boggle and then show all the possible words (and the maximum score from them), so you can see how you did.
While I was building that, I also wanted to allow you to customize shuffling the dice for each game so that you can always get the number of vowels you want. sometimes a frustration when playing with physical dice where you have to roll several games before one comes up with enough vowels to be fun to play.
I started by getting the basic functionality of the game working, then added other features I wanted, like: an integrated timer, the ability to highlight the path of each possible word through the grid, and a slider to choose the number of vowels to include.
The basic project design was to include the grid of letters that could be re-shuffled to provide an online Boggle game, and that would be solved by the computer to show a list of all possible words and the maximum possible score.
As I was building it, I continued thinking of other enhancements that would extend its functionality in related ways and that would make it a more capable app.
The integrated timer, ability to include different numbers of vowels in each game, the color-coded trace of each word found in the game when it's clicked in the word list, and the ability to sort the word list either alphabetically or by die position of the first letter in the grid are all features I added to the project after building out the initial design.
The automatic solver that records all words in the current game and the way each word can be formed through the grid of dice.
I am most proud of the automatic solving capability of this app. I especially like how it can easily highlight the path of any found word in the grid, to see how quite long words or words with complex paths are represented in the puzzle.
The initial word finding was thorough but very slow. I found a heuristic to only try extending possible words if the first two letters were existing prefixes in the dictionary. This gave a large speed-up because it could quickly identify and abandon paths that could never form words.
After seeing how slowly the first iteration of the word finding algorithm worked when trying to find words through all combinations of neighboring letters, I created a heuristic method to speed it up.
For this, I first created a list of all 2-letter stems represented in English words. I then used that list to screen initial paths by looking at the letters surrounding each presumptive first word letter.
For each combination of potential first and second letter, I dropped any that were not in the list of 2-letter stems from any path tracing, and only kept those whose stems could lead to English words for further traversing. This modification reduced the search space required and increased the solve speed considerably.
Due to the game design of Boggle, there are also two edge cases with dice that need to be accounted for:
To accommodate this, I made sure it was rendered correctly in the board with a lowercase 'u', and counted the combination as a single letter when finding the two-letter word stems to determine possible word paths to explore.
I needed to prevent the use of this die when randomly choosing which dice (and also which faces of those dice) to use for making a game grid with the selected number of vowels.
This taught me how to use web workers for loading information in the background and finding paths through 2-D arrays including identifying and implementing ways to speed up that path finding.
Through this project I learned how to use web workers to load needed information for the webpage - in this case the word list - without blocking JavaScript's execution thread. I also learned how to reliably trace paths through 2-D arrays, including identifying and implementing heuristic rules to speed up the word search.