Added Hangman Game written in Vanilla JS

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)

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;
+}

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!<br/>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!<br/>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');    
+}());

9-Hangman Game/index.html

@@ -0,0 +1,45 @@
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="hangman.css" />
+        <link href='http://fonts.googleapis.com/css?family=Arvo' rel="stylesheet" type="text/css">
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+        <script type="text/javascript" src="hangman.js"></script>
+    </head>
+    <body>
+        <div id="hangm">
+
+                <div style="height: 2em; margin-bottom: 3em;">
+                    <div id="hangm_end" class="h"></div>
+                </div>
+
+                <div id="hangm_animation">
+                    <div id="hangm_2" class="h pole_h"></div>
+                    <div id="hangm_1" class="h pole_v"></div>
+
+                    <div id="hangm_3" class="h rope"></div>
+
+                    <div id="hangm_4" class="h man_head"></div>
+                    <div id="hangm_5" class="h man_upper"></div>
+                    <div id="hangm_6" class="h man_lower"></div>
+                </div>
+
+                <div style="height: 2em;">
+                    <div id="hangm_guesses" class="h"></div>
+                </div>
+
+                <form>
+                    <div id="hangm_guessbox" style="height: 8em;" class="h">
+                        <div style="height: 4em;">
+                            Guess the word:<div id="hangm_word"></div>
+                        </div>
+                        <input id="guess" onkeyup="Hangman.guess(this.value); this.value=''; return false;" type="text" placeholder="">
+                    </div>
+                    <div class="col-sm-3">
+                        <button type="button" id="btn-start" class="btn-lg btn-info" onclick="Hangman.reset(); return false;" >New Game</button>
+                    </div>
+                </form>
+
+        </div>
+    </body>
+</html>