javascript - Hangman 游戏 - 替换列表中的字母

Question

作为我作业的一部分，我正在制作一个简单的刽子手游戏，用户单击字母表，然后应该交换正确的字母，否则显示为 _。

我知道问题是 myWord[i].innerHTML =gues; 以及原因，但我不知道这里还可以使用什么。

如果您不想查看整个代码片段，则应该处理它的函数如下:

function wordOnClick() {

    var guess = this.innerHTML; //Usikker
    this.className = "active";
    this.onclick = null;
    for (var i=0; i<saveWord.length; i++) {
        if (saveWord[i] === guess) {

            myWord[i].innerHTML = guess;

            var bool = true;
            winCounter++;

        }
    }
    if (bool != true) {
        counter --;
        animateMan();

    }
    if (counter === 0) {
        document.getElementById("buttons").className = "active";

    }
    if (winCounter === saveWord.length) {
        lifePool.innerHTML = "Congratz, you've won!";
        hangmanbtn.style.display = "inherit";

    }
}

完整代码在这里:

hangmanbtn.onclick = function() {
  hangman();
};


/*   
 *   Hangman!
 *   Runs when you click PLAY!
 */
function hangman() {

  hangmanStyle();
  createbuttons();
  incompleteWord();

  /*
   *   RESET CANVAS ON NEW GAME
   */
  var canvas = document.getElementById("hangman");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  /*
   *   REMOVE CAVNAS OVERLAY & RESTORE BUTTONS
   */
  hangmanbtn.style.display = "none";
  hiddenCanvas.style.display = "none";
  lifePool.innerHTML = "You have 6 lives";
  document.getElementById("buttons").className = "";

  /*
   *   VARIABLES
   */
  var saveWord;
  var words = [];
  var guess;
  var usedGuesses = [];
  var getWord;
  var myWord = document.getElementById("myWord").innerHTML;
  var counter = 6;
  var winCounter = 0;

  /*
   *   This function creates the alphabet buttons
   */
  function createbuttons() {

    document.getElementById("buttons").innerHTML = "";
    var sexyButtons = document.getElementById("buttons");
    var letters = document.createElement("ul");
    var alphabet = ['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 < alphabet.length; i++) {

      letters.id = "alphabet";
      var list = document.createElement("li");
      list.id = "letter";
      list.innerHTML = alphabet[i];
      list.onclick = wordOnClick;
      sexyButtons.appendChild(letters);
      letters.appendChild(list);

    }
  }

  /*
   *   Finds a random word and returns it
   */
  function chosenWord() {

    words = ["keyboard", "guitar", "elephant", "radio", "amnesia", "law", "programming", "princess",
      "facebook", "pizza", "taco", "electronics", "titanic", "elevator", "cat", "house", "sea", "space", "galaxy", "psychopath", "marijuana", "youcanneverguessthiswordhahah"
    ];

    var result = Math.floor(Math.random() * words.length);
    saveWord = words[result];
    console.log(saveWord);
    return saveWord;

  }

  /*
   *   Gets word from chosenWord() and displays the word in a list
   */
  function incompleteWord() {

    var wordHolder = document.getElementById("hold");
    var makeWordList = document.createElement("ul");
    var getWord = chosenWord();
    guess;
    usedGuesses = [];
    hold.innerHTML = "";

    for (var i = 0; i < getWord.length; i++) {
      makeWordList.id = "myWord";
      guess = document.createElement("li");
      guess.className = "guess";
      guess.innerHTML = "_";
      wordOnClick();
      usedGuesses.push(guess);
      wordHolder.appendChild(makeWordList);
      makeWordList.appendChild(guess);

    }
    return getWord;
    return usedGuesses;

  }

  /*
   *   Runs when you click a letter:
   *   Replaces _ with the correct letter, draws the hangman if it is wrong, whites out
   *   the already clicked letters, and gives feedback on remaining lives
   */
  function wordOnClick() {

    var guess = this.innerHTML; //Usikker
    this.className = "active";
    this.onclick = null;
    for (var i = 0; i < saveWord.length; i++) {
      if (saveWord[i] === guess) {
        myWord[i].innerHTML = guess;
        var bool = true;
        winCounter++;

      }
    }
    if (bool != true) {
      counter--;
      animateMan();

    }
    if (counter === 0) {
      document.getElementById("buttons").className = "active";

    }
    if (winCounter === saveWord.length) {
      lifePool.innerHTML = "Congratz, you've won!";
      hangmanbtn.style.display = "inherit";

    }
  }

  /*
   *   This function sets the width and color for the hangman
   */
  function hangmanStyle() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.strokeStyle = "#000"
    ctx.lineWidth = 4;

  }

  /*
   *   This function draws the hangman pieces in order
   */
  function animateMan() {

    var remLives = counter;

    for (var i = -1; i < remLives; i++) {


      if (remLives === 5) {
        head();
        lifePool.innerHTML = "You have " + remLives + " lives";

      } else if (remLives === 4) {
        body();
        lifePool.innerHTML = "You have " + remLives + " lives";

      } else if (remLives === 3) {
        leftArm();
        lifePool.innerHTML = "You have " + remLives + " lives";

      } else if (remLives === 2) {
        rightArm();
        lifePool.innerHTML = "You have " + remLives + " lives";

      } else if (remLives === 1) {
        leftLeg();
        lifePool.innerHTML = "You have " + remLives + " lives";

      } else if (remLives === 0) {
        rightLeg();
        lifePool.innerHTML = "You have lost!";
        hangmanbtn.style.display = "inherit";

      }
    }
  }

  /*
   *   These are the hangman limbs
   */
  function head() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.fillStyle = "#000"
    ctx.arc(235, 145, 25, 0, 2 * Math.PI)
    ctx.fill();
    ctx.stroke();

  }


  function body() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.moveTo(235, 170);
    ctx.lineTo(235, 250);
    ctx.stroke();

  }


  function leftArm() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.moveTo(235, 180);
    ctx.lineTo(200, 200);
    ctx.stroke();

  }


  function rightArm() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.moveTo(235, 180);
    ctx.lineTo(270, 200);
    ctx.stroke();

  }


  function leftLeg() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.moveTo(235, 250);
    ctx.lineTo(200, 290);
    ctx.stroke();

  }


  function rightLeg() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.moveTo(235, 250);
    ctx.lineTo(270, 290);
    ctx.stroke();

  }
}

body {
  background-color: antiquewhite;
}
.task {
  margin: 5px;
  padding: 3px;
  border-top: 2px solid gray;
}
#hangman {
  /*background-image: url("hangman/hangmanbackground.jpg");*/
  background-color: #FFF;
}
#alphabet {
  padding: 2px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 8px;
  width: 380px;
  height: 80px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -khtml-border-radius: 5px;
  border: solid 1px #fff;
  background-color: forestgreen;
}
#alphabet li {
  float: left;
  margin: 0 5px 13px 0;
  list-style: none;
  width: 12px;
  height: 10px;
  padding: 5px;
  padding-bottom: 15px;
  background: #c1d72e;
  color: #fff;
  cursor: pointer;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -khtml-border-radius: 5px;
  border: solid 1px #fff;
}
#alphabet li:hover {
  background: #3ADF00;
  border: solid 1px #fff;
  color: #fff;
}
.active {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -moz-transition: all 1s ease-in;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  cursor: default;
}
.active:hover {
  -moz-transition: all 1s ease-in;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  opacity: 0.4;
  filter: alpha(opacity=40);
  -moz-transition: all 1s ease-in;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
#myWord {
  margin: 0;
  display: block;
  padding: 0;
  display: block;
}
#myWord li {
  position: relative;
  list-style: none;
  margin: 0;
  display: inline-block;
  padding: 0 10px;
  font-size: 30px;
}
#lifePool {
  max-width: 300px;
  margin: 0;
  z-index: 3px;
  font-size: 30px;
  font-family: monospace;
  color: #c1d72e;
}
#hiddenCanvas {
  height: 500px;
  width: 800px;
  position: absolute;
  z-index: 4;
  background-color: forestgreen;
  opacity: 0.8;
}
#hangmanbtn {
  width: 100px;
  height: 50px;
  background-color: #c1d72e;
  border-radius: 10px;
  color: #fff;
  font-size: 25px;
}

<section class="task">
  <h3>
    Task 4
  </h3>
  <button id=hangmanbtn>Play!</button>
  <div id="hiddenCanvas"></div>
  <p id="lifePool"></p>
  <div id="buttons"></div>
  <div id="hold"></div>
  <canvas id="hangman" height="500px" width="800px"></canvas>
</section>

Answer 1

您的错误是您总是将变量重置为其默认值。请正确的方法:

hangmanbtn.onclick = function() {
  hangman();
};


/*   
 *   Hangman!
 *   Runs when you click PLAY!
 */
function hangman() {

  hangmanStyle();
  createbuttons();
  incompleteWord();

  /*
   *   RESET CANVAS ON NEW GAME
   */
  var canvas = document.getElementById("hangman");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  /*
   *   REMOVE CAVNAS OVERLAY & RESTORE BUTTONS
   */
  hangmanbtn.style.display = "none";
  hiddenCanvas.style.display = "none";
  lifePool.innerHTML = "You have 6 lives";
  document.getElementById("buttons").className = "";

  /*
   *   VARIABLES
   */
  var saveWord;
  var words = [];
  var guess;
  var getWord;
  var myWord = document.getElementById("myWord").innerHTML;
  var counter = 6;
  var winCounter = 0;

  /*
   *   This function creates the alphabet buttons
   */
  function createbuttons() {

    document.getElementById("buttons").innerHTML = "";
    var sexyButtons = document.getElementById("buttons");
    var letters = document.createElement("ul");
    var alphabet = ['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 < alphabet.length; i++) {

      letters.id = "alphabet";
      var list = document.createElement("li");
      list.id = "letter";
      list.innerHTML = alphabet[i];
      list.onclick = wordOnClick;
      sexyButtons.appendChild(letters);
      letters.appendChild(list);

    }
  }

  /*
   *   Finds a random word and returns it
   */
  function chosenWord() {

    words = ["keyboard", "guitar", "elephant", "radio", "amnesia", "law", "programming", "princess",
      "facebook", "pizza", "taco", "electronics", "titanic", "elevator", "cat", "house", "sea", "space", "galaxy", "psychopath", "marijuana", "youcanneverguessthiswordhahah"
    ];

    var result = Math.floor(Math.random() * words.length);
    saveWord = words[result];
    console.log(saveWord);
    return saveWord;

  }

  /*
   *   Gets word from chosenWord() and displays the word in a list
   */
  function incompleteWord() {

    var wordHolder = document.getElementById("hold");
    var makeWordList = document.createElement("ul");
    var getWord = chosenWord();
    guess;
    usedGuesses = [];
    hold.innerHTML = "";

    for (var i = 0; i < getWord.length; i++) {
      makeWordList.id = "myWord";
      guess = document.createElement("li");
      guess.className = "guess";
      guess.innerHTML = "_";
      wordOnClick();
      usedGuesses.push(guess);
      wordHolder.appendChild(makeWordList);
      makeWordList.appendChild(guess);

    }
    return getWord;
    return usedGuesses;

  }

  /*
   *   Runs when you click a letter:
   *   Replaces _ with the correct letter, draws the hangman if it is wrong, whites out
   *   the already clicked letters, and gives feedback on remaining lives
   */
  function wordOnClick() {

    var guess = this.innerHTML; //Usikker
    this.className = "active";
    this.onclick = null;
    for (var i = 0; i < saveWord.length; i++) {
      if (saveWord[i] === guess) {
        usedGuesses[i].innerHTML = guess;
        var bool = true;
        winCounter++;

      }
    }
    if (bool != true) {
      counter--;
      animateMan();

    }
    if (counter === 0) {
      document.getElementById("buttons").className = "active";

    }
    if (winCounter === saveWord.length) {
      lifePool.innerHTML = "Congratz, you've won!";
      hangmanbtn.style.display = "inherit";

    }
  }

  /*
   *   This function sets the width and color for the hangman
   */
  function hangmanStyle() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.strokeStyle = "#000"
    ctx.lineWidth = 4;

  }

  /*
   *   This function draws the hangman pieces in order
   */
  function animateMan() {

    var remLives = counter;

    for (var i = -1; i < remLives; i++) {


      if (remLives === 5) {
        head();
        lifePool.innerHTML = "You have " + remLives + " lives";

      } else if (remLives === 4) {
        body();
        lifePool.innerHTML = "You have " + remLives + " lives";

      } else if (remLives === 3) {
        leftArm();
        lifePool.innerHTML = "You have " + remLives + " lives";

      } else if (remLives === 2) {
        rightArm();
        lifePool.innerHTML = "You have " + remLives + " lives";

      } else if (remLives === 1) {
        leftLeg();
        lifePool.innerHTML = "You have " + remLives + " lives";

      } else if (remLives === 0) {
        rightLeg();
        lifePool.innerHTML = "You have lost!";
        hangmanbtn.style.display = "inherit";

      }
    }
  }

  /*
   *   These are the hangman limbs
   */
  function head() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.fillStyle = "#000"
    ctx.arc(235, 145, 25, 0, 2 * Math.PI)
    ctx.fill();
    ctx.stroke();

  }


  function body() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.moveTo(235, 170);
    ctx.lineTo(235, 250);
    ctx.stroke();

  }


  function leftArm() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.moveTo(235, 180);
    ctx.lineTo(200, 200);
    ctx.stroke();

  }


  function rightArm() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.moveTo(235, 180);
    ctx.lineTo(270, 200);
    ctx.stroke();

  }


  function leftLeg() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.moveTo(235, 250);
    ctx.lineTo(200, 290);
    ctx.stroke();

  }


  function rightLeg() {

    var ctx = document.getElementById("hangman").getContext("2d");

    ctx.beginPath();
    ctx.moveTo(235, 250);
    ctx.lineTo(270, 290);
    ctx.stroke();

  }
}

body {
  background-color: antiquewhite;
}
.task {
  margin: 5px;
  padding: 3px;
  border-top: 2px solid gray;
}
#hangman {
  /*background-image: url("hangman/hangmanbackground.jpg");*/
  background-color: #FFF;
}
#alphabet {
  padding: 2px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 8px;
  width: 380px;
  height: 80px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -khtml-border-radius: 5px;
  border: solid 1px #fff;
  background-color: forestgreen;
}
#alphabet li {
  float: left;
  margin: 0 5px 13px 0;
  list-style: none;
  width: 12px;
  height: 10px;
  padding: 5px;
  padding-bottom: 15px;
  background: #c1d72e;
  color: #fff;
  cursor: pointer;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -khtml-border-radius: 5px;
  border: solid 1px #fff;
}
#alphabet li:hover {
  background: #3ADF00;
  border: solid 1px #fff;
  color: #fff;
}
.active {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -moz-transition: all 1s ease-in;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  cursor: default;
}
.active:hover {
  -moz-transition: all 1s ease-in;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  opacity: 0.4;
  filter: alpha(opacity=40);
  -moz-transition: all 1s ease-in;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
#myWord {
  margin: 0;
  display: block;
  padding: 0;
  display: block;
}
#myWord li {
  position: relative;
  list-style: none;
  margin: 0;
  display: inline-block;
  padding: 0 10px;
  font-size: 30px;
}
#lifePool {
  max-width: 300px;
  margin: 0;
  z-index: 3px;
  font-size: 30px;
  font-family: monospace;
  color: #c1d72e;
}
#hiddenCanvas {
  height: 500px;
  width: 800px;
  position: absolute;
  z-index: 4;
  background-color: forestgreen;
  opacity: 0.8;
}
#hangmanbtn {
  width: 100px;
  height: 50px;
  background-color: #c1d72e;
  border-radius: 10px;
  color: #fff;
  font-size: 25px;
}

<section class="task">
  <h3>
    Task 4
  </h3>
  <button id=hangmanbtn>Play!</button>
  <div id="hiddenCanvas"></div>
  <p id="lifePool"></p>
  <div id="buttons"></div>
  <div id="hold"></div>
  <canvas id="hangman" height="500px" width="800px"></canvas>
</section>