This is an offline-first web application derived from the classic game, Hangman. In this word guessing game, a secret word is randomly generated by the application and the user is given six chances to guess the word. The user can either (1) click on a letter on the onscreen keyboard or (2) guess the word by clicking on the lightning key, typing the letters in, and clicking submit.
The list of words is retrieved from the Word Guessing Game API at https://hp-word-guessing-game.herokuapp.com/words. A leaderboard is also implemented using a simple Node.js application that connects to a mongoDB database.
This application maintains a responsive design on mobile, tablet and desktop viewports and works offline. Any data previously accessed while connected is reachable while offline. Users are able to add high scores while offline and the scores are sent to the server when connectivity is re-established.
Make sure you have mongoDB and Node.js installed.
To allow the client application to access the Word Guessing Game API, I've installed the Allow-Control-Allow-Origin: * extension from the Chrome web store.
Also, please install the Baloo+Bhai and Chango fonts in the game-client/stylesheets/fonts folder.
Open a terminal window and execute the command below to start the Mongo server. Note that to stop the Mongo daemon, you can hit ctrl-c.
# mongod
Open another terminal window and execute the command belowto run the Mongo shell. Note that to exit the Mongo shell, you can run quit().
# mongo
Create the leaderboard database by typing the following in the Mongo shell terminal:
> use leaderboard
Add users to the leaderboard by pasting the code below in the Mongo shell terminal prompt and hitting enter:
db.users.insert({"user": "M16h0nne", "score": 8})
db.users.insert({"user": "Abr@h@m", "score": 2})
db.users.insert({"user": "C@r1", "score": "4"})
db.users.insert({"user": "C@ro1", "score": "7"})
db.users.insert({"user": "S4@ne", "score": "3"})
db.users.insert({"user": "M@gg1e", "score": "6"})
db.users.insert({"user": "G1enn", "score": "50"})
db.users.insert({"user": "D@ry1", "score": "30"})
db.users.insert({"user": "R!6k", "score": "25"})
db.users.insert({"user": "L0r1","score": "1"})
To verify that the users have been added correctly you can run the command below in the Mongo shell terminal:
> db.users.find()
Open a new terminal window, change to the directory containing to the game-server code and install the project dependencies
# npm i
Start the game-server application
# node app.js
The message below should be displayed on the terminal and you should now have access to the game server
Server listening on port 3000
To verify that the server is running, open your browser and load the following page http://localhost:3000/leaderboard. You should get a JSON object containing a list of users in the leaderboard.
Note that the Node.js application assumes that the mongodb database is hosted on port 27017.
Open a new terminal window, change to the directory containing to the game-client application code and run http-server
# http-server
The message below should be displayed on the terminal and you should now have access to the Word Play application
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://1XX.1XX.X.XXX:8080
Hit CTRL-C to stop the server
Open your browser and load the following page http://localhost:8080. You should see the Word Play application.
Clicking on the New Game button will retrieve a new word or phrase from the dictionary. If the secret word includes characters apart from A to Z (e.g. spaces, punctuation marks, numbers), those characters will be shown to the user.
The user will be given six chances to guess the word. To make a guess, users can either:
- Click on a letter from the onscreen keyboard, or
- Guess the entire word by clicking the lightning key, typing in the letters onto the boxes and clicking Submit.
Users can check the number of attempts they have left using the grapes or stars displayed on the upper left corner of the page. The number of attempts will be decreased by one, if the user chooses an incorrect letter or submits an incorrect word.
Letters that have already been previously clicked will be highlighted on the onscreen keyboard so users can easily identify them. A future enhancement idea is to allow users to view the history of submitted words.
Once the game has ended, the onscreen keyboard will remain disabled and users will have to click New Game to get a new word from the dictionary.
If the user successfully guesses the word, his or her score will be increased depending on the game level. For example, if game level is set to 2 then the score, will be increased by 2 points. If the user fails to guess the word after six attempts, the score will be reset to 0. If the user clicks on the New Game button without completing the current game, the score will be reset to 0.
If the user obtains a score greater than the minimum score in the leaderboard, a popup asking for the user's name will be displayed when the user clicks the New Game button (after the winning streak is broken).
Note that scores are tied to the current session and will be lost once the user closes the browser tab.
The leaderboard will only display the top ten scores in the database. Currently, the leaderboard doesn't take the game level used while getting the high scores into consideration. A future enhancement idea would be to group the scores based on the game level.
Users can configure the difficulty of the words by setting the slider in the Options modal. The slider value can be set to any integer between 1 to 10.
Users can configure the game theme by selecting the appropriate radio nutton in the Options modal. Currently, there are two themes available: Grapes and Stars.
- Hirza Pimentel - Initial work