My Secret Word Game

This is a simple browser game I created in order to display some of my web application development capabilities. I decided on a web application project that would serve a list of purposes for me.

  1. Demos some of my HTML/CSS capabilities.
  2. Demos some of my Javascript, JQUERY, and object-oriented understanding.
  3. Demo some creativity.
  4. improve on my writing skills.

The original idea for this project was the game Hangman but while making plans for its HTML canvas illustration, I felt that it was not the best idea. Reason being, the imagery of a hanging man could be viewed as offensive. Therefore making it inappropriate.

Although I wanted to move away from Hangman I did not want to abandon the game concept entirely. Still attached to the rules of Hangman, I decided to continue with the general rules of the game just change the rewards, and consequences.

So instead of preventing a person from hanging, I removed the graphics and what was left was a simple word guessing game. A fan of the “word of the day” by the NEW YORK TIMES and Merriam Webster’s online dictionary I thought it would be a good idea to use some my favorite words from their publications for the game. This also gave me a chance to improve my vocabulary.

How to play

The game is simple. Like in Hangman, guess the letters in the secret word to display them. If you guess a wrong letter you lose an “attempt”. 5 wrong guesses and you lose. If you think you know the word, you can guess the entire word by using the input field at the bottom. A wrongly guessed word equals one attempt. The only clue you get is the definitions of the secret word. Try Below!

See the Pen secret word Game by Armani Appolon (@Armania) on CodePen.

Development Challenges

The first thing I did in starting this project was to write down a list of all its challenges. A Challenge represented an action that needs to be performed by the application (mostly via javascript). Challenges included,

  • Store a dictionary of words.
  • Select a random word, and display its hidden characters.
  • Track user attempts. Track each letter attempt or word entry attempt.
  • Reveal letter(s) multiple letters on letter correct button clicks.
  • Check for a win. Check for word submission match or if all letters are revealed.
  • Check for a lost.
  • Reset game.
  • Display Content.

Technology

This game uses a few web application technologies and some of their popular libraries.

  • HTML5
  • CSS
  • Javascript
  • Jquery 3.3.1 (javascript library)
  • Bootstrap 4.1.3 (CSS and Javascript)
  • Font Awesome 5.6.3 (graphics)

Varaibles

  • Dictionary (object) – All of the vocabulary words for the game.
  • Max (Num) – The max number of words in the dictionary.
  • Word (object) – The chosen word.
  • Random (Num) – Random number between 0 and max number.
  • Attempts (array) – A list of attempted words and letters.

Function lists

  • CheckWinner(); – Check if the player has discovered the secret word.
  • checkGameOver(att); – check how many attempts are left for the player.
  • hideWords(); – hide the letters of the secret word.
  • Newgame(); – reset word and set up a new game.

In Conclusion

This game took me an estimated 8 hours to complete, not including 30 to 45 minutes to plan development. This was short but quite satisfying. I plan on using this game for studying new vocabulary words I explore as I work on my writing skills.

Feel free to try the game out for yourself. Please email or comment any bugs or suggestions. I will even accept vocabulary words to add to the game.

Next Steps

This is my first edition of the game. I will work to improve the game over time. There are a few things I thought of changing while working on this rendition. Some example of these updates include…

  • Update AJAX dictionary – Currently, the library is stored in a javascript file as an object. Next version will use ajax with a database, CSV file or JSON file.
  • Phrases: Introduce spaces for words phrases and punctuations.
  • Groups/Categories – Group words together for example like Important People, Cities, or Words.
  • Add a Point System – I would like to add points to the game. for example additional points for solving letters in a row. Also, points deduction for wrong guesses.
  • Create Difficulty Levels – Add a degree of difficulty (ie easy, normal, hard. ) that will use words with low, or higher, character lengths and attempts depending on the set difficulty.
  • Introduce Animation/graphics: Add graphics, animations or memes for after submissions.
  • Add rules: Two attempts for guessing incorrect vowels.

Written by 

The Armani.

Leave a Reply