Playing Boggle Online - A Game For XMAS In Pure JavaScript, CSS and HTML
By Strictly-Software
I made this online version of Boggle, the shake letters and make words from letters that join together as my Dad was learning JavaScript, HTML and CSS. So I made it purely in those languages.
You too can play the game if you want online on any up to date browser that is standard compliant and runs JavaScript on my site at https://www.strictly-software.com/games/boggle.html
The version I made uses a single Boggle object with a number of settings, properties and timers. I have split all the functions out into their own methods and added some features that let you edit the game such as:
-The time the game plays for. It defaults to 03:00 minutes but you can change it to any time in the 00:00 format.
-There is a drop down box with Easy, Medium and Hard for you to select. Each option has a different array of letters that are randomly picked for the game. You are more likely to get multiple X, Z and Qu's in the hard level than the easy one.
-There is an option to select the MAXIMUM red letters than appear in a game. It defaults to 3. You might not get 3 but you won't get over 3. You can change this to another numerical value up to 9. When you pick a word containing a red letter you get double points.
-There is a random tick box which means that the letters chosen for the game are purely picked at random from the alphabet array defined in the Boggle object.
If your browser is working (I have tested it on my TV, Laptop, Tablet and phone) then the countdown timer should turn from green to yellow after 90 seconds and then start flashing red during the last 30 seconds before beeping at the end.
If your TV doesn't do all this then it is down the the TV's browser. Test it online on a PC/Laptop first to ensure it all works.
We played a few games of it at Christmas and it worked perfectly.
It is an ideal way for someone learning HTML, JavaScript and CSS to understand the code, tweak it and learn about selectors, short cuts, regular expressions and so on.
It makes use of my lightweight framework which supports chaining, setting HTML, removing nodes callbacks, CSS selectors and much more.
You can read about the Getme.js framework and how I made it here > http://blog.strictly-software.com/2009/10/build-your-own-framework.html.
I use SS instead of $ like jQuery and other frameworks and I am of the mindset that pure JavaScript should be used as much as possible.
An example of chaining is joining multiple functions together with one initial selector to pick the array of nodes to work on.
SS("DIV .mycontrols input).setAtts({style:"color:black;"}).setHTML("Game Over!);
Where the node list (array) from the first selector is passed into the second function so that only those relevant nodes/elements are acted upon. Read the Getme.js article for more details.
All the files can be downloaded to your local machine to play offline and In Chrome to see the code in action go to More Tools > Developer Tools and open the Console in the bottom part of the screen.
Turn the debug variable in the Boggle.html file to true and you will see all the debug to help you understand which functions are being called and if any errors are shown they will appear in red.
Play around and make the CSS, HTML different and add extra functions or features with JavaScript.
Play it online here > https://www.strictly-software.com/games/boggle.html
Enjoy the game, we did!
Posts
