Build Hangman Game with React JS
by kandikits
Hangman is a word or phrase guessing game for two or more players. One player will choose a secret word, and the other player(s) tries to guess that word by suggesting letters within a number of guesses.
In this challenge, we are inviting you to extend the game UI for multiple categories and also customize your own secret words for each category instead of using "an-array-of-english-words" in the random.js file. Add clues for the respective secret words to guess the correct words.
Kindly see below a sample solution kit to jumpstart your solution on creating Hangman Game. To install this kit, scroll down to Deployment Instruction and Instruction to run sections.
Complexity : Simple
Development Environment
Visual studio code IDE is used for this development. It becomes easy and simple to develop an interactive UI with Visual studio code.
React Native Component
React Native is an open-source UI software framework and it is also very popular in javascript-based application frameworks. This component is widely used for creating game applications.
React DOM Component
The following library could be used to create React DOM components in your application.
Kit Solution Source
The library added in this section is primarily used to create this project. The entire solution is available as a package to download from the source code repository.
Support
Quality
Security
License
Reuse
Kit Deployment Instructions
For Windows OS,
Download, extract and double-click kit_installer file to install the kit.
Note: Do ensure to extract the zip file before running it.
1. When you're prompted during the installation of the kit, press Y to launch the app automatically and this one will open the application in a
browser http://localhost:3000.
2. To run the app manually, press N when you're prompted and locate the respective zip file
3. Extract the zip file and navigate to the corresponding directory
4. Open command prompt in the extracted directory and run the command npm install && npm run start
Instruction to run:
Follow the below instructions to run the solution.
1. Locate and open the extracted zip file "react-hangman-master" in Visual studio code.
2. Execute the commands npm install && npm run start
3. Its starts the application in your local web server http://localhost:3000
For any customizations,
1. Create drop down button for different categories of your choice (eg. Fruits,Countries etc.) in App.js
2. Create a json file for secret words(eg: data.json) instead of using "an-array-of-english-words" in randomword.js
3. Add words and clues(for each words) in json array format in that created json file (eg: {
"countries":{"name":["india","china"],
"clue":["Taj Mahal ","world's longest wall "]},
"fruits":{"name":["banana","watermelon"],
"clue":["Cylindrical shape","oval shape and contain seeds"]}
}
4. Create functions for each category in randomword.js and in return statement along with the word also return clue.
5. In game-state-factory.js, for every category, call corresponding function and start the game. Get the category from App.js and use in game-state-factory.js
For any support, you can direct message us at #help-with-kandi-kits
Troubleshooting
1. While running batch file, if you encounter Windows protection alert, select More info --> Run anyway
2. During kit installer, if you encounter a Windows security alert ,click Allow
Support
If you need help to use this kit, you can email us at kandi.support@openweaver.com or direct message us on Twitter Message @OpenWeaverInc.