我制作了一个我正在制作的小型模拟游戏的 JSFiddle ( https://jsfiddle.net/uw2k9ba6/1/ )。
这是我的 Javascript 以供引用:
$(document).ready(function () {
//charmander
var charmander = {
hp: 140
};
console.log(charmander.hp);
document.getElementById('charnum').innerHTML = (charmander.hp);
//bulbasaur
var bulbasaur = {
hp: 180
}
document.getElementById('bulbnum').innerHTML = (bulbasaur.hp);
//squirtle
var squirtle = {
hp: 160
}
document.getElementById('squirnum').innerHTML = (squirtle.hp);
let found = false;
let charPick = false;
let bulbPick = false;
let squirPick = false;
var startGame = false;
var fighters = [];
var ids = [];
//select pokemon - WORKING
function selector() {
$("#charbut").click(function () {
if (found === false) {
found = true;
bulbPick = true;
squirPick = true;
$('#bulbasaur').animate({ right: '-=600px' });
$("#bulbasaur").css({ backgroundColor: "grey" });
$('#squirtle').animate({ right: '-=600px' });
$("#squirtle").css({ backgroundColor: "grey" });
$('#charmander').animate({ bottom: '-=300px' });
$("#charmander").css({ backgroundColor: "#85C1E9" });
var input = this;
input.disabled = true;
fighters.push(charmander.hp);
ids.push($('#charnum'));
console.log(ids);
}
})
$("#bulbut").click(function () {
if (found === false) {
found = true;
charPick = true;
squirPick = true;
$('#charmander').animate({ right: '-=600px' });
$("#charmander").css({ backgroundColor: "grey" });
$('#squirtle').animate({ right: '-=600px' });
$("#squirtle").css({ backgroundColor: "grey" });
$('#bulbasaur').animate({ bottom: '-=300px', left: '-=160px' });
$("#bulbasaur").css({ backgroundColor: "#85C1E9" });
var input = this;
input.disabled = true;
fighters.push(bulbasaur.hp)
ids.push($('#bulbnum'));
}
})
$("#squirbut").click(function () {
if (found === false) {
found = true;
charPick = true;
bulbPick = true;
$('#charmander').animate({ right: '-=600px' });
$("#charmander").css({ backgroundColor: "grey" });
$('#bulbasaur').animate({ right: '-=600px' });
$("#bulbasaur").css({ backgroundColor: "grey" });
$('#squirtle').animate({ bottom: '-=300px', left: '-=300px' });
$("#squirtle").css({ backgroundColor: "#85C1E9" });
var input = this;
input.disabled = true;
fighters.push(squirtle.hp)
ids.push($('#squirnum'));
};
});
};
console.log(fighters);
selector();
//select enemy - WORKING
function enemy() {
$("#bulbut").click(function () {
if (bulbPick === true) {
$('#bulbasaur').animate({ right: '-=100px', bottom: '-=100px' });
$("#bulbasaur").css({ backgroundColor: "#F1948A" });
var input = this;
input.disabled = true;
startGame = true;
gameStart();
fighters.push(bulbasaur.hp);
ids.push($('#bulbnum'));
}
});
$("#charbut").click(function () {
if (charPick === true) {
$('#charmander').animate({ right: '-=100px', bottom: '-=100px' });
$("#charmander").css({ backgroundColor: "#F1948A" });
var input = this;
input.disabled = true;
startGame = true;
gameStart();
fighters.push(charmander.hp);
ids.push($('#charnum'));
}
});
$("#squirbut").click(function () {
if (squirPick === true) {
$('#squirtle').animate({ right: '-=100px', bottom: '-=100px' });
$("#squirtle").css({ backgroundColor: "#F1948A" });
var input = this;
input.disabled = true;
startGame = true;
gameStart();
fighters.push(squirtle.hp);
ids.push($('#squirnum'));
}
});
console.log(startGame);
}
enemy();
//start game
function gameStart() {
if (startGame === true) {
//attack button
var button = $('<button/>', {
text: 'Attack!',
click: function () {
var pdamage = Math.floor (Math.random() * 8);
var edamage = Math.floor (Math.random() * 10);
var ptotals = parseInt(fighters[0] - pdamage);
var etotals = parseInt(fighters[1] - edamage);
fighters[0] = ptotals;
ids[0].html = ptotals;
//change player hp visually - WORKING
ids[0].text(ptotals);
//change enemy hp - Working
fighters[1] = etotals;
ids[1].html = etotals;
ids[1].text(etotals);
$('#textbox').text("You dealt " + edamage + " damage! " + "You got attacked for " + pdamage + " damage");
//console.log(ids[0]);
//console.log(ids[1]);
//console.log(fighters[1]);
//console.log(ptotals);
//console.log(pdamage);
if (fighters[1] <= 0 || fighters[1]===0){
winneR();
fighters[1].toString;
fighters[1].html = "faint";
this.disabled=true;
}else if (fighters[0] <= 0){
loseR();
this.disabled=true;
}
}
})
$('#atkButton').append(button);
}
}
//win function
function winneR(){
var msg = "Congratulations! You Won!";
$('#end').append(msg);
}
function loseR(){
var texts = "Your Pokemon fainted!, Healing all Pokemon in 10 seconds!"
$('#end').append(texts);
}
});
我遇到的问题是，选择 2 个字符后出现的攻击按钮在我单击一次后消失了。我希望按钮一直在那里，直到任一字符的 HP = 0。我不确定如何处理这个问题，感谢任何帮助!
附注请原谅我糟糕的代码工作，我只做了几天的 javascript。 p.p.s 你可能想在运行后放大窗口。
最佳答案
你的问题是当你添加 $('#textbox').text("You dealed "+ edamage + "damage! "+ "You got attacked for "+ pdamage + "damage");
因为你的 html 结构是:
<div id = "textbox">
<div id="atbox">
<div id="atkButton" class="active">
</div>
</div>
</div>
这意味着当您使用 .text() 时，它会用文本替换 div 中的内容，因此在您的情况下，它会删除您添加的 div #atkButton按钮。
所以一个简单的解决方案就是简单地更改 html 结构并从 textbox div 中删除按钮，你会没事的。
<div id = "textbox">
</div>
<div id="atbox">
<div id="atkButton" class="active">
</div>
</div>
这是一个工作示例:https://jsfiddle.net/7q35umvb/2/
关于javascript - 查询/JavaScript : Button disappears after being clicked，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50848295/