您的方法

Question

好。更新了完整背景的帖子，以了解目标。

创建一个用户选择两个角色进行决斗的游戏。每个＆＃39;字符＆＃39;是一个对象。每个对象的布尔属性isAttacker最初设置为false。这两个字符被推入chosenChar数组。

单击一个攻击按钮时，我会随机从攻击的chosenChar阵列中选择一个角色对象。然后我将isAttacker布尔值切换为true。我也抓住了某些攻击＆＃39;从对象内的攻击属性数组中打印到屏幕。谁不是攻击者（布尔值isAttacker仍然是假的） - 我抓住他们的＃34;防御＆＃34;电源和打印到屏幕。

这一切都是通过以下代码完成的：

 function attack () {

        attackChar = [];

        // get a random character to attack
        attackChar = chosenChar[Math.floor(Math.random()*chosenChar.length)];
        attackCharName = attackChar.name;


        // set isAttacker to true/false based on the attackChar
        chosenChar.forEach(function(char) {
            char.isAttacker = char === attackChar;
        });

        for (var i = 0; i < chosenChar.length; i++) {
            if(chosenChar[i].isAttacker === true) {

            } else {
                defender = chosenChar[i];
                defenderName = defender.name;

            }
        }

        // get a random attack from that character
        randAttackList = attackChar.attacks;
        randAttack = randAttackList[Math.floor(Math.random() * randAttackList.length)];
        $('#attack-text-row').html(attackCharName + " " + randAttack + " dealing " + attackChar.attackPwr + " damage.");
        $('#defense-text-row').html(defenderName + " blocks " + defender.blockPwr + " points of damage.");
    }

每次“攻击”按钮都会出现。单击一个随机抽取的新攻击者，我需要一些方法来记录他们的健康状况并将其打印到屏幕上。我为此创建了一个新功能。此外，由于我无法知道字符在屏幕的哪一侧，当最初选择字符时，我将新的关键字/属性推送到placement的对象中。这样我就知道后卫是在竞技场的左侧还是右侧。

这是我的计算健康功能。它的目的是获取随机攻击者的力量，获得防御者的阻挡能力，计算净伤害，并在每次点击按钮时随着角色的变化打印到相应的角色。

function caclulateHealth () {

        var netDmg = attackChar.attackPwr - defender.blockPwr;
        defender.health = defender.health - netDmg;
        console.log(defenderName + " health is " + defender.health);


        for (var i = 0; i < chosenChar.length; i++) {

            if (!chosenChar[i].isAttacker) {
                if (chosenChar[i].placement === 'left') {
                    $('#healthBox1').html(defender.health);
                } else {
                    $('#healthBox2').html(defender.health);
                }
            }

            if (chosenChar[i].placement === 'left' && !chosenChar[i].isAttacker) {
                $('#healthBox1').attr({
                    'style': 'width:' + defender.health + '%',
                    'aria-valuenow' : defender.health
                  });

                if (defender.health <= 50) {
                    $('#healthBox2').addClass('bg-warning');
                } else if (defender.health <= 25) {
                    $('#healthBox2').addClass('bg-danger');
                }

            } else {
                $('#healthBox2').attr({
                    'style': 'width:' + defender.health + '%',
                    'aria-valuenow' : defender.health
                  });

                if (defender.health <= 50) {
                    $('#healthBox2').addClass('bg-warning');
                } else if (defender.health <= 25) {
                    $('#healthBox2').addClass('bg-danger');
                }
            }
        }

最后，我做了一些为进度条工作的代码。数字对于健康值是正确的，但进度条有时会增加（意味着角色获得了生命）。同样，健康数字不会改变，但数字的表示有时会错误计算。

这是一张照片：

Answer 1

您必须添加px或%（无论需要什么），而不是使用.attr使用.css

$('#healthBox1').css("width", defender.health * 100+"px");

或使用

$('#healthBox1').width(defender.health * 100+"px");

Answer 2

缺少%符号

您的方法

let defender = {'health': .25};
$('#healthBox1').attr({
  'style': 'width:' + (defender.health * 100)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<br>
<div id='healthBox1' class='progress'>

请查看此代码段

此代码段添加了符号%

let defender = {'health': .25};
$('#healthBox1').attr({
  'style': 'width:' + (defender.health * 100) + '%'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<br>
<div id='healthBox1' class='progress'>

将值传递给属性

2 个答案:

您的方法

请查看此代码段