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

Posted 2023-05-08

【中文标题】如果值不改变 Hangman Javascript，如何跳过“if”语句

【英文标题】：How to skip an 'if' statement if a value doesn't change Hangman Javascript

【发布时间】：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？

【参考方案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);