Hangman Gameplay In Javascript

February 28, 2024 Post a Comment

I've run into some issues in my JavaScript/jQuery hangman assignment & I can't seem to figure out what the issue is: First off, the spaces don't seem to be showing to indicate

Solution 1:

Hangman

I got it working, I'll do a quick breakdown of what it has and what you need to finish yourself:

Highlights

.words-spaces is a dynamic table. It generates a <td> for each letter of the word. Each letter is also placed within it's <td> as well, but they're not visible because they start off in white (same as background). As an extra precaution, I added user-select: none so users can't cheat by highlighting the <td>.
.wrongLetter is a table with 10 <td> since that's the maximum amount of wrong guesses before endGame().
The keypress portion wouldn't work because it was calling gamePlay(space) function that didn't exist.
There were a couple of places that had malformed selectors as well (ex. missing dots on classes)

ToDo

It can't handle multiple occurrences of a letter (ex. it'll recognize the first "l" in the word baudrillard and it'll ignore the second "l".)
Hmmm...I thought there was more than that. I guess not...

There's a fiddle and a snippet have fun.

<!doctype><html><head><metacharset="utf-8"><title>35387864</title><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /><style>html {
  font: 40016px/1.428'Verdana';
}

main {
  padding: 20px;
}

footer,
header {
  padding: 5px20px;
}

footer {
  border-top: 2px ridge #666;
}

header {
  border-bottom: 2px ridge #666;
}

.word-spaces,
.wrongLetters {
  border: 1px ridge grey;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 10px0;
}

.word-spacestd,
.wrongLetterstd {
  border: 2px inset #BBB;
  width: 3ch;
  height: 1.5rem;
  padding: 1px;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: white;
}

.wrongLetterstd {
  color: red;
}

.form-control {
  width: 10ch;
  text-align: center;
}

ul {
  font-size: 1rem;
  list-style: none;
  padding-left: 0;
}

</style></head><body><header><h2>
    Hangman
    </h2></header><main><figureclass="hangman"><imgsrc="https://i.imgur.com/gSxmkUf.gif"id="gallows"align="middle top"><imgsrc="https://i.imgur.com/Mb4owx9.gif"id="head"align="middle top"style="display:none;"><imgsrc="https://i.imgur.com/xkXISte.gif"id="body"align="middle top"style="display:none;"><imgsrc="https://i.imgur.com/U44ReUi.gif"id="armL"align="middle top"style="display:none;"><imgsrc="https://i.imgur.com/49kkaQF.gif"id="handL"align="middle top"style="display:none;"><imgsrc="https://i.imgur.com/tqtNazW.gif"id="armR"align="middle top"style="display:none;"><imgsrc="https://i.imgur.com/ydnz7eX.gif"id="handR"align="middle top"style="display:none;"><imgsrc="https://i.imgur.com/dlL7Kek.gif"id="legL"align="middle top"style="display:none;"><imgsrc="https://i.imgur.com/3AQYFV9.gif"id="footL"align="middle top"style="display:none;"><imgsrc="https://i.imgur.com/j9noEN7.gif"id="legR"align="middle top"style="display:none;"><imgsrc="https://i.imgur.com/kJofX7M.gif"id="footR"align="middle top"style="display:none;"></figure><tableclass="word-spaces"><caption>Your Word is: </caption><tbody><tr></tr></tbody></table><br/><fieldsetclass="guessIn"><legend>
        Guess a Letter
      </legend><labelfor="form">Type a Letter then Click <kbd>Enter</kbd></label><inputtype="text"id="form"class="form-control"placeholder="guess"></fieldset><tableclass="wrongLetters"><caption>Letters Guessed Wrong:</caption><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></main><footer><ul><li><ahref="https://stackoverflow.com/questions/35387864/hangman-gameplay-in-javascript">Hangman Gameplay in JavaScript</a></li><li><ahref="https://jsfiddle.net/zer00ne/0fa56t3s/">jsFiddle</a></li></ul></footer><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script><script>var wordBank = ["modernism", "situationalist", "sartre", "camus", "hegel", "lacan", "barthes", "baudrillard", "foucault", "debord", "baudrillard"];
var word = [];
var wrongGuesses = [];
var rightGuesses = [];
var images = [gallows, head, body, armL, handL, armR, handR, legL, footL, legR, footR];

$(document).ready(function() {
  functionrandomWord() {
    var random = Math.floor(Math.random() * wordBank.length);
    var toString = wordBank[random];
    console.log(toString);
    word = toString.split("");
    console.log(word);
  }
  randomWord();

  functionwordSpaces() {
    for (var i = 0; i < word.length; i++) {
      $(".word-spaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
    }
  }
  wordSpaces();

  functionplay(space) {
    //indexOf()==inArray() var lIndex = jQuery.inArray(space, word);
    if (lIndex == -1) {
      wrongGuesses.push(space);
      var wrong = wrongGuesses.length;
      console.log('wrong ' + wrong)
      $('.wrongLetters tbody tr td:nth-of-type(' + wrong + ')').text(space);

      $(this).css("background-color", "#ff4500").fadeIn(300).delay(800).fadeOut(300);
      $(images[i - 1]).hide();
      $(images[i]).show();
      i++;
    } else {
      $(".word-spaces tbody tr td:nth-of-type(" + (lIndex + 1) + ")").css('color', 'black');
      rightGuesses.push(space);

    }
  }

  $(".form-control").keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == 13) {
      var space = $(this).val();
      play(space);
      $(this).val('');
      endGame();
      returnfalse;
    }
  });


  functionendGame() {
    if (wrongGuesses.length >= 10 || rightGuesses.length == word.length) {
      $("body").css("background-color", "#ff4500");
      $(".form-control").prop('disabled', true);
    }
  }

});
</script></body></html>

javascript html php

Hangman Gameplay In Javascript

Solution 1:

Hangman

Post a Comment for "Hangman Gameplay In Javascript"