Hangman

Simple Hangman game. Dictionary consists of US first names.

by Uzair Mehmood

HTML

<div>
    <button id="startgame">New Game</button>
<hr />
<div id="keyboard"></div><hr />
    
<p id="finmsg"></p>

</div><hr />

<div class="main-l">
    <p>Word :<span id="word"></span></p>
    <hr />
    <p>Tries left :<span id="tries"></span></p>
    <hr />
    <p>Incorrect Guesses :<span id="incorrect"></span><p>
    <hr />
    <div class="scores">
        <p class="lost">Lost : <span id="lost" class="error">0</span></p>
        <p class="won">Won : <span id="won" class="success">0</span></p>
    </div>
</div>

<div class="main-r">
            <img id="hangman" />
</div>

CSS

.success {
    color: green;
    text-align: center;
    font-size: 20px;
}
.error {
    color: red;
    text-align: center;
    font-size: 20px;
}
.keys {
    margin:3px;
    color:white;
    background:#3498db;
    border:none;
    height:22px;
}
.keyused {
    background:grey;
}
.main-l {
    float:left;
    width:50%;
}
.main-r {
    float:right;
    width:50%;
}
.scores {
    width:95%;
}
.lost {
    float:left;
}
.won {
    float:right;
}
#keyboard {
    background:Lavender;
    max-width : 85%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
#startgame {
    width:70%;
    height:22px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    color:white;
    background:#3498db;
    border:none;
}
#hangman {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
p {
    color:#3498db;
    font-size:large;
}
p>span {
    margin-left:10px;
    color:blueviolet;
}

JavaScript

var word = '';
var letter = '';
var correct = [];
var incorrect = [];
var triesLeft = 0;
var isgameOn = false;
var woncount = 0;
var lostcount = 0;
var triesE = $('#tries');
var wordE = $('#word');
var finmsgE = $('#finmsg');
var incorrectE = $('#incorrect');
var startgameE = $('#startgame');
var lostE = $('#lost');
var wonE = $('#won');
var hangmanE = $('#hangman');
var alphabets = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

$(function () {
    $.each(alphabets, function (i, j) {
        $('#keyboard').append('<button id="' + j + '" class="keys">' + j + '</button>');
    });
    newGame();
});

var guessE = $('#keyboard .keys');

function newGame() {
    isgameOn = true;
    triesLeft = 4;
    incorrect = [];
    correct = [];
    finmsgE.removeClass();
    finmsgE.addClass('success');
    finmsgE.text('Game Loaded');
    hangmanE.attr('src','http://i.imgur.com/1tV9shL.png');
    triesE.text(triesLeft);
    incorrectE.text('');
    word = getWord();
    var lettersCount = word.length;
    wordE.text('');
    for (var i = 0; i < lettersCount; i++) {
        wordE.append('_ ');
    }
}

function guess() {
    if (word.indexOf(letter) == -1) {
        incorrect.push(letter);
        triesLeft--;
        finmsgE.addClass('error');
        finmsgE.text('Bad Guess :(');
    } else {
        var letters = word.split('');
        if (correct.length <= 0) {
            $.each(letters, function (i, j) {
                correct.push('_');
            });
        }
        for (var i = 0; i < letters.length; i++) {
            if (letters[i] == letter) {
                correct[i] = letter;
            }
        }
        wordE.text(correct.join(' '));
        finmsgE.addClass('success');
        finmsgE.text('Match found :)');
    }
    $('#' + letter).addClass('keyused');
    $('#' + letter).attr("disabled", true);
    updateGame();
}

function updateGame() {
    if (triesLeft === 0)...