Question

我已经制作了一个小型模拟游戏的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.我不确定如何处理这个，任何帮助都表示赞赏！

P.S。请原谅我糟糕的代码工作，我只做了几天的javascript。 p.p.s你可能想在运行它后放大窗口。

Answer 1

您的问题是在添加$('#textbox').text("You dealt " + 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/

Jquery / Javascript：点击后按钮消失

1 个答案: