在javascript项目

时间：2018-03-01 01:05:36

标签： javascript

我正在尝试制作一个刽子手游戏。我有一个函数wordSelector，它选择一个单词并显示随机选择的单词。循环选定的字符串并设置＆＃34; - ＆＃34;作为每个角色的占位符。但它会在每个破折号之间显示逗号。所以我想过滤掉逗号。我很难创建一个成功的过滤方法。

＆＃13;
＆＃13; 
window.onload = function main() {
  var hangmanWords = ["super", "venus", "spanish", "darkness", "tenebris", "isochronism", "supercalifragilisticexpialidocious"];
  var comments = ["I belive in you! You can do the thing!", "There is still hope keep trying", "Third times a charm", "You can do this", "Think player think! The counter is almost out", "Never give up", "What the frog you had one job u_u"];
  var hint = [];
  var correctGuesses = [];
  var incorrectGuesses = [];

  //get elements 
  var wordDisplay = document.getElementById("wordDisplay");
  var hint = document.getElementById("hint");
  var letterDiplay = document.getElementById("letterDiplay");
  var chancesLeft = document.getElementById("chancesLeft");
  var comments = document.getElementById("commennts");

  // click assigner function
  var clickAssigner = function(event) {
    var letterHandler = document.getElementsByClassName("letters");

    for (var i = 0; i < letterHandler.length; i++) {
      letterHandler[i].addEventListener("click", compare, false);
    }
  }
  clickAssigner(event);

  // word selector and display function
  function wordSelector(selectedWord) {
    var selectedWord = hangmanWords[Math.floor(Math.random() * hangmanWords.length)];
    var progressWord = [];
    for (var i = 0; i < selectedWord.length; i++) {
      progressWord.push("-");
    }

    for (var i = 0; i < progressWord.length; i++) {
      var replaceFilter = /,/g;
      var progressWordFilterd = progressWord[i].replace(replaceFilter, " ");
    }
    document.getElementById("wordDisplay").innerHTML = progressWordFilterd;
  }
  wordSelector(wordSelector());



  // compare function // decrement lives function // remove health bar and show comment function
  function compare(event) {

    console.log(event);
  }


  // hint function




  // win or lose function

}
＆＃13; 
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

#container {
  overflow: hidden;
  max-width: 60%;
  background-color: yellowgreen;
  margin: 7em auto;
  padding: 1em;
}

#wordDisplay {
  height: 6em;
  background-color: orangered;
  margin-bottom: 1em;
  text-align: center;
  padding-top: 2.4em;
  font-size: 26px;
}

#hint {
  width: 16em;
  padding: 1em;
  background-color: skyblue;
  margin: 0em 0em 1em 0.5em;
  border: 0.5em ridge gold;
  font-weight: 900;
  margin: 0em 0em 0em 4em;
}

#hint:hover {
  background-color: coral;
  cursor: pointer;
  font-style: oblique;
}

#letterDiplay {
  width: 14em;
  float: left;
  text-align: center;
  background: crimson;
  padding: 1em;
}

.letters {
  margin: 0.3em auto;
  text-align: center;
  width: 4em;
  height: 3em;
  background-color: darkorange;
  border: 3px ridge darkblue;
  font-weight: 900;
}

.letters:hover {
  background: steelblue;
  color: white;
  cursor: pointer;
}

#theChanceCounter {
  text-align: center;
  float: right;
  width: 14em;
  background-color: crimson;
  height: 28.9em;
}

.lives {
  width: 9em;
  margin: 0em auto;
  background-color: green;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
  <div id="container">
    <section id="wordDisplay">

    </section>
    <button id="hint">Click to display hint</button>
    <section id="letterDiplay">
      <button class="letters" value="a">A</button>
      <button class="letters" value="b">B</button>
      <button class="letters" value="c">C</button>
      <button class="letters" value="d">D</button>
      <button class="letters" value="e">E</button>
      <button class="letters" value="f">F</button>
      <button class="letters" value="g">G</button>
      <button class="letters" value="h">H</button>
      <button class="letters" value="i">I</button>
      <button class="letters" value="j">J</button>
      <button class="letters" value="k">K</button>
      <button class="letters" value="l">L</button>
      <button class="letters" value="m">M</button>
      <button class="letters" value="n">N</button>
      <button class="letters" value="o">O</button>
      <button class="letters" value="p">P</button>
      <button class="letters" value="q">Q</button>
      <button class="letters" value="r">R</button>
      <button class="letters" value="s">S</button>
      <button class="letters" value="t">T</button>
      <button class="letters" value="u">U</button>
      <button class="letters" value="v">V</button>
      <button class="letters" value="w">W</button>
      <button class="letters" value="x">X</button>
      <button class="letters" value="y">Y</button>
      <button class="letters" value="z">Z</button>
    </section>
    <section id="theChanceCounter">
      <div class="lives">

      </div>
    </section>
  </div>
  <script>
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

您的progressWordFilterd变量是一个数组，因此当您按照此document.getElementById("wordDisplay").innerHTML = progressWordFilterd;打印出来时，您只需打印一个阵列为字符串的数组。 您可以像这样使用join。

document.getElementById("wordDisplay").innerHTML = progressWord.join(' ');


window.onload = function main() {
  var hangmanWords = ["super", "venus", "spanish", "darkness", "tenebris", "isochronism", "supercalifragilisticexpialidocious"];
  var comments = ["I belive in you! You can do the thing!", "There is still hope keep trying", "Third times a charm", "You can do this", "Think player think! The counter is almost out", "Never give up", "What the frog you had one job u_u"];
  var hint = [];
  var correctGuesses = [];
  var incorrectGuesses = [];

  //get elements 
  var wordDisplay = document.getElementById("wordDisplay");
  var hint = document.getElementById("hint");
  var letterDiplay = document.getElementById("letterDiplay");
  var chancesLeft = document.getElementById("chancesLeft");
  var comments = document.getElementById("commennts");

  // click assigner function
  var clickAssigner = function(event) {
    var letterHandler = document.getElementsByClassName("letters");

    for (var i = 0; i < letterHandler.length; i++) {
      letterHandler[i].addEventListener("click", compare, false);
    }
  }
  clickAssigner(event);

  // word selector and display function
  function wordSelector(selectedWord) {
    var selectedWord = hangmanWords[Math.floor(Math.random() * hangmanWords.length)];
    var progressWord = [];
    for (var i = 0; i < selectedWord.length; i++) {
      progressWord.push("-");
    }

    document.getElementById("wordDisplay").innerHTML = progressWord.join(' ');
  }
  wordSelector(wordSelector());



  // compare function // decrement lives function // remove health bar and show comment function
  function compare(event) {

    console.log(event);
  }

}
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

#container {
  overflow: hidden;
  max-width: 60%;
  background-color: yellowgreen;
  margin: 7em auto;
  padding: 1em;
}

#wordDisplay {
  height: 6em;
  background-color: orangered;
  margin-bottom: 1em;
  text-align: center;
  padding-top: 2.4em;
  font-size: 26px;
}

#hint {
  width: 16em;
  padding: 1em;
  background-color: skyblue;
  margin: 0em 0em 1em 0.5em;
  border: 0.5em ridge gold;
  font-weight: 900;
  margin: 0em 0em 0em 4em;
}

#hint:hover {
  background-color: coral;
  cursor: pointer;
  font-style: oblique;
}

#letterDiplay {
  width: 14em;
  float: left;
  text-align: center;
  background: crimson;
  padding: 1em;
}

.letters {
  margin: 0.3em auto;
  text-align: center;
  width: 4em;
  height: 3em;
  background-color: darkorange;
  border: 3px ridge darkblue;
  font-weight: 900;
}

.letters:hover {
  background: steelblue;
  color: white;
  cursor: pointer;
}

#theChanceCounter {
  text-align: center;
  float: right;
  width: 14em;
  background-color: crimson;
  height: 28.9em;
}

.lives {
  width: 9em;
  margin: 0em auto;
  background-color: green;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
  <div id="container">
    <section id="wordDisplay">

    </section>
    <button id="hint">Click to display hint</button>
    <section id="letterDiplay">
      <button class="letters" value="a">A</button>
      <button class="letters" value="b">B</button>
      <button class="letters" value="c">C</button>
      <button class="letters" value="d">D</button>
      <button class="letters" value="e">E</button>
      <button class="letters" value="f">F</button>
      <button class="letters" value="g">G</button>
      <button class="letters" value="h">H</button>
      <button class="letters" value="i">I</button>
      <button class="letters" value="j">J</button>
      <button class="letters" value="k">K</button>
      <button class="letters" value="l">L</button>
      <button class="letters" value="m">M</button>
      <button class="letters" value="n">N</button>
      <button class="letters" value="o">O</button>
      <button class="letters" value="p">P</button>
      <button class="letters" value="q">Q</button>
      <button class="letters" value="r">R</button>
      <button class="letters" value="s">S</button>
      <button class="letters" value="t">T</button>
      <button class="letters" value="u">U</button>
      <button class="letters" value="v">V</button>
      <button class="letters" value="w">W</button>
      <button class="letters" value="x">X</button>
      <button class="letters" value="y">Y</button>
      <button class="letters" value="z">Z</button>
    </section>
    <section id="theChanceCounter">
      <div class="lives">

      </div>
    </section>
  </div>
  <script>
  </script>
</body>

</html>

相关问题
最新问题