javascript - 如果值不更改，如何跳过 'if' 语句 Hangman Javascript

Question

我正在做一个编码练习，使用 jQuery/Javascript 制作刽子手游戏。我的游戏的大部分功能都有效:获取新词、更新猜测等。但是问题出在 函数 reviewLives() 中，涉及 if 语句和调用的绘制函数。这是代码:

//Draw functions
function drawHead() {
  $('.draw-area').append($('<div>').addClass("body-part head"));
}
function drawTorso() {
  $('.draw-area').append(
  	$('<div>').addClass("body-part armbox").append(
    	$('<div>').addClass("body-part torso")));
  $('.draw-area').append(
  	$('<div>').addClass("body-part legbox").append(
    	$('<div>').addClass("body-part pelvis")));
}
function drawLeftArm(){
  $('.armbox').prepend($('<div>').addClass('body-part leftarm'));
}
function drawRightArm(){
  $('.armbox').prepend($('<div>').addClass('body-part rightarm'));
}
function drawLeftLeg(){
  $('.legbox').prepend($('<div>').addClass('body-part leftleg'));
}
function drawRightLeg(){
  $('.legbox').prepend($('<div>').addClass('body-part rightleg'));
}
var drawSequence = [drawHead,drawTorso,drawLeftArm,drawRightArm,drawLeftLeg,drawRightLeg];



//

var wordlist = ['tree', 'mail', 'male', 'female'];

var guesses = [];
var targetWord = '';
var maxLives = 7;

function newWord() {
  targetWord = wordlist[Math.floor(Math.random() * wordlist.length)];
  return targetWord;
}
console.log('Your word is: ' + newWord());
//go through string of answer word and guesses
function obfuscateWord(){
  // temp variable
  var obWord = '';
  // loop through target word as an array and loop through with the guesses made
  for (var i=0; i<targetWord.length; i++) {
    //target letter word is not being guessed
    if (guesses.indexOf(targetWord[i].toLowerCase(), 0) == -1) {
      obWord += '_ ';
    } else {
      obWord += targetWord[i];
    }

  }
  return obWord;
}


//function to draw the spaces on the screen
function drawWord() {
  while (targetWord == '') {
    newWord();
  }
  //specify the div with targetWOrd ID
  $('#targetWord').html(obfuscateWord());
}

//for guessed Letters
function drawGuesses() {
  guesses.sort();
  $('#previousGuesses').html(guesses.join(', '));
  //console.log('this is guesses0: '+guesses)
}

//remove duplicates
function cleanGuess() {
  //temporary variable
  var uniqueGuesses = [];
  //for each guess perform function
  $.each(guesses, function(index, element) {
    //if guess is not in unique guesses push it, otherwise skip it
    //if element is not empty, test if it is in array
    if (element.length > 0 && $.inArray(element, uniqueGuesses) == -1) {
      uniqueGuesses.push(element);
      
    } else {
      alert('You already guessed this letter!');
    }
    
  });
  //override current guesses with uniqueGuesses
  guesses = uniqueGuesses;
}





//to populate the array with guesses, when a letter is input by user
function addGuess() {
  //filter out to only have a alphabet using a type test
  
  if(/^[a-zA-Z]*$/.test($('#guess').val()) && typeof $('#guess').val() !== "undefined") {
    //if passes test push into the array
    guesses.push($('#guess').val().toLowerCase());
  }
  //to 'empty' the user input
  $('#guess').val('');
}




// use for win or lose, isWinner true or false
function endGameDialog(isWinner) {
	if (isWinner) {
      //alert
      //set html of #endGame dialog b ox
      $('#endGameDialogTitle').html('You won');
      $('#endGameDialogContent').html('You guessed '+targetWord+' in '+guesses.length+' attempts!');
      
    } else {
	  
      //alert
      //set html of #endGame dialog b ox
      $('#endGameDialogTitle').html('You Lost');
      $('#endGameDialogContent').html('The word was '+targetWord+'');
      
    }      
    
    //$('#endGameDialog'.modal('toggle'))
}

      
console.log('this is guesses: '+guesses)
function reviewLives() {
    var livesRemaining = maxLives,
        string = targetWord.toLowerCase();
console.log('this is string:' + string)
    for (var i = 0; i < guesses.length; i++) {
        if (string.indexOf(guesses[i], 0) == -1) {
            livesRemaining--;
          //console.log(guesses[i])
        } 
    }
  
    if (livesRemaining === 6) {
      drawSequence[0]();
    } else if (livesRemaining===5) {
      drawSequence[1]();
    } else if (livesRemaining===4) {
      drawSequence[2]();
    } else if (livesRemaining===3) {
      drawSequence[3]();
    } else if (livesRemaining===2) {
      drawSequence[4]();
    } else if (livesRemaining===1) {
      drawSequence[5]();
      endGameDialog(false);
    }

  console.log('livesRemaining is: '+livesRemaining);

  
}

function checkIfWon() {
  if (obfuscateWord() == targetWord) {
    endGameDialog(true);
  }
}

function resetGame() {
  //setImage(0);
  targetWord = '';
  guesses = [];
  newWord();
  console.log(newWord())
}

//when key is pressed call the following functions
function update() {
  addGuess();
  cleanGuess();
  drawWord();
  drawGuesses();
  reviewLives();
  checkIfWon();
}
    
    
$(document).ready(function() {
  //loadWordlist();
  drawWord();
  drawGuesses();
  $('#guess').attr('onkeyup', 'update();');
});

body { 
    font-family:sans-serif; 
    font-weight:bold; 
    font-size:16pt;
}
/* Topmatter */
.topmatter {
    height:210px;    
}
.bottommatter{
    background:#f1f1f1;
    height:auto;
}
/* For the left 'Guess A Letter!' and 'Guessed Letter' boxes. */
.side-container {
    margin-top:45px;
    margin-left:130px;
    width:170px;
    text-align:center;
}
.container-title {
    color:#6f5a2d;
}
.input-area {
    width:75px;
    height:31px;
    margin:auto;
    padding:3pt;
    border: 1px #6f5a2d solid;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    background:#ebe2ce;
}
#letter-input {
    border:1px #6f5a2d solid;
    width:20pt;
    font-size:14pt;
    text-align:center;
}
.guessed-letter {
    color:#792c15;
}
/* Word Box */
.word-box {
    width:250px;
    margin:auto;
    margin-top:25px;
    text-align:center;
}
.word-display {
    background:#ebe2ce;
    border:1px #6f5a2d solid;
    height:31px;
    padding:3pt;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
}
.shown-letter {
    border-bottom: 3px #000 solid;
    padding: 0 2px;
    margin: 0 2px;
    color:#1c2025;
}
/* Hangman Area */
.hang-container {
    margin-top:-10px;
    margin-right: 90px; 
    width:200px;
    height:205px;
    float:right;
}
.scaffolding-top {
    width:108px;
    height:5px;
    background:#332915;
}
.scaffolding-left {
    width:5px;
    height:200px;
    background:#332915;
    float:left;
}
.scaffolding-base {
    width:150px;
    height:5px;
    background:#332915;
}
.draw-area {
    width:200px;
    height:200px;
    text-align:center;
}
.rope {
    margin:auto;
    height:25px;
    width:5px;
    background:#a59885;
}
.head {
    margin:auto;
    height:30px;
    width:30px;
    background:#000;
    -webkit-border-radius: 15px;
    -moz-border-radius:15px;
    border-radius:15px;
}
.armbox {
    margin:auto;
    width:100px;
}
.leftarm {
    float:left;
    height:10px;
    width:45px;
    background:#000;
}
.rightarm {
    float:right;
    height:10px;
    width:45px;
    background:#000;
}
.torso {
    margin:auto;
    width:10px;
    height:50px;
    background:#000;
}
.legbox {
    margin:auto;
    height:60px;
    width:30px;
}
.leftleg {
    float:left;
    width:10px;
    height:60px;
    background:#000;
}
.rightleg {
    float:right;
    width:10px;
    height:60px;
    background:#000;
}
.pelvis {
    margin:auto;
    height:10px;
    width:10px;
    background:#000;
}

<html>
<head>
    <title>Hangman Game</title>
    <link rel="stylesheet" type="text/css" href="page.css">
</head>
<body>
    <div class='topmatter'> 
      <div class='hang-container'>
        <div class='scaffolding-top'></div>
        <div class='scaffolding-left'></div>
    
        <div class='draw-area'>
          <div class='rope'></div>
        </div>
    
        <div class='scaffolding-base'></div>
      </div>
      <div class='side-container'>
        <div class='container-title'>Guess A Letter!</div>
        <div class='input-area'>
          <input id='guess' type='text' maxlength='1'/>
        </div>
      </div>
    
      <div class='side-container'>
        <div class='container-title'>Guessed Letters</div>
        <div id="previousGuesses" class='input-area'></div>
      </div>
    </div>
    <div class='bottommatter'>
        <div class='word-box'>
            <div class='word-display' id='targetWord'>
            </div>
        </div>
    </div>
  <div id='endGameDialogTitle'>
    Win or Lose
  </div>
  
  
</body>
<script src='ui.js'></script>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
</html>

当再次输入错误的字母时，问题就开始了。虽然第一次输入错误的字母确实会绘制火柴人的一部分，但如果用户再次输入相同错误的字母，则会弹出警报以通知 key 已经被按下，它绘制火柴人的相同部分(即它会绘制第二个头)。我知道这是因为 livesRemaining 的值没有被更新，这导致它再次绘制相应的“drawFoobar”。我可以使用什么样的逻辑/语句来防止任何额外的绘制尝试？

这是我困扰的具体功能:`

function reviewLives() {
    var livesRemaining = maxLives,
        string = targetWord.toLowerCase();
console.log('this is string:' + string)
    for (var i = 0; i < guesses.length; i++) {
        if (string.indexOf(guesses[i], 0) == -1) {
            livesRemaining--;
          //console.log(guesses[i])
        } 
    }
  
    if (livesRemaining === 6) {
      drawSequence[0]();
    } else if (livesRemaining===5) {
      drawSequence[1]();
    } else if (livesRemaining===4) {
      drawSequence[2]();
    } else if (livesRemaining===3) {
      drawSequence[3]();
    } else if (livesRemaining===2) {
      drawSequence[4]();
    } else if (livesRemaining===1) {
      drawSequence[5]();
      endGameDialog(false);
    }

  console.log('livesRemaining is: '+livesRemaining);

  
}

`

Answer 1

例如你可以添加一个全局变量

var letterGuessed = false;

并且在 cleanGuess 函数中，当您提醒文本“您已经猜到了这封信!”时将变量 letterGuessed 设置为 true

alert('You already guessed this letter!');
letterGuessed = true;//add

然后在 reviewLives 函数中首先检查变量 letterGuessed 是否等于 false，然后在退出 for 循环后将变量 letterGuessed 设置回 false像这样

function reviewLives() {
    var livesRemaining = maxLives,
        string = targetWord.toLowerCase();
console.log('this is string:' + string)
    for (var i = 0; i < guesses.length; i++) {
        if (!letterGuessed && string.indexOf(guesses[i], 0) == -1) {//==========add !letterGuessed && 
            livesRemaining--;
          //console.log(guesses[i])
        } 
    }
    letterGuessed = false;//==========add

    if (livesRemaining === 6) {
      drawSequence[0]();
    } else if (livesRemaining===5) {
      drawSequence[1]();
    } else if (livesRemaining===4) {
      drawSequence[2]();
    } else if (livesRemaining===3) {
      drawSequence[3]();
    } else if (livesRemaining===2) {
      drawSequence[4]();
    } else if (livesRemaining===1) {
      drawSequence[5]();
      endGameDialog(false);
    }

  console.log('livesRemaining is: '+livesRemaining);

}