FINAL PROJECT!!! snowlady

by grettynebraska

HTML

<div id="canvasDiv" class="left">
<canvas id="gameCanvas" width="300" height="300">
  
</canvas>
</div>
<div id="interactionDiv" class="left">
<input type="text" id="guessBox" maxlength="1"><input type="button" id="guessButton" value="Guess Letter">
<br/><br/>
<span id="lettersSpan"></span>
<br/><br/><br/><br/>
<span id="guessedSpan"></span>
</div>

CSS

#gameCanvas{
  border: solid black 1px;
}
#interactionDiv{
  margin: 10px;
}

.left{
  float: left;
}
.right{
  float: right;
}
.clear{
  clear: both;
}
.hidden{
  display: none;
}
.hint{
  font-size: 75%;
  font-style: italic;
}
#inputDiv, #outputDiv{
  width: 40%;
  padding: 10px;
}
#buttonDiv{
  width: 10%;
  text-align: center;
  padding-top: 30px;
}
#runButton{
  padding: 5px;
}
#inputArea, #outputArea{
  width: 100%;
  height: 200px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 15px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 11px;
  width: 11px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #099;
}

input:focus + .slider {
  box-shadow: 0 0 1px #099;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

JavaScript

/* --------------------------------------------------
If you change the pre-written variables and functions your game will break.
--------------------------------------------------- */
var word = ""; //This variable should hold the word or phrase to be guessed.
var displayWord = ""; //This variable should hold the text that you want to be printed (with blanks appropriately).
var guesses = [];	//This variable should hold all of the letters that have been guessed.
var wrongCount = 0;	//This variable should hold the value for how many wrong guesses have been submitted.
var hangmanImage = false; //change this to false if you want a non-hangman graphic displayed

function main(){
	//use pick word function
	word = pickWord();
 // displayWord = word;
}

//Your other functions should go below here.
function pickWord() {
	var possibleWords = ["Birdman","Betty Blue", "Amelie", "Princess Bride", "Duck Season", "Beauty and the Beast", "Up", "Finding Forester", "Clueless", "My Best Friends wedding"];
  var randomN = Math.floor(Math.random() * 10);
  var movie = "";
  /* print("hello " + randomN) */
  
  for(var i = 0; i< possibleWords.length; i++) {
   if(randomN == i) {
   	movie = possibleWords[i].toLowerCase();
   }
  }
  /* print(movie) */
  formatDisplayWord();
  return(movie.toLowerCase());
 
}

function formatDisplayWord() {
	displayWord = "";
  var ALPHA = "ABCDEFGHIJKLMNOPQRSTUVWXYZ ";
  var alpha = "abcdefghijklmnopqrstuvwxyz";
  var winCheck = false;
  var loseCheck = false;
  
  for(var i = 0; i < word.length; i++) {
  	var letter = word.charAt(i);
  	if(ALPHA.includes(letter) == true) {
    	//push guessed letter into the displayWord.
      displayWord += letter;
      winCheck = true;
      
    } else {
    	displayWord += "_";
      loseCheck = true;
    }
  }
  if(winCheck == true) {
  	win();
  }
  if(loseCheck == true) {
  	lose();
  }
}

function win() {
 if(!displayWord.includes("_")) {
 	alert("YOU WON!");
 }
}

function lose() {
	if(wrongCount >= 7) {
 ...