diff --git a/9-Hangman Game/README.md b/9-Hangman Game/README.md new file mode 100755 index 00000000..e83f0f31 --- /dev/null +++ b/9-Hangman Game/README.md @@ -0,0 +1,9 @@ +# Hangman-js + +The traditional hangman puzzle game written as prototype object class in vanilla Javascript. + +## How to use + +* Open `index.html` to try it out + +### [By Devanshu Mahapatra](https://github.com/Devanshu-17) diff --git a/9-Hangman Game/hangman.css b/9-Hangman Game/hangman.css new file mode 100755 index 00000000..600358e3 --- /dev/null +++ b/9-Hangman Game/hangman.css @@ -0,0 +1,103 @@ +html,body { + font-size: 1.2em; + font-family: 'Arvo', serif; + text-align: center; +} + +a { + color: #000; + margin: 0.2em; + text-decoration: none; +} + +#hangm_gameover, #hangm_victory { + font-size: 2em; +} + +section#hangman { + height: 30.5em; + overflow: hidden; +} + +#hangm { + text-align: center; +} + +.h { + opacity: 0; +} + +#hangm_animation { + height: 10em; + margin: 0 auto; + width: 11em; +} + +#hangm_word, +#hangm_guesses { + letter-spacing: 1em; +} + +.man_head { + border-radius: 50%; + width: 40px; + height: 40px; + background-color: #FFCC99; + position: relative; + bottom: 150px; + left: 112px; + /* width and height can be anything, as long as they're equal */ +} + +.man_upper { + background: #000066; + width: 40px; + height: 50px; + position: relative; + left: 112px; + bottom: 150px; +} + +.man_lower { + background: #330099; + width: 30px; + height: 30px; + position: relative; + left: 117px; + bottom: 150px; +} + +.pole_h { + background: #000; + width: 100px; + height: 8px; + position: relative; + left: 46px; +} + +.pole_v { + width: 8px; + height: 150px; + background: #000; + left: 46px; + position: relative; +} + +.pole_b { + border-color: transparent transparent #000000 transparent; + border-width: 0 50px 50px 50px; + border-style: solid; + width: 0; + height: 0; + bottom: 10px; + position: relative; +} + +.rope { + width: 6px; + height: 40px; + background-color: #996633; + position: relative; + bottom: 150px; + left: 130px; +} \ No newline at end of file diff --git a/9-Hangman Game/hangman.js b/9-Hangman Game/hangman.js new file mode 100755 index 00000000..30693ded --- /dev/null +++ b/9-Hangman Game/hangman.js @@ -0,0 +1,109 @@ +var Hangman = (function () { + 'use strict'; + + + function Hangman(elId) { + // DOM is ready + this.elId = elId; + // Possible words + this.words = [ + 'PROGRAMMER', 'BRAINSTORM', 'CREATIVE', 'LOLLIPOP', + 'CULTURE', 'RAZORSHARP', 'SCREWDRIVER', 'TYPEWRITER' + ]; + } + + /** + * Resets the hangman game + */ + Hangman.prototype.reset = function () { + // Variables + this.STOPPED = false; + this.MISTAKES = 0; + this.GUESSES = []; + // Select a random word from the list + this.WORD = this.words[Math.floor(Math.random() * this.words.length)]; + // DOM Elements + this.hideElementByClass('h'); + this.showElementByIdWithContent(this.elId + "_guessbox", null); + this.showElementByIdWithContent(this.elId + "_word", this.getGuessedfWord()); + }; + + /** + * Logic after the user guessed on a letter + * + * @param {char} letter A letter guessed by our enduser + */ + Hangman.prototype.guess = function (letter) { + letter = letter.charAt(0).toUpperCase(); + + // Check if game is stopped or the user already guessed on that letter + if (this.STOPPED || this.GUESSES.indexOf(letter) > -1) { + // Then we wont do anything + return; + } + + // Add the letter to our GUESSES array + this.GUESSES.push(letter); + // Update the word hint, and guessed letter list for the user + this.showElementByIdWithContent(this.elId + "_word", this.getGuessedfWord()); + this.showElementByIdWithContent(this.elId + "_guesses", this.GUESSES.join('')); + + // Check if our word does not contain the guessed letter + if (this.WORD.indexOf(letter) < 0) { + // Incorrect guess, increase our mistakes by one + this.MISTAKES++; + // Show next part of hangman character + this.showElementByIdWithContent(this.elId + "_" + this.MISTAKES, null); + // Check if its Game Over + if (this.MISTAKES === 6) { + this.showElementByIdWithContent(this.elId + "_end", "GAME OVER!
The word was: " + this.WORD); + this.STOPPED = true; + } + } else if (this.WORD.indexOf(this.getGuessedfWord()) !== -1) { + // Victory condition + this.showElementByIdWithContent(this.elId + "_end", "You made it!
The word was: " + this.WORD); + this.STOPPED = true; + } + }; + + /** + * Displays HTML element by id with the following content + * + * @param {string} elId DOM ID + * @param {HTML} content + */ + Hangman.prototype.showElementByIdWithContent = function (elId, content) { + if (content !== null) { + document.getElementById(elId).innerHTML = content; + } + document.getElementById(elId).style.opacity = 1; + }; + + /** + * Hides element by class + * + * @param {string} elClass DOM class + */ + Hangman.prototype.hideElementByClass = function (elClass) { + var elements = document.getElementsByClassName(elClass), i; + for (i = 0; i < elements.length; i++) { + elements[i].style.opacity = 0; + } + }; + + /** + * The word but only with letters the user has guessed so far is visible + */ + Hangman.prototype.getGuessedfWord = function () { + var result = "", i; + for (i = 0; i < this.WORD.length; i++) { + // Word characters + result += (this.GUESSES.indexOf(this.WORD[i]) > -1) ? + this.WORD[i] : "_"; + } + return result; + }; + + // Create and return an instance of this class, its go time! + return new Hangman('hangm'); +}()); \ No newline at end of file diff --git a/9-Hangman Game/index.html b/9-Hangman Game/index.html new file mode 100755 index 00000000..e8537aec --- /dev/null +++ b/9-Hangman Game/index.html @@ -0,0 +1,45 @@ + + + + + + + + + +
+ +
+
+
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+
+ +
+
+
+ Guess the word:
+
+ +
+
+ +
+
+ +
+ + \ No newline at end of file