Question

我想进行回合制战斗（RPG风格），直到我的hp或对手的hp降至0，并通过表格每回合输入一个数字。

问题在于，一旦加载index.js文件，我就会陷入无限循环。我无法在表单中输入任何内容。我试图退出该函数以从循环中获取值。我现在可以输入一个数字，但是它在循环中不起作用。我试图将所有代码的作用域限定在function（）中，并使用回调。

代码如下：

while((opponant.health > 0) && (player.health > 0)) {
    $('#battlebutton').click(function() {
        attDef = $('#battleinput').val();
        console.log(attDef);
        opponantAttDef = Math.floor(Math.random() * 2) + 1;
        if (attDef == 1 && opponantAttDef == 1) {
            opponant.health = opponant.health - player.strength;
            player.health = player.health - opponant.strength;
            $('#battlelog h3 ol').append('<ul>You attack ' + opponant.name + '.' + opponant.health + ' HP remaining. <br>' + opponant.name + 'attack you. You got ' + player.health + ' remaining </ul>');
        } else if (attDef == 2 && opponantAttDef == 1) {
            player.health = player.health - (opponant.strength / 2);
            $('#battlelog h3 ol').append('<ul>You defend yourself. <br> ' + opponant.name + 'attack you. You got ' + player.health + ' remaining </ul>');
        } else if (attDef == 1 && opponantAttDef == 2) {
            opponant.health = opponant.health - (player.strength / 2);
            $('#battlelog h3 ol').append('<ul>You attack '+ opponant.name +', but it defends itself. Your damage are halved. Your foe still have ' + opponant.health +' HP.</ul>');
        } else if (attDef == 2 && opponantAttDef == 2){
            $('#battlelog h3 ol').append('<ul> You both stand sill. Nothing happens...</ul>');
    } else {
            $('#battlelog h3 ol').append('<ul> Wrong input </ul>');
        }
    })
}

<input type="number" id="battleinput" value="" placeholder="Att or def ?">
<button id="battlebutton">Yataaaaa !!!</button>
<div id="battlelog">
    <h3>Your battle log :</h3>
    <ol>
             <!-- Battle log -->
    </ol>

我希望玩家每回合输入1或2，并具有回合决定（对手的at或def是随机生成的）。我希望在输入中使用它，而不是使用hint（）。

Answer 1

正如我在评论中所说：

while((opponant.health > 0) && (player.health > 0))在加载时为true，因此您的脚本将在#battlebutton上无限添加一个事件侦听器。

实际上，您的while循环不适合使用。单击按钮后，您应该检查演员的生命值，然后执行其他操作。

非常简单，将while语句替换为if条件，当您单击该按钮时将对其进行检查。

在这种情况下，停止脚本的其余部分并删除事件侦听器。

在下面查看我的操作。当玩家或对手死亡时，我允许自己添加战斗日志（并且我更正了许多细节，例如将<ul>替换为<li>）。

// This block is just for make your snippet works correctly.
const Actor = function (name, hp, str) {
  this.name = name;
  this.health = hp;
  this.strength = str;
};

const opponent = new Actor('Opponent', 10, 2),
  player = new Actor('Player', 10, 2);
// The block above is just for make your snippet works correctly.

$('#battlebutton').click(function() {
  // When the player is dead:
  if (player.health <= 0) {
    $('#battlelog ol').append(`
      <li>You died.</li>
    `);
  }

  // When the opponent is dead:
  if (opponent.health <= 0) {
    $('#battlelog ol').append(`
      <li>${opponent.name} died.</li>
    `);
  }
  
  // If one of the actors is dead, turns off the event listener
  // on "Yataaaaa !!!" and doesn't execute what's left.
  if (player.health <= 0
    || opponent.health <= 0) {
    $(this).off('click');
    return;  
  }

  const attDef = +$('#battleinput').val(),
    opponentAttDef = Math.floor(Math.random() * 2) + 1;
      
  if (attDef === 1
    && opponentAttDef === 1) {
    opponent.health = opponent.health - player.strength;
    player.health = player.health - opponent.strength;
    
    $('#battlelog ol').append(`
      <li>You attack ${opponent.name}. ${opponent.health} HP remaining.</li>
    `);
  } else if (attDef === 2
    && opponentAttDef === 1) {
    player.health = player.health - (opponent.strength / 2);
    
    $('#battlelog ol').append(`
      <li> You defend yourself. ${opponent.name} attack you. You got ${player.health} remaining. </li>
    `);
  } else if (attDef === 1
    && opponentAttDef === 2) {
    opponent.health = opponent.health - (player.strength / 2);
    
    $('#battlelog ol').append(`
      <li> You attack ${opponent.name}, but he defends himself. Your damage are halved. Your foe still have ${opponent.health} HP. </li>
    `);
  } else if (attDef === 2
    && opponentAttDef === 2){
    $('#battlelog ol').append(`
      <li> You both stand sill. Nothing happens... </li>
    `);
  } else {
    $('#battlelog ol').append(`
      <li> Wrong input. </li>
    `);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="battleinput" value="" placeholder="Att or def ?">

<button id="battlebutton">Yataaaaa !!!</button>

<div id="battlelog">
  <h3>Your battle log :</h3>
  
  <ol></ol>
</div>

输入值变成无限循环（RPG战斗）

1 个答案: