如何在javascript hangman游戏中处理重复的字母

时间：2014-08-16 04:16:04

标签： javascript html css

我是html，css和javascript的初学者，我正在使用这些创建这个刽子手游戏，这对于每个字母的单个实例的单词都很好但是当一个字母在同一个字母中重复出现时似乎遇到了问题字。我创建了一个函数来检查单词中每个字母的实例，但我无法弄清楚如何使用它，以便在单词中出现重复的字母同时显示。任何帮助，将不胜感激。谢谢！

这是我的代码：

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;
}

我在代码中有这些功能：

  1. createAlphabets（），列出要选择的字母网格。

  2. 选择单词的selectWord（）函数。

  3. displayWord（）函数，用于创建p元素，使其包含所选单词的字母，并将其显示属性设置为“none”。

  4. clickLetter（）函数，在单击任何字母时调用此函数，并将此字母与所选单词中的字母进行比较

  5. checkLetterInstance（）函数，用于检查单词中每个字母的实例

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

1 个答案:

答案 0 :(得分：1)

您可以尝试remove your letter with jquery

否则你可以在函数内添加这段代码：

clickedLetter.style.display = "none";

更新：等等，我以为你问的是如何在点击后隐藏点击的字母......至于显示字母，你的代码应该做到这一点。不要担心这些字母会同时“出现”。

相关问题
最新问题