Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 29 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,29 @@
# Create a game

## Overview
Create a hangman game! <br>
Example of what we want to accomplish
![Example of hangman game](images/example.jpg)
### Requirements

1. HTML:
1. Add buttons that correspond to each letter from a to z.
2. Add a section that will hold the blanks that are going to be equal to the number of characters for the current word.
3. Add a div to show the man who's going to be hanged if you lose.
4. Add a counter from 10 that will decrease by 1 with every wrong guess.
4. Add a button to play again.

2. JS:
1. At the beginning use fetch API to retrieve a random word from this api https://random-word-api.herokuapp.com/word?number=1. Make the blanks equal the number of letters in the random word.
2. Everytime the user clicks on one of the letters the following should happen:
1. The random word is search through to find if it contains the clicked letter, if the clicked letter is part of the random word's letters then it gets shown up instead of the space, if not, then the lives counter is decreased by one. In some rare cases a clicked letter corresponds to two letters in the generated word, if that happens then show both words.
2. The button becomes disabled and should only work once.
3. If the lives counter reaches 0 then the game is over and the hangman should be HANGED! 👨‍🦱🔪
4. Clicking on the play again button should do the whole process again.


NOTE: Be creative with the game's mechanics and design!!!
Have fun, and Good luck :D
# Hangman Game

The most Dangerous game you will ever play! if you don't win a person will be hanged 👨‍🦱🔪 !! <br>
Visit <a href="https://nifty-booth-cc2308.netlify.app/">Hangman netlify</a> or <a href="https://areeg94fahad.github.io/hangman/">Hangman github</a> to play .

## Game OverView

The purpose of the game is to guess the word to save the person from being hanged <br><br>
![game photo](images/Hangman.png)<br><br>
if you guessed the words right the person will survive <br><br>
![win](images/hangman-win.png)<br><br>
if you guessed the words wrong the person will die <br><br>
![lost](images/hangman-lose.png)<br><br>

### How to play

1. press the letter that you think is the correct one and if it is, it will show.
2. if you guessed the word wrong the counter will decrease and the person will be a closer to be hanged.
3. you have 2 hints in which each one of them will show a letter for you.
4. you can restart the game by pressing play again and another word will show.

#### Technology

this game is bulit using React JS

#### Contributors

this game is developed by Lava Team <br><br>
![team](images/lava-team.jpg)<br>
5 changes: 5 additions & 0 deletions hangman/.eslintcache
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<<<<<<< HEAD
[{"D:\\hang\\hangman_react_js\\hangman\\src\\index.js":"1","D:\\hang\\hangman_react_js\\hangman\\src\\component\\Hangman.jsx":"2","D:\\hang\\hangman_react_js\\hangman\\src\\component\\ImagesCount.jsx":"3","D:\\hang\\hangman_react_js\\hangman\\src\\component\\GameStatus.jsx":"4","D:\\hang\\hangman_react_js\\hangman\\src\\component\\Header.jsx":"5"},{"size":517,"mtime":1612548725094,"results":"6","hashOfConfig":"7"},{"size":6083,"mtime":1612548724995,"results":"8","hashOfConfig":"7"},{"size":834,"mtime":1612559365560,"results":"9","hashOfConfig":"7"},{"size":694,"mtime":1612548724993,"results":"10","hashOfConfig":"7"},{"size":404,"mtime":1612548724995,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"55pnv5",{"filePath":"14","messages":"15","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"16","messages":"17","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"18","messages":"19","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\hang\\hangman_react_js\\hangman\\src\\index.js",[],"D:\\hang\\hangman_react_js\\hangman\\src\\component\\Hangman.jsx",["22"],"D:\\hang\\hangman_react_js\\hangman\\src\\component\\ImagesCount.jsx",["23"],"D:\\hang\\hangman_react_js\\hangman\\src\\component\\GameStatus.jsx",["24"],"D:\\hang\\hangman_react_js\\hangman\\src\\component\\Header.jsx",[],{"ruleId":"25","severity":1,"message":"26","line":58,"column":51,"nodeType":"27","messageId":"28","endLine":58,"endColumn":53},{"ruleId":"29","severity":1,"message":"30","line":15,"column":5,"nodeType":"31","messageId":"32","endLine":17,"endColumn":6},{"ruleId":"25","severity":1,"message":"26","line":13,"column":42,"nodeType":"27","messageId":"28","endLine":13,"endColumn":44},"eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","no-useless-constructor","Useless constructor.","MethodDefinition","noUselessConstructor"]
=======
[{"C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\App.js":"1","C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\index.js":"2","C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\Hangman.jsx":"3","C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\ImagesCount.jsx":"4","C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\Buttons.jsx":"5","C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\PlayAgainn.jsx":"6","C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\reportWebVitals.js":"7","C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\SecretWord.jsx":"8","C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\GameStatus.jsx":"9","C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\Hint.jsx":"10","C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\Header.jsx":"11","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\reportWebVitals.js":"12","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\ImagesCount.jsx":"13","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\Hangman.jsx":"14","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\Header.jsx":"15","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\index.js":"16","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\Hint.jsx":"17","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\Buttons.jsx":"18","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\GameStatus.jsx":"19","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\PlayAgainn.jsx":"20","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\SecretWord.jsx":"21","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\App.js":"22"},{"size":326,"mtime":1612463172427,"results":"23","hashOfConfig":"24"},{"size":500,"mtime":1612039871283,"results":"25","hashOfConfig":"24"},{"size":5999,"mtime":1612471079772,"results":"26","hashOfConfig":"24"},{"size":808,"mtime":1612468462227,"results":"27","hashOfConfig":"24"},{"size":471,"mtime":1612452905931,"results":"28","hashOfConfig":"24"},{"size":326,"mtime":1612459455963,"results":"29","hashOfConfig":"24"},{"size":362,"mtime":1612039871283,"results":"30","hashOfConfig":"24"},{"size":708,"mtime":1612454111679,"results":"31","hashOfConfig":"24"},{"size":657,"mtime":1612462233971,"results":"32","hashOfConfig":"24"},{"size":377,"mtime":1612460500752,"results":"33","hashOfConfig":"24"},{"size":404,"mtime":1612459210149,"results":"34","hashOfConfig":"24"},{"size":362,"mtime":1612039871283,"results":"35","hashOfConfig":"36"},{"size":808,"mtime":1612552527933,"results":"37","hashOfConfig":"36"},{"size":7037,"mtime":1612612037548,"results":"38","hashOfConfig":"36"},{"size":404,"mtime":1612459210149,"results":"39","hashOfConfig":"36"},{"size":500,"mtime":1612039871283,"results":"40","hashOfConfig":"36"},{"size":376,"mtime":1612527189641,"results":"41","hashOfConfig":"36"},{"size":474,"mtime":1612551991060,"results":"42","hashOfConfig":"36"},{"size":694,"mtime":1612552009075,"results":"43","hashOfConfig":"36"},{"size":326,"mtime":1612459455963,"results":"44","hashOfConfig":"36"},{"size":708,"mtime":1612454111679,"results":"45","hashOfConfig":"36"},{"size":453,"mtime":1612609046641,"results":"46","hashOfConfig":"36"},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"13fxjxu",{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},{"filePath":"52","messages":"53","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"54","messages":"55","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"56","messages":"57","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"58","messages":"59","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"64","messages":"65","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"66"},{"filePath":"67","messages":"68","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"69","messages":"70","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},{"filePath":"71","messages":"72","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"rg60hw",{"filePath":"73","messages":"74","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"75","messages":"76","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"77","messages":"78","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"79","messages":"80","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"81","messages":"82","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"83","messages":"84","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"85","messages":"86","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"87"},{"filePath":"88","messages":"89","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"90"},{"filePath":"91","messages":"92","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"93"},{"filePath":"94","messages":"95","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\App.js",[],"C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\index.js",[],["96","97"],"C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\Hangman.jsx",["98"],"C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\ImagesCount.jsx",["99"],"C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\Buttons.jsx",["100"],"C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\PlayAgainn.jsx",["101"],"C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\reportWebVitals.js",[],"C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\SecretWord.jsx",["102"],"C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\GameStatus.jsx",["103"],"import React, { Component } from 'react'\r\n\r\nexport default class GameStatus extends Component {\r\n\r\n\r\n render() {\r\n return (\r\n <div className=\"grid-col\">\r\n \r\n {\r\n (this.props.gameStatus==='active')\r\n ? <h2 className=\"trailes\">Tries Left: {this.props.counter}</h2> \r\n : (this.props.gameStatus == \"win\")\r\n ? <h1 className=\"win\">You Won the Game with {11 - this.props.counter} try(s)!!!!</h1>\r\n :<h1 className=\"lose\" {...this.props.onClick()} >You Lost :( </h1>\r\n\r\n }\r\n </div>\r\n )\r\n }\r\n}\r\n","C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\Hint.jsx",["104"],"C:\\Users\\A\\bootcamp\\week-2\\02-start-games\\src\\component\\Header.jsx",[],"C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\reportWebVitals.js",[],"C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\ImagesCount.jsx",["105"],"C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\Hangman.jsx",["106"],"C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\Header.jsx",[],"C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\index.js",[],"C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\Hint.jsx",["107"],"C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\Buttons.jsx",["108"],"C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\GameStatus.jsx",["109"],"import React, { Component } from 'react'\r\n\r\nexport default class GameStatus extends Component {\r\n\r\n\r\n render() {\r\n return (\r\n <div className=\"grid-col mt-10px\">\r\n \r\n {\r\n (this.props.gameStatus==='active')\r\n ? <h2 className=\"trailes\">Tries Left: {this.props.counter}</h2> \r\n : (this.props.gameStatus == \"win\")\r\n ? <h1 className=\"win\">You Won the Game with {11 - this.props.counter} try(s)!</h1>\r\n :<h1 className=\"lose\" {...this.props.onClick()}> RIP!<br></br> Better Luck in the next life. </h1>\r\n\r\n }\r\n </div>\r\n )\r\n }\r\n}\r\n","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\PlayAgainn.jsx",["110"],"import React, { Component } from 'react'\r\n\r\nexport default class PlayAgainn extends Component {\r\n constructor(props){\r\n super(props)\r\n }\r\n render() {\r\n return (\r\n \r\n <button onClick={this.props.onClick} className=\"btn blue\" >Play Again</button>\r\n \r\n )\r\n }\r\n}\r\n","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\component\\SecretWord.jsx",["111"],"import React, { Component } from 'react'\r\n\r\nexport default class SecretWord extends Component {\r\n constructor(props){\r\n super(props)\r\n }\r\n \r\n \r\n render() {\r\n return (\r\n <div className=\"letters\">\r\n \r\n {\r\n this.props.word.split(\"\").map((letter, index) =>\r\n this.props.correctLetters.includes(letter)\r\n ? <span key={index} className=\"lettersKnwn \"> {letter} </span>\r\n : <span key={index} className=\"lettersNotKnw \" > ? </span>\r\n \r\n )\r\n \r\n \r\n \r\n }\r\n\r\n \r\n </div>\r\n )\r\n }\r\n}\r\n","C:\\Users\\A\\bootcamp\\assignments\\hangman_react_js\\hangman\\src\\App.js",[],{"ruleId":"112","replacedBy":"113"},{"ruleId":"114","replacedBy":"115"},{"ruleId":"116","severity":1,"message":"117","line":58,"column":51,"nodeType":"118","messageId":"119","endLine":58,"endColumn":53},{"ruleId":"120","severity":1,"message":"121","line":15,"column":5,"nodeType":"122","messageId":"123","endLine":17,"endColumn":6},{"ruleId":"120","severity":1,"message":"121","line":5,"column":3,"nodeType":"122","messageId":"123","endLine":8,"endColumn":4},{"ruleId":"120","severity":1,"message":"121","line":4,"column":5,"nodeType":"122","messageId":"123","endLine":6,"endColumn":6},{"ruleId":"120","severity":1,"message":"121","line":4,"column":5,"nodeType":"122","messageId":"123","endLine":6,"endColumn":6},{"ruleId":"116","severity":1,"message":"117","line":13,"column":42,"nodeType":"118","messageId":"119","endLine":13,"endColumn":44},{"ruleId":"120","severity":1,"message":"121","line":5,"column":5,"nodeType":"122","messageId":"123","endLine":7,"endColumn":6},{"ruleId":"120","severity":1,"message":"121","line":15,"column":5,"nodeType":"122","messageId":"123","endLine":17,"endColumn":6},{"ruleId":"116","severity":1,"message":"117","line":71,"column":58,"nodeType":"118","messageId":"119","endLine":71,"endColumn":60},{"ruleId":"120","severity":1,"message":"121","line":5,"column":5,"nodeType":"122","messageId":"123","endLine":7,"endColumn":6},{"ruleId":"120","severity":1,"message":"121","line":5,"column":3,"nodeType":"122","messageId":"123","endLine":8,"endColumn":4},{"ruleId":"116","severity":1,"message":"117","line":13,"column":42,"nodeType":"118","messageId":"119","endLine":13,"endColumn":44},{"ruleId":"120","severity":1,"message":"121","line":4,"column":5,"nodeType":"122","messageId":"123","endLine":6,"endColumn":6},{"ruleId":"120","severity":1,"message":"121","line":4,"column":5,"nodeType":"122","messageId":"123","endLine":6,"endColumn":6},"no-native-reassign",["124"],"no-negated-in-lhs",["125"],"eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","no-useless-constructor","Useless constructor.","MethodDefinition","noUselessConstructor","no-global-assign","no-unsafe-negation"]
>>>>>>> b59c7bfc37e5d850f3ce1188bee76106c21a861c
Loading