Hangman Javascript - 我的代码似乎没有在正确猜出字母时更新单词占位符

时间:2013-04-20 12:02:15

标签: javascript html contentplaceholder

所以我的程序将随机单词打印到控制台,这样我就可以检查单词是用于测试和实现的,所以当我测试代码并猜测正确的正确字母时,单词占位符不会在猜测按钮后更新点击它只是循环通过刽子手的阶段。这是我的程序代码;

    var wordsArray = ["monitor", "program", "application", "keyboard", "javascript", "gaming", "network"];
var word;
var goesLeft;
var placeholder;
var input;
var wordLength;
var wordSubstring;
var currentWord;

  function newGame()
  {

    placeholder = "";
    goesLeft = 10;
    var word = wordsArray[Math.floor(Math.random() * wordsArray.length)];
    currentWord = 0;
    word = wordsArray[currentWord];
    wordLength = currentWord.length;
    wordSubstring = currentWord.substring;
    console.log(word);
    var myElement = document.getElementById("button").innerHTML = "Click to guess";
    var myPicElement = document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman10.jpg";

    for (var count = 0; count < word.length; count++)
    {
      placeholder = placeholder + "-";
    }

    document.getElementById("placeholder").innerHTML = placeholder;
    document.getElementById("gamestatus").innerHTML = "Game running";
  }

  function guessLetter()
  {
    var correct = 0;

    var inputBox = document.getElementById("guessinput");
    input = inputBox.value;


    console.log(word);

    for (var count = 0; count < wordLength; count++)
    {
      if (input == word.substring(count, count + 1))
      {
        correct++;
        placeholder = placeholder.substring(0, count) + input + placeholder.substring(count + 1, placeholder.length + 1);
        document.getElementById("placeholder").innerHTML = placeholder;
      }
    }

    if (correct == 0)
    {
      goesLeft--;
    }
    var url = document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman" + goesLeft + ".jpg";

    if (placeholder == word)
    {
      document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman_win.jpg";
      alert("You guessed the word correctly. You win!");
    }

    if (goesLeft == 0)
    {
      alert("You lose");
      newGame();
    }
  }
newGame();
document.getElementById("button").onclick = guessLetter;

这是我的占位符代码,问题必须在底层,程序运行良好我没有任何错误。

 for (var count = 0; count < wordLength; count++)
{
  if (input == word.substring(count, count + 1))
  {
    correct++;
    placeholder = placeholder.substring(0, count) + input + placeholder.substring(count + 1, placeholder.length + 1);
    document.getElementById("placeholder").innerHTML = placeholder;
  }
}

这是链接到代码的HTML;

<div style="text-align: center;">
   <h1>Hangman</h1>
   <img id="hangimage" src="http://fetlar.kingston.ac.uk/pp/hangman9.jpg" />
   <div id="placeholder" style="font-size: 1.5em; font-family: monotype; color: red;">-------</div>
   <div id="gamestatus">Game running</div>
   <input id="guessinput" type="text" size="1" />
   <button id="button">Click to guess</button>
   <br/>
   <div>Guessed Letters</div>
   <div id="guessedletters">(guessed letters will go here)</div>
</div>

如果有人能告诉我这个问题会是多么好,请事先谢谢。

2 个答案:

答案 0 :(得分:0)

这里有两个问题:

首先,您的word变量是全局的,因此请勿在{{1​​}}函数中重新定义它

newGame()

应该是

var word = wordsArray[Math.floor(Math.random() * wordsArray.length)];

第二个问题在这里:

word = wordsArray[Math.floor(Math.random() * wordsArray.length)];

应该是

wordLength = currentWord.length;

这是一个经过编辑的jsFiddle:

http://jsfiddle.net/vj2rx/

答案 1 :(得分:0)

在这里,这是适合你的代码。

var wordsArray = ["monitor", "program", "application", "keyboard", "javascript", "gaming", "network"];
var word;
var goesLeft;
var placeholder;
var input;
var wordLength;
var currentWord;

  function newGame(){
     placeholder = "";
     goesLeft = 10;
     word = wordsArray[getRandom(0,wordsArray.length)];
     wordLength = word.length;
     console.log(word);
     var myElement = document.getElementById("button").innerHTML = "Click to guess";
     var myPicElement = document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman10.jpg";

     for (var count = 0; count < word.length; count++)
     {
          placeholder = placeholder + "-";
     }

     document.getElementById("placeholder").innerHTML = placeholder;
     document.getElementById("gamestatus").innerHTML = "Game running";
  }
  function getRandom(min,max){
    return Math.floor(Math.random() * (max - min) + min);
  }
  function guessLetter()
  {
     var correct = 0;

     var inputBox = document.getElementById("guessinput");
     input = inputBox.value;


     for (var count = 0; count < wordLength; count++)
     {
       if (input == word.substring(count, count + 1))
       {
        correct++;
        placeholder = placeholder.substring(0, count) + input + placeholder.substring(count + 1, placeholder.length + 1);
        document.getElementById("placeholder").innerHTML = placeholder;
       }
    }

    if (correct == 0)
    {
      goesLeft--;
    }
    var url = document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman" + goesLeft + ".jpg";

    if (placeholder == word)
    {
      document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman_win.jpg";
      alert("You guessed the word correctly. You win!");
    }

    if (goesLeft == 0)
    {
      alert("You lose");
      newGame();
    }
  }
newGame();
document.getElementById("button").onclick = guessLetter;

我建议你为此做一个课,它会更好。