Question

您好！这是我的第一篇文章，所以我真诚的道歉，如果它已被问及我没有彻底查看它。

我对我正在制作的游戏有疑问。它使用div，当你点击它时，它会减少敌人的HP。我有那个部分，很好，但我想要一种方法在HP栏上显示它。
所以，让我们说你点击敌人几个关系，它失去了50 HP。我想要一个HP栏，下面显示剩下的HP。所以我点击它，它有25马力，然后它将显示25 /（让我们说总共）100马力。
我也想知道你如何使用颜色。就像在游戏神奇宝贝中一样，一旦你低于50％HP，你的酒吧会变成黄色，然后是橙色，然后是红色。
感谢您的帮助，我希望您度过美好的一天！

const player = {
    name:"none",
    hp: 50,
    atk: 5
};

player.name = prompt("Welcome Warrior, what is your name?");
document.getElementById("name").innerHTML = "Private, " + player.name;

const enemy = {
    hp: 50
};

const hitMe = (hitPoint) => {
    enemy.hp = enemy.hp - hitPoint;
    console.log(enemy.hp);
    console.log(player);
};

<!DOCTPYE html>
<html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="game.css">
        
    </head>
        
    <body>
        <div class="container">
            <div id="display">
                <div  id="info">
                    <div id="char">
                        <div class="box" id="name"></div>
                        <div class="box" id="weapon">Weapon</div>
                    </div>
                    <div class="box" id="hp">Health</div>
                </div>
                <div class="box" id="shop">Shop</div>
            </div>
            <div id="holder">
                <div class="box" id="enemybox" onclick="hitMe(3)">
                    monster
                </div>
                <div class="box" id="enemyhp">
                    Health
                </div>
            </div>
        </div>
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        <script src="game.js"></script>
        
    </body>

</html>

Answer 1

至于HP栏，你必须知道敌人的最大HP是多少。为此，您需要另一个变量ESP_init_data。我将这个添加到maxHP的对象并移除enemy约束，因为您在const中更改了它的值。

hitMe

选择enemy = { hp:50, maxHP:50 };并在每次点击时更改，即在div id="hpbar"内。

hitMe

至于颜色，您可以根据宽度值进行更改。

width = (enemy.hp*100)/(enemy.maxHP);

制作健康酒吧时使用onClick（游戏）

1 个答案: