在HTML Canvas游戏中替换/更新分数

时间:2015-04-20 22:09:24

标签: javascript jquery html5-canvas

我希望得分随着连续获胜/失败而增加。

我知道.append()仅用于将对象附加到页面。但我无法弄清楚如何用新分数替换内容,而不是连续追加新的字符串。

我已尝试.replace() .replaceWith() .replaceAll();将新分数设置为另一个变量并编写条件语句。我觉得我正在寻找一些非常明显的东西,但无法弄明白。谁能指出我正确的方向?

任何输入都表示赞赏。谢谢!

var Player = function() {

    this.xRange = [-2, 402];
    this.yRange = [-20, 380];
    this.sprite = 'images/char-boy.png';
    this.wins = 0;
    this.fails = 0;
    this.reset();
};


Player.prototype.update = function() {

    if (this.y <= 20) {
        // player is on water, reset
        this.wins++;
        $("#wins").append("Wins: " + this.wins);
        this.reset();
    } else if (this.y <= 220 & this.x >= 0) {
        var charBoy = this;
        // player is on road rows, check collisions
        // loop through each bug
        allEnemies.forEach(function(enemy) {
            // is the bug on the same row as the player?
            if (enemy.y == charBoy.y) {
                // is the bug on the player?
                if (enemy.x >= charBoy.x - 30 && enemy.x <= charBoy.x + 30) {
                    charBoy.fails++;
                    $("#fails").append("Fails: " + charBoy.fails);
                    charBoy.reset();
                }
            }
        });
    }
};

1 个答案:

答案 0 :(得分:0)

如果您仅使用文字替换元素的内容,则可以使用.text

$("#fails").text("Fails: " + charBoy.fails);

如果您想用html替换内容,可以使用.html

$("#fails").html("Fails: " + charBoy.fails);