Chalenge 16

Game of Hangman

by Jaron Mauk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<!DOCTYPE html>

<div class="wrapper">
  <h1>Let's Play Hangman!</h1>
  <h2>Guess the right word or Stick Man will die!</h2>
  <p>Press a key on your keyboard to select a letter.</p>
</div>
<div class="wrapper">
  <div id="buttons">
  </div>
  <p id="word"></p>
  <div id="hold">
  </div>
  <p id="mylives"></p>


  <canvas id="stickman"></canvas>
  
  
  <div class="container">
      <button id="reset">Play again</button>
    </div>
</div>

CSS

body {
  background: #E66EE5;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #fff;
  height: 100%;
  text-align: center;
  font-size: 18px;
}

.wrappper {
  width: 100%;
  margin: 0 auto;
}
.wrappper:after {
  content: "";
  display: table;
  clear: both;
}

canvas {
  color: #fff;
  border: #fff dashed 2px;
  padding: 15px;
}

h1, h2, h3 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 50;
  text-transform: uppercase;
  margin: 5px 0;
}

#alphabet {
  margin: 15px auto;
  padding: 0;
  max-width: 900px;
}
#alphabet:after {
  content: "";
  display: table;
  clear: both;
}

#alphabet li {
  float: left;
  margin: 0 10px 10px 0;
  list-style: none;
  width: 35px;
  height: 30px;
  padding-top: 10px;
  background: #fff;
  color: #E66EE5;
  cursor: pointer;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -khtml-border-radius: 5px;
  border: solid 1px #fff;
}
/*#alphabet li:hover {
  background: #c1d72e;
  border: solid 1px #fff;
  color: #fff;
}
*/

#my-word {
  margin: 0;
  display: block;
  padding: 0;
  display: block;
}

#my-word li {
  position: relative;
  list-style: none;
  margin: 0;
  display: inline-block;
  padding: 0 10px;
  font-size: 1.6em;
}

.active {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -moz-transition: all 1s ease-in;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  cursor: default;
}
.active:hover {
  -moz-transition: all 1s ease-in;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  opacity: 0.4;
  filter: alpha(opacity=40);
  -moz-transition: all 1s ease-in;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

#mylives {
  font-size: 1.6em;
  text-align: center;
  display: block;
}

button {
  -moz-border-radius:...

JavaScript

$(document).ready(function() {     
    /* var word = ["taco", "batman", "food", "soda", "engineer", "javascript", "baseball", "pizza", "football", "Coding House", "information", "number", "room", "history", "politics", "party", "teacher", "business", "program", "system", "community", "student", "research", "morning", "office", "result", "change", "water", "fact", "government", "point", "night", "parent", "door", "money", "family", "school", "game", "power", "state", "company", "minute", "level", "home", "question", "team", "car", "member", "hand", "part", "moment", "world", "month", "job", "book", "study", "air", "area", "place", "line", "case", "problem", "issue", "friend", "kind", "time", "Star Wars", "child", "thing", "service", "art", "park", "computer", "apple", "Ikea", "counry", "idea", "font", "city", "horse", "mouse", "day", "sunset", "stairway", "Olympics", "hair", "movie", "expert", "tinfoil", "brain", "grandfather", "law", "speaker", "light", "dark", "shirt", "application", "picture", "hangman", "jacket"] */

   var alphabet = ['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'];
        
        
  var words;         // Array of topics
  var chosenWord;     // Selected catagory
  var getHint ;          // Word getHint
  var word ;              // Selected word
  var guess ;             // Geuss
  var geusses = [ ];      // Stored geusses
  var lives ;             // Lives
  var counter ;           // Count correct geusses
  var space;              // Number of spaces in word '-'

  // Get elements
  var showLives = document.getElementById("mylives");
  var showWord = document.getElementById("word");
 


  // create alphabet ul
  var buttons = function () {
    myButtons = document.getElementById('buttons');
    letters = document.createElement('ul');

    for (var i = 0; i < alphabet.length; i++) {
      letters.id = 'alphabet';
      list =...