如果值不改变 Hangman Javascript，如何跳过“if”语句答案

【问题标题】：How to skip an 'if' statement if a value doesn't change Hangman Javascript如果值不改变 Hangman Javascript，如何跳过“if”语句
【发布时间】：2016-12-17 15:27:50
【问题描述】：

我正在使用 jQuery/Javascript 进行编码练习来制作刽子手游戏。我的游戏的大部分功能都有效：获取新单词、更新猜测等。但是问题在于关于 if 语句和调用的绘图函数的 reviewLives() 函数。代码如下：

//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>

问题开始于再次输入错误的字母。虽然第一次输入错误的字母确实会画出火柴人的一部分，但如果用户再次输入相同错误的字母，则会弹出警报以通知键已经被按下，它会绘制火柴人的相同部分（即它会绘制第二个头部）。我知道这是因为值 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);

  
}

【问题讨论】：

我不想给出完整的答案，因为现在要处理的代码有点多，但您可能需要考虑一种不同的方法：而不是每次只绘制下一部分用户猜错了，你应该清除整个视图，并根据你还剩下多少生命重新渲染整个火柴人。为了使这更加优化，您应该将stickman div 结构构建为一个字符串，然后将其设置为绘图区域的innerHTML。这将防止不必要的 DOM 操作。
顺便说一句，在我看来drawSequence[6-livesRemaining]() 可以替换现有的 if/else/else if 结构，然后您只需要一个 if 来测试游戏是否结束。跨度>
@MatisLepik 我看到了，所以每次输入都会渲染一个新的火柴人。将stickman div结构构建为字符串是什么意思，您是指将drawfunctions推入数组然后将该数组附加为draw-area的innerHTML？

标签： javascript jquery if-statement logic

【解决方案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);

}

【讨论】：