CODEWITHSUNDEEP
javascripthtmlcss
QPTR
QPTR

Reputation: 1690

how to deal with repeated letters in a javascript hangman game

I am a beginner to html, css and javascript, and I am creating this hangman game using these, which works fine for words with single instances of each letter but it seems to run into problems when a letter occurs repeatedly in the same word. I have created a function to check the instances of each letter in the word but I can't figure out how to use it so that repeated letters are shown at the same time if they occur in the word. Any help would be appreciated. Thanks!

Here is my code:

HTML:

<body>
  <div id="container">
    <div id="hangman">
      <div id="stand"></div>
      <div id="face"></div>
      <div id="body"></div>
      <div id="left-arm"></div>
      <div id="right-arm"></div>
      <div id="left-leg"></div>
      <div id="right-leg"></div>

    </div>
    <div id="alphabet">

    </div>
      <div id="gameOver"><p>Game Over!<br>PS: I am not "actually" being hanged</p>
        </div>
    <div id="beingGuessedWord"></div>



  </div>

</body>

CSS:

#container {
  height:450px;
  width:600px;
  border:2px solid grey;
  border-radius:5px;
  background-color:hsla(115, 100%, 16%, 1);
  position:relative;  

}

#stand {

  background-image:url('http://i59.tinypic.com/sbll48.png');
  height:220px;
  width:200px;

 }

#face {
  background-image:url('http://i59.tinypic.com/6dx0ee.png');
  height:60px;
  width:60px;
  position:relative;
  top:-175px;
  left:155px;
  visibility:hidden;  



}

#body {
background-image:url('http://i61.tinypic.com/27ywcg.png');
  background-repeat: no-repeat;
  position:relative;
  height:50px;
  top:-175px;
  left:155px;
  visibility:hidden;  

}

#left-arm {
  background-image:url('http://i58.tinypic.com/2evvvac.png');
  background-repeat: no-repeat;
  position:relative;
  height:70px;
  width:40px;
  top:-240px;
  left:150px;
  visibility:hidden;  


}

#right-arm{
  background-image:url('http://i58.tinypic.com/vfuhyp.png');
  background-repeat: no-repeat;
  position:relative;
  height:70px;
  width:40px;
  top:-300px;
  left:190px;
   visibility:hidden;  

}

#left-leg{
  background-image:url('http://i57.tinypic.com/t4u5na.png');
  background-repeat: no-repeat;
  position:relative;
  height:60px;
  width:60px;
  top:-335px;
  left:135px;
  visibility:hidden;  

}

#right-leg{
  background-image:url('http://i61.tinypic.com/2dqplzb.png');
  background-repeat: no-repeat;
  position:relative;
  height:50px;
  width:60px;
  top:-385px;
  left:180px;
  visibility:hidden; 

}

#alphabet {
  height:100px;
  width:250px;
  position:relative;
  top:-450px;
  left:300px;
  text-align:center;

}

#alphabet a {
  font-size:20px;
  text-decoration:none;
  margin:5px;
  font-family: 'Crafty Girls', cursive;
  font-weight:bold;
  color:grey;

}

#beingGuessedWord {
  height:70px;
  width:300px;
  position:relative;
  top:-500px;
  left:80px;
  padding-top:50px;

}

.letterp {
  border:2px solid black;
  font-family:"Crafty Girls", cursive;
  font-size:20px;
  margin:10px;
  font-weight:bold;
  padding:5px;
  border-radius:5px;


}

#dash {
  padding:5px;
  margin:5px;
  font-weight:bold;
  font-family:serif;

}

#gameOver {
 border:3px solid grey;

 font-family:'Crafty Girls', cursive;
 font-size:15px;
 font-weight:bold;
 position:relative;
 top:-670px;
 left:300px;
 height:70px;
 width:280px;   
 border-radius:5px;
 text-align:center;   
 visibility:hidden;      

}

JavaScript:

var totalIncorrectClicks = 0;//Global variable



var clickLetter = function() {


 var clickedLetter = document.getElementById(this.id); 
  var tempWord = localStorage["wordGuess"];
  /////////////
  var word = new String();
  for (var k=0; k<tempWord.length;k++)
    {
      if (k%2 ==0 )
        {
          word = word + tempWord[k];

        }
    }



    var compareSuccess = false;
    for (var i = 0; i < word.length; i++) {

      if (word[i] == clickedLetter.innerHTML) 
      {

          var pId = "pid" + (i+1);


          var pNode = document.getElementById(pId);
          pNode.style.visibility = "visible";
          compareSuccess = true;

      }

    }

    if (compareSuccess == false)
    {
        totalIncorrectClicks++;
    }

    if (compareSuccess == false && totalIncorrectClicks <=7)
    {
        if (totalIncorrectClicks == 1)
        {
        var face = document.getElementById('face');
        face.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 2)
        {
        var body = document.getElementById('body');
        body.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 3)
        {
        var leftArm = document.getElementById('left-arm');
        leftArm.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 4)
        {
        var rightArm = document.getElementById('right-arm');
        rightArm.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 5)
        {
        var leftLeg = document.getElementById('left-leg');
        leftLeg.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 6)
        {
        var rightLeg = document.getElementById('right-leg');
        rightLeg.style.visibility = "visible";
        }

        if (totalIncorrectClicks == 7)
        {
            var gameOver = document.getElementById('gameOver');
            gameOver.style.visibility = "visible";
        }
    }


}
////////////////

var checkLetterInstance = function(word, letter) {
  var instance = 0;
  for (var i = 0; i < word.length; i++)
    {
      if (word[i] == letter)
        {
          instance++;
        }
    }
  return instance;

}


/////////////////
var createAlphabets = function () {
  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'];

for (var i = 0; i < alphabets.length; i++)
  {
    var anchorNode = document.createElement('a');
    var idanch = "id" + (i+1);


    anchorNode.setAttribute('id', idanch);


    anchorNode.innerHTML = alphabets[i];

    anchorNode.setAttribute('href', "#");


    var alphaDiv = document.getElementById('alphabet')

    alphaDiv.appendChild(anchorNode);

    if (i == 11 || i == 22)
      {
        alphaDiv.innerHTML = alphaDiv.innerHTML + "<br>"

      }


  }
}

var selectWord = function() {

  var wordArray = ["air", "clouds", "sun"];
  var randomWord = wordArray[Math.floor(Math.random() * wordArray.length)];
  var splitRandomWord = randomWord.split('');

  return splitRandomWord;

}


var displayWord  = function(word) {


  for (var i = 0; i < word.length; i++) {


    var dispWordDiv = document.getElementById('beingGuessedWord');


    var pNode = document.createElement('p');

    pNode.innerHTML = word[i];
    var id = "pid" + (i+1);

    pNode.setAttribute('id', id);
    pNode.setAttribute('class', "letterp");  
      pNode.style.visibility = "hidden";
      pNode.style.display = "inline-block";

    dispWordDiv.appendChild(pNode);

  }

  var dispWordDiv  = document.getElementById('beingGuessedWord');
  dispWordDiv.innerHTML = dispWordDiv.innerHTML + "<br>"; 

  for (var i = 0; i < word.length; i++) {
      var dispWordDiv  = document.getElementById('beingGuessedWord');
      var empty = document.createElement('p');
      empty.setAttribute('id', 'dash');
      empty.innerHTML = "___";
      empty.style.display = "inline";



    dispWordDiv.appendChild(empty);
  }
  }

  var word = selectWord();
  createAlphabets();
  displayWord(word);
  for (var i = 0; i < 27 ; i++) {
  var id = "id" + ( i + 1 );
  var anchor  = document.getElementById(id);
  localStorage["wordGuess"] = word; 

  anchor.onclick = clickLetter;
}

I have these functions in the code:

  1. createAlphabets() that lists the grid of alphabets to be chosen.

  2. selectWord() function that selects the word.

  3. displayWord() function that creates p elements that are made to contain the letters of the above word selected, and their display property set as "none".

  4. clickLetter() function that is called upon when any of the letter is clicked, and this letter is compared with the letters in the selected word

  5. checkLetterInstance() function which checks the instance of each letter in the word

JFiddle Link: http://jsfiddle.net/h_i_r_a/5rtwed1d/14/

Upvotes: 0

Views: 598

Answers (1)

Ajk_P
Ajk_P

Reputation: 1874

You can try to remove your letter with jquery

Otherwise you could just add inside your function this piece of code:

clickedLetter.style.display = "none";

Update: wait, I thought you were asking how to hide the clicked letters after being clicked... As for showing the letters your piece of code should do just that. And don't worry the letters will "appear" at the same time.

Upvotes: 1

Related Questions