javascript - 继续创建新元素，直到满足条件

Question

我有一个战斗系统，我想对其进行设置，这样它将创建一个新的 p 元素，直到怪物 hp 为 0，而不是填写 #dam 的文本。我希望它一键创建所有 p 元素按钮的。每个 p 元素都应显示在其上方元素的下方。

JSfiddle

$('#battleButton').click(function() {  
    //playerDam();
  monsterEl = $('#monsterList option:selected');  
  monster = monsterEl.data('monster')
  if(monster.hp > 0) {
    $('#dam').html("You have hit the " + $('#monsterList').val() + " for " + monster.playerDam() + " damage");
    monster.hp -= monster.playerDam();
  }
  else {
    $('#dam').html("You have defeated the " + $('#monsterList').val() + ", you have received " + monster.exp + " experience and " + monster.gold + " gold!");
    monster.hp = monster.hp;
  }
});

此外，一旦 monster.hp 达到 0 或更少，代码现在的方式我不知道如何重置 hp 以便单击战斗再次起作用。

Answer 1

这是 while 循环的教科书情况。要对元素进行排队，请使用 append 而不是 html，然后在战斗开始时清空 div :

$('#dam').empty();
while(monster.hp > 0) {
    $('#dam').append("<p>You have hit the " + $('#monsterList').val() + " for " + monster.playerDam() + " damage</p>");
    monster.hp -= monster.playerDam();
}
$('#dam').append("<p>You have defeated the " + $('#monsterList').val() + ", you have received " + monster.exp + " experience and " + monster.gold + " gold!</p>");

要重置怪物的生命，您必须向 Monster 类添加一个属性，以在其健康状况良好时存储其生命量:

function Monster(name, exp, gold, hp, atk, def, spd) {
    var self = this;
    this.name = name;
    this.exp = exp;
    this.gold = gold;
    this.fullLife = hp;
    this.hp = hp;
    ...
}

那么你所要做的就是在战斗结束时将他的生命值恢复到他的 fullLife 属性:

monster.hp = monster.fullLife;

这是 fiddle :https://jsfiddle.net/5cdwu23d/3/

(不过要小心，你的playerDam函数不太实用，当怪物对玩家来说太难并且他的生命永远不会接近于零时，你有一些带有while的无限循环)