Мой опыт в основном связан с Python и C #, но я помогаю другу, который изучает JavaScript, начать изучать код.Занятия закончились на этой неделе, но они никогда не рассказывали о том, как делать классы в JavaScript, поэтому я подумал, что очень быстро соберу пример, чтобы проиллюстрировать, как они работают.Единственная проблема заключается в том, что всякий раз, когда я изменяю значение свойства в одном экземпляре класса, это свойство изменяется во всех экземплярах.Есть ли способ заставить это работать?
В основном, когда я наношу урон троллю1, здоровье тролля2 все равно должно быть 10 (и наоборот).Вместо этого, если я нанесу три повреждения троллю1, здоровье троллей2 и тролля3 также станет 7.
Я попытался установить здоровье вне конструктора, но затем я получаю ошибки при вызове методов класса, говорящих о том, что здоровьене определено (независимо от того, использую ли я this.health или только здоровье).
Вот HTML и JS для примера, который я сделал:
class trollEnemy {
constructor() {
this.health = 10;
}
takeDamage(damageAmount) {
this.health = this.health - damageAmount;
if (this.health > 0) {
document.getElementById("outputDiv").innerHTML = "Dealt " + damageAmount + " damage to the troll, the troll now has " + this.health + " health left";
} else {
document.getElementById("outputDiv").innerHTML = "Dealt " + damageAmount + " damage to the troll, the troll is now dead";
}
}
getHealth() {
if (this.health > 0)
document.getElementById("outputDiv").innerHTML = "The troll has " + this.health + " health left";
else
document.getElementById("outputDiv").innerHTML = "The troll is dead";
}
}
var troll1 = new trollEnemy();
var troll2 = new trollEnemy();
var troll3 = new trollEnemy();
function generateNewTroll(trollNumber) {
switch (trollNumber) {
case 1:
troll1 = new trollEnemy();
case 2:
troll2 = new trollEnemy();
case 3:
troll3 = new trollEnemy();
}
}
function damageTroll(trollNumber) {
switch (trollNumber) {
case 1:
troll1.takeDamage(document.getElementById("trollDamageAmount").value);
case 2:
troll2.takeDamage(document.getElementById("trollDamageAmount").value);
case 3:
troll3.takeDamage(document.getElementById("trollDamageAmount").value);
}
}
function checkTrollHealth(trollNumber) {
switch (trollNumber) {
case 1:
troll1.getHealth();
case 2:
troll2.getHealth();
case 3:
troll3.getHealth();
}
}
<button onclick="generateNewTroll(1)">Generate New Troll #1</button><button onclick="damageTroll(1)">Deal Damage To Troll #1</button> <button onclick="checkTrollHealth(1)">Check Troll #1 Health</button><br>
<button onclick="generateNewTroll(2)">Generate New Troll #2</button><button onclick="damageTroll(2)">Deal Damage To Troll #2</button> <button onclick="checkTrollHealth(2)">Check Troll #2 Health</button><br>
<button onclick="generateNewTroll(3)">Generate New Troll #3</button><button onclick="damageTroll(3)">Deal Damage To Troll #3</button> <button onclick="checkTrollHealth(3)">Check Troll #3 Health</button> Enter the amount of damage you want to deal to a
troll: <input type="text" id="trollDamageAmount">
<br>
<div id="outputDiv">Test</div>