├── img
├── smo'.avif
├── head-PhotoRoom.png
├── webstartview.jpg
├── mobilestartview.jpg
├── fullBody-PhotoRoom.png
├── hook-PhotoRoom (1).png
├── leftarm-PhotoRoom.png
├── leftleg-PhotoRoom.png
├── rightleg-PhotoRoom.png
├── midsection-PhotoRoom.png
└── rightarm-PhotoRoom (1).png
├── readme.md
├── index.html
├── style.css
└── script.js
/img/smo'.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LatoyaHead/Hangman-Game/HEAD/img/smo'.avif
--------------------------------------------------------------------------------
/img/head-PhotoRoom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LatoyaHead/Hangman-Game/HEAD/img/head-PhotoRoom.png
--------------------------------------------------------------------------------
/img/webstartview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LatoyaHead/Hangman-Game/HEAD/img/webstartview.jpg
--------------------------------------------------------------------------------
/img/mobilestartview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LatoyaHead/Hangman-Game/HEAD/img/mobilestartview.jpg
--------------------------------------------------------------------------------
/img/fullBody-PhotoRoom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LatoyaHead/Hangman-Game/HEAD/img/fullBody-PhotoRoom.png
--------------------------------------------------------------------------------
/img/hook-PhotoRoom (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LatoyaHead/Hangman-Game/HEAD/img/hook-PhotoRoom (1).png
--------------------------------------------------------------------------------
/img/leftarm-PhotoRoom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LatoyaHead/Hangman-Game/HEAD/img/leftarm-PhotoRoom.png
--------------------------------------------------------------------------------
/img/leftleg-PhotoRoom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LatoyaHead/Hangman-Game/HEAD/img/leftleg-PhotoRoom.png
--------------------------------------------------------------------------------
/img/rightleg-PhotoRoom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LatoyaHead/Hangman-Game/HEAD/img/rightleg-PhotoRoom.png
--------------------------------------------------------------------------------
/img/midsection-PhotoRoom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LatoyaHead/Hangman-Game/HEAD/img/midsection-PhotoRoom.png
--------------------------------------------------------------------------------
/img/rightarm-PhotoRoom (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LatoyaHead/Hangman-Game/HEAD/img/rightarm-PhotoRoom (1).png
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Hangman Game Project
2 |
3 | ## Description
4 | Hangman Game
9 |
10 |
11 | Hangman Game
12 |
13 |
16 |
17 |
PLAYER 1 TURN
18 |
19 |
20 |
GAME MODE
21 |
22 | 1 PLAYER
23 | 2 PLAYER
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
56 |
57 |
58 |
59 |
PLAYER 2 TURN
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
Select A Category `;
70 | let buttonCon = document.createElement("div");
71 | buttonCon.classList.add('center')
72 | for (let value in options) {
73 | buttonCon.innerHTML += `${value} `;
74 | }
75 | optionsContainer.appendChild(buttonCon);
76 | };
77 | const removeHangman = () => { //Built this function to remove hangman body parts
78 | hangmanHead.style.display = 'none'
79 | hangmanHead1.style.display = 'none'
80 | hangmanBody.style.display = 'none'
81 | hangmanBody1.style.display = 'none'
82 | hangmanRightArm.style.display = 'none'
83 | hangmanRightArm1.style.display = 'none'
84 | hangmanLeftArm.style.display = 'none'
85 | hangmanLeftArm1.style.display = 'none'
86 | hangmanLeftLeg.style.display = 'none'
87 | hangmanLeftLeg1.style.display = 'none'
88 | hangmanRightLeg.style.display = 'none'
89 | hangmanRightLeg1.style.display = 'none'
90 | }
91 |
92 | //Block all the Buttons
93 | const blocker = () => {
94 | let optionsButtons = document.querySelectorAll(".options");
95 | let letterButtons = document.querySelectorAll(".letters");
96 | let letterButtons1 = document.querySelectorAll(".letters1");
97 | let headers = document.querySelectorAll('h2')
98 | displayLettersCount = 0;
99 |
100 | //disable all options
101 | optionsButtons.forEach((button) => {
102 | button.disabled = true;
103 | });
104 | //disable all letters
105 | letterButtons.forEach((button) => {
106 | button.disabled = true;
107 | });
108 | letterButtons1.forEach((button) => {
109 | button.disabled = true;
110 | })
111 | outerContainer.style.display = 'none'
112 |
113 |
114 | headers.forEach((header) => {
115 | header.style.display = 'block'
116 | })
117 |
118 | removeHangman()
119 | newGameContainer.classList.remove("hide");
120 | };
121 |
122 | const displayLetters = (letterElement, userInputElement, optionValue, spanClass) => {
123 | letterElement.classList.remove("hide");
124 | userInputElement.innerText = "";
125 | let optionArray = options[optionValue];
126 | if(displayLettersCount === 0){
127 | chosenWord = optionArray[Math.floor(Math.random() * optionArray.length)];
128 | }
129 | chosenWord = chosenWord.toUpperCase();
130 | let displayItem = chosenWord.replace(/./g, `_ `) //regex pattern /./g replacing the dot
131 | userInputElement.innerHTML = displayItem;
132 | displayLettersCount++
133 | }
134 |
135 | //Word Generator
136 | const generateWord = (optionValue) => {
137 | if(player2Btn.classList.contains('mode2')){ //displays letters for player 2 container
138 | outerContainer.style.display = 'block'
139 | displayLetters(letterContainer2, userInputSection2, optionValue, 'dashes2')
140 | category.textContent = `CATEGORY: ${optionValue}`
141 | category.style.display ='block'
142 | playerTurnHeaders[0].style.visibility = 'visible'
143 | }
144 | let optionsButtons = document.querySelectorAll(".options");
145 | let headers = document.querySelectorAll('h3')
146 | headers.forEach(elemH => elemH.style.display='none')
147 | //If optionValue matches the button innerText then highlight the button
148 | optionsButtons.forEach((button) => {
149 | if (button.innerText.toLowerCase() === optionValue.toLowerCase()) {
150 | button.classList.add("active");
151 | optionsContainer.classList.add('active')
152 | const buttonDivs = document.querySelector('.center')
153 | buttonDivs.classList.add('active')
154 | }
155 | category.textContent = `CATEGORY: ${optionValue}`
156 | category.style.display ='block'
157 | button.disabled = true;
158 | });
159 |
160 | // outerContainer.style.display = 'none'
161 | displayLetters(letterContainer, userInputSection, optionValue, 'dashes') //displays letters for Player 1 container
162 | };
163 |
164 | //Correct Answer
165 | const correctAnswer = (charArray, dashes, button, event) => {
166 | charArray.forEach((char, index) => {
167 | //if character in array is same as clicked button
168 | if (char === button.innerText) {
169 | //replace dash with letter
170 | dashes[index].innerText = char;
171 | //increment counter
172 | if (event.target.className === 'letters1'){
173 | winCount2 += 1;
174 | //if winCount equals word length
175 | if (winCount2 == charArray.length) {
176 | resultText.innerHTML = `PLAYER 2 WINS!! PLAYER 1 LOST!!! The word was ${chosenWord}
`;
177 | //block all buttons
178 | blocker();
179 | }
180 | }else{
181 | winCount += 1;
182 | //if winCount equals word length
183 | if (winCount == charArray.length) {
184 | if(player2Btn.classList.contains('mode2')) {
185 | resultText.innerHTML = `PLAYER 1 WINS!! PLAYER 2 LOST!!!! The word was ${chosenWord}
`;
186 | blocker();
187 | }else {
188 | resultText.innerHTML = `You Win!! The word was ${chosenWord}
`;
189 | //block all buttons
190 | blocker();
191 | }
192 |
193 | }
194 | }
195 | }
196 | });
197 | }
198 |
199 | //WRONG
200 | const wrongAnswer = (event, chosenWord) => {
201 | if(event.target.className === 'letters1'){
202 | playerTurnHeaders[0].style.visibility = 'visible'
203 | playerTurnHeaders[1].style.visibility = 'hidden'
204 | count2 += 1
205 | drawMan(count2, event);
206 | //Count==6 because head,body,left arm, right arm,left leg,right leg
207 | if (count2 == 6) {
208 | resultText.innerHTML = `PLAYER 2 LOST!! PLAYER 1 WINS!!!!!!! The word was ${chosenWord}
`;
209 | blocker();
210 | }
211 | }else{
212 | playerTurnHeaders[0].style.visibility = 'hidden'
213 | playerTurnHeaders[1].style.visibility = 'visible'
214 | count += 1
215 | drawMan(count, event);
216 | //Count==6 because head,body,left arm, right arm,left leg,right leg
217 | if (count == 6) {
218 | if(player2Btn.classList.contains('mode2')) {
219 | resultText.innerHTML = `PLAYER 1 LOSE!!!! PLAYER 2 WINS!!!! The word was ${chosenWord}
`;
220 | blocker();
221 | }else {
222 | resultText.innerHTML = `You Lose!! The word was ${chosenWord}
`;
223 | blocker();
224 | }
225 |
226 | }
227 | }
228 | }
229 |
230 |
231 | const createLetters = (letterContainer, buttonClass, spanClasses) => {
232 | for (let i = 65; i < 91; i++) {
233 | let button = document.createElement("button");
234 | button.classList.add(buttonClass);
235 | //[A-Z]
236 | button.innerText = String.fromCharCode(i);
237 | //character button click
238 | button.addEventListener("click", (e) => {
239 | let charArray = chosenWord.split("");
240 | let dashes = document.getElementsByClassName(spanClasses);
241 | //if array contains clicked value replace the matched dash with letter else dram on canvas
242 | if (charArray.includes(button.innerText)) {
243 | correctAnswer(charArray, dashes, button, e)
244 | } else {
245 | //lose count
246 | wrongAnswer(e, chosenWord)
247 | }
248 | //disable clicked button
249 | button.disabled = true;
250 | });
251 | letterContainer.append(button);
252 | }
253 | }
254 | //Initial Function (Called when page loads/user presses new game)
255 | const initializer = (userInputSection, optionsContainer, letterContainer, shouldRunAgain, buttonClass, spanClasses) => {
256 | winCount = 0;
257 | winCount2 = 0;
258 | count = 0;
259 | count2 = 0;
260 |
261 | //Initially erase all content and hide letters and new game button
262 | userInputSection.innerHTML = "";
263 | optionsContainer.innerHTML = "";
264 | letterContainer.classList.add("hide");
265 | newGameContainer.classList.add("hide");
266 | playerTurnHeaders.forEach(h4 => {
267 | h4.style.visibility = 'hidden'
268 | })
269 | letterContainer.innerHTML = "";
270 |
271 | //For creating letter buttons
272 | createLetters(letterContainer, buttonClass, spanClasses)
273 |
274 | displayOptions(shouldRunAgain);
275 | };
276 |
277 | const drawForSecondContainer = (event, bodyPart) => {
278 | if(event.target.className === 'letters1'){
279 | bodyPart.style.display = 'block'
280 | return true
281 | }
282 | return false
283 | }
284 |
285 | //Canvas
286 | const buildHangman = (event) => {
287 | const head = () => {
288 | if(drawForSecondContainer(event, hangmanHead1)) return
289 | hangmanHead.style.display = 'block'
290 | };
291 |
292 | const body = () => {
293 | if(drawForSecondContainer(event, hangmanBody1)) return
294 | hangmanBody.style.display = 'block'
295 | };
296 |
297 | const leftArm = () => {
298 | if(drawForSecondContainer(event, hangmanLeftArm1)) return
299 | hangmanLeftArm.style.display = 'block'
300 | };
301 |
302 | const rightArm = () => {
303 | if(drawForSecondContainer(event, hangmanRightArm1)) return
304 | hangmanRightArm.style.display = 'block'
305 | };
306 |
307 | const leftLeg = () => {
308 | if(drawForSecondContainer(event, hangmanLeftLeg1)) return
309 | hangmanLeftLeg.style.display = 'block'
310 | };
311 |
312 | const rightLeg = () => {
313 | if(drawForSecondContainer(event, hangmanRightLeg1)) return
314 | hangmanRightLeg.style.display = 'block'
315 | };
316 |
317 | return { head, body, leftArm, rightArm, leftLeg, rightLeg };
318 | };
319 |
320 | //draw the man
321 | const drawMan = (count, event) => {
322 | let { head, body, leftArm, rightArm, leftLeg, rightLeg } = buildHangman(event);
323 | switch (count) {
324 | case 1:
325 | head();
326 | break;
327 | case 2:
328 | body();
329 | break;
330 | case 3:
331 | leftArm();
332 | break;
333 | case 4:
334 | rightArm();
335 | break;
336 | case 5:
337 | leftLeg();
338 | break;
339 | case 6:
340 | rightLeg();
341 | break;
342 | default:
343 | break;
344 | }
345 | };
346 |
347 | //New Game
348 | newGameButton.addEventListener("click",() => {
349 | initializer(userInputSection, optionsContainer, letterContainer, false, 'letters', 'dashes')
350 | initializer(userInputSection2, optionsContainer2, letterContainer2, true, 'letters1', 'dashes2')
351 | });
352 | window.onload = initializer(userInputSection, optionsContainer, letterContainer, false, 'letters', 'dashes');
353 | window.onload = initializer(userInputSection2, optionsContainer2, letterContainer2, true, 'letters1', 'dashes2')
354 |
355 |
--------------------------------------------------------------------------------
5 |
6 | Hangman is a simple word guessing game. Players try to figure out an unknown word by guessing letters. If too many letters which do not appear in the word are guessed, the player is hanged (and loses).
7 |
8 | Let us see how this game works. Chose either 1 Player or 2 Player Game Mode. Next, choose from three options: ‘Fruits’, ‘Vegetables’ and ‘Animals’. Once the user selects the options, the computer chooses a word from the corresponding category.
9 |
10 | Now, the user(s) has to guess the chosen word using the letter buttons provided on the screen. The user can make six wrong attempts before he loses the game. Most frequently, the person is drawn in 6 parts (for 6 letter guesses) in the order: head, body, left leg, right leg, left arm, right arm.
11 |
12 | If the user(s) guesses the word, we display a winning message on the screen. If not, we display a lost message. Along with this message, we also provide the user with the solution and a button to start a ‘New Game’.
13 |
14 | ## Tech Stack
15 |
16 | - HTML
17 | - CSS
18 | - Javascript
19 |
20 | ## Upcoming Features
21 |
22 | - Add More Categories
23 | - Timed Game Mode
24 | - Seasonal Themes(Halloween, Thanksgiving, Christmas, etc.)
25 |
26 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | .png)
31 | 
33 | 
36 | .png)
39 | 
42 | 
45 | 
48 |