diff --git a/Games/Hangman_Game/README.md b/Games/Hangman_Game/README.md
new file mode 100644
index 0000000000..3f104604e2
--- /dev/null
+++ b/Games/Hangman_Game/README.md
@@ -0,0 +1,37 @@
+# **Game_Name**
+
+Hangman Game
+
+
+
+## **Description đ**
+
+- **Hangman Game** is an interactive game where you have to guess the word in six chances.
+
+## **functionalities đŽ**
+
+- You have to select one category ,on the basis of that category you have to guess the word.
+- You have six chances in which you have guess,when you choose wrong letter then one by one the part of the man form.
+- If you not able to guess till the man form then the game ends.
+
+
+## **How to play? đšī¸**
+
+- First choose the option whose word you want to guess.
+- Guess the word within six chances.
+- If the guess is correct you win else lose.
+- Then play again .
+
+
+
+## **Screenshots đ¸**
+
+
+
+![image](../../assets/images/Hangman_Game.png)
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Games/Hangman_Game/index.html b/Games/Hangman_Game/index.html
new file mode 100644
index 0000000000..b728f07431
--- /dev/null
+++ b/Games/Hangman_Game/index.html
@@ -0,0 +1,29 @@
+
+
+
+
The word was ${chosenWord}
`; + //block all buttons + blocker(); + } + } + }); + } else { + //lose count + count += 1; + //for drawing man + drawMan(count); + //Count==6 because head,body,left arm, right arm,left leg,right leg + if (count == 6) { + resultText.innerHTML = `The word was ${chosenWord}
`; + blocker(); + } + } + //disable clicked button + button.disabled = true; + }); + letterContainer.append(button); + } + + displayOptions(); + //Call to canvasCreator (for clearing previous canvas and creating initial canvas) + let { initialDrawing } = canvasCreator(); + //initialDrawing would draw the frame + initialDrawing(); +}; + +//Canvas +const canvasCreator = () => { + let context = canvas.getContext("2d"); + context.beginPath(); + context.strokeStyle = "#000"; + context.lineWidth = 2; + + //For drawing lines + const drawLine = (fromX, fromY, toX, toY) => { + context.moveTo(fromX, fromY); + context.lineTo(toX, toY); + context.stroke(); + }; + + const head = () => { + context.beginPath(); + context.arc(70, 30, 10, 0, Math.PI * 2, true); + context.stroke(); + }; + + const body = () => { + drawLine(70, 40, 70, 80); + }; + + const leftArm = () => { + drawLine(70, 50, 50, 70); + }; + + const rightArm = () => { + drawLine(70, 50, 90, 70); + }; + + const leftLeg = () => { + drawLine(70, 80, 50, 110); + }; + + const rightLeg = () => { + drawLine(70, 80, 90, 110); + }; + + //initial frame + const initialDrawing = () => { + //clear canvas + context.clearRect(0, 0, context.canvas.width, context.canvas.height); + //bottom line + drawLine(10, 130, 130, 130); + //left line + drawLine(10, 10, 10, 131); + //top line + drawLine(10, 10, 70, 10); + //small top line + drawLine(70, 10, 70, 20); + }; + + return { initialDrawing, head, body, leftArm, rightArm, leftLeg, rightLeg }; +}; + +//draw the man +const drawMan = (count) => { + let { head, body, leftArm, rightArm, leftLeg, rightLeg } = canvasCreator(); + switch (count) { + case 1: + head(); + break; + case 2: + body(); + break; + case 3: + leftArm(); + break; + case 4: + rightArm(); + break; + case 5: + leftLeg(); + break; + case 6: + rightLeg(); + break; + default: + break; + } +}; + +//New Game +newGameButton.addEventListener("click", initializer); +window.onload = initializer; \ No newline at end of file diff --git a/Games/Hangman_Game/style.css b/Games/Hangman_Game/style.css new file mode 100644 index 0000000000..eb4726f270 --- /dev/null +++ b/Games/Hangman_Game/style.css @@ -0,0 +1,121 @@ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; + } + body { + background-color: #0f8d20; + } + .container { + font-size: 16px; + background-color: #ffffff; + width: 90vw; + max-width: 34em; + position: absolute; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + padding: 3em; + border-radius: 0.6em; + box-shadow: 0 1.2em 2.4em rgba(111, 85, 0, 0.25); + } + #options-container { + text-align: center; + } + #options-container div { + width: 100%; + display: flex; + justify-content: space-between; + margin: 1.2em 0 2.4em 0; + } + #options-container button { + padding: 0.6em 1.2em; + border: 3px solid #000000; + background-color: #ffffff; + color: #000000; + border-radius: 0.3em; + text-transform: capitalize; + cursor: pointer; + } + #options-container button:disabled { + border: 3px solid #808080; + color: #808080; + background-color: #efefef; + } + #options-container button.active { + background-color: #486823; + border: 3px solid #000000; + color: #fff; + } + .letter-container { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.6em; + } + #letter-container button { + height: 2.4em; + width: 2.4em; + border-radius: 0.3em; + background-color: #ffffff; + cursor: pointer; + } + .new-game-popup { + background-color: #ffffff; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + border-radius: 0.6em; + } + + #user-input-section { + display: flex; + justify-content: center; + font-size: 1.8em; + margin: 0.6em 0 1.2em 0; + } + canvas { + display: block; + margin: auto; + border: 10px solid #246346; + border-radius: 10px; + } + .hide { + display: none; + } + #result-text h2 { + font-size: 1.8em; + text-align: center; + } + #result-text p { + font-size: 1.25em; + margin: 1em 0 2em 0; + } + #result-text span { + font-weight: 600; + } + #new-game-button { + font-size: 1.25em; + padding: 0.5em 1em; + background-color: #3a990a; + border: 3px solid #000000; + color: #fff; + border-radius: 0.2em; + cursor: pointer; + } + .win-msg { + color: #088349; + } + .lose-msg { + color: #a52525; + } + \ No newline at end of file diff --git a/README.md b/README.md index ea8b2b3234..7a1cf1b4f5 100644 --- a/README.md +++ b/README.md @@ -1307,8 +1307,12 @@ This repository also provides one such platforms where contributers come over an |[Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys)| |[Snake_Gun_Water](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Gun_Water)| |[Tether](https://github.com/kunjgit/GameZone/tree/main/Games/Tether)| + + |[Rock Paper Scissors Lizard Spock Game](./Games/Rock_Paper_Scissors_Lizard_Spock_Game)| +|[Hangman_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Hangman_Game)| +