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 @@ + + + + + + Hangman Game + + + + + + +
+
+
+
+ +
+
+ +
+
+ + + + diff --git a/Games/Hangman_Game/script.js b/Games/Hangman_Game/script.js new file mode 100644 index 0000000000..e83049e983 --- /dev/null +++ b/Games/Hangman_Game/script.js @@ -0,0 +1,248 @@ +//Initial References +const letterContainer = document.getElementById("letter-container"); +const optionsContainer = document.getElementById("options-container"); +const userInputSection = document.getElementById("user-input-section"); +const newGameContainer = document.getElementById("new-game-container"); +const newGameButton = document.getElementById("new-game-button"); +const canvas = document.getElementById("canvas"); +const resultText = document.getElementById("result-text"); + +//Options values for buttons +let options = { + fruits: [ + "Apple", + "Blueberry", + "Mandarin", + "Pineapple", + "Pomegranate", + "Watermelon", + "Banana", + "Cherry", + "Avocado", + "Peach", + ], + animals: ["Elephant", "Rhinoceros", "Squirrel", "Panther", "Tiger", "Zebra","Monkey","Horse","Goat","Eagle"], + countries: [ + "India", + "Hungary", + "Kyrgyzstan", + "Switzerland", + "Zimbabwe", + "Dominica", + "Spain", + "Tibet", + "Algeria", + "Cyprus", + ], + colors: ["Turquoise","Beige","Azure","lavender","Yellow","Ivory","Coral","Indigo","Maroon","Emerald"], +}; + +//count +let winCount = 0; +let count = 0; + +let chosenWord = ""; + +//Display option buttons +const displayOptions = () => { + optionsContainer.innerHTML += `

Please Select An Option

`; + let buttonCon = document.createElement("div"); + for (let value in options) { + buttonCon.innerHTML += ``; + } + optionsContainer.appendChild(buttonCon); +}; + +//Block all the Buttons +const blocker = () => { + let optionsButtons = document.querySelectorAll(".options"); + let letterButtons = document.querySelectorAll(".letters"); + //disable all options + optionsButtons.forEach((button) => { + button.disabled = true; + }); + + //disable all letters + letterButtons.forEach((button) => { + button.disabled.true; + }); + newGameContainer.classList.remove("hide"); +}; + +//Word Generator +const generateWord = (optionValue) => { + let optionsButtons = document.querySelectorAll(".options"); + //If optionValur matches the button innerText then highlight the button + optionsButtons.forEach((button) => { + if (button.innerText.toLowerCase() === optionValue) { + button.classList.add("active"); + } + button.disabled = true; + }); + + //initially hide letters, clear previous word + letterContainer.classList.remove("hide"); + userInputSection.innerText = ""; + + let optionArray = options[optionValue]; + //choose random word + chosenWord = optionArray[Math.floor(Math.random() * optionArray.length)]; + chosenWord = chosenWord.toUpperCase(); + + //replace every letter with span containing dash + let displayItem = chosenWord.replace(/./g, '_'); + + //Display each element as span + userInputSection.innerHTML = displayItem; +}; + +//Initial Function (Called when page loads/user presses new game) +const initializer = () => { + winCount = 0; + count = 0; + + //Initially erase all content and hide letteres and new game button + userInputSection.innerHTML = ""; + optionsContainer.innerHTML = ""; + letterContainer.classList.add("hide"); + newGameContainer.classList.add("hide"); + letterContainer.innerHTML = ""; + + //For creating letter buttons + for (let i = 65; i < 91; i++) { + let button = document.createElement("button"); + button.classList.add("letters"); + //Number to ASCII[A-Z] + button.innerText = String.fromCharCode(i); + //character button click + button.addEventListener("click", () => { + let charArray = chosenWord.split(""); + let dashes = document.getElementsByClassName("dashes"); + //if array contains clciked value replace the matched dash with letter else dram on canvas + if (charArray.includes(button.innerText)) { + charArray.forEach((char, index) => { + //if character in array is same as clicked button + if (char === button.innerText) { + //replace dash with letter + dashes[index].innerText = char; + //increment counter + winCount += 1; + //if winCount equals word lenfth + if (winCount == charArray.length) { + resultText.innerHTML = `

You Win :)

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 = `

You Lose :(

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)| +
diff --git a/assets/images/Hangman_Game.png b/assets/images/Hangman_Game.png new file mode 100644 index 0000000000..e437ece367 Binary files /dev/null and b/assets/images/Hangman_Game.png differ diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json index 50bd9b7eee..760343aca1 100644 --- a/assets/js/gamesData.json +++ b/assets/js/gamesData.json @@ -3151,3 +3151,9 @@ "gameUrl": "Atlas_Game", "thumbnailUrl": "Atlas_Game.png" }, + "629":{ + "gameTitle" : "Hangman Game", + "gameUrl": "Hangman_Game", + "thumbnailUrl": "Hangman_Game.png" + } +}