Question

我正试图在一个基本的蛙式Javascript游戏中实现一个减少生命系统。我有一个计数器系统工作，其中生命以数字显示，当玩家角色击中敌人时从3倒数到0。

现在，我正在尝试用显示的unicode heart替换数字倒计时。理想情况下，在游戏发布时会有三颗心，每次碰撞都会使显示的心脏减少1.

使用我的代码，如果我将生命显示为数组，则会有效，但它会显示分隔心脏的逗号。如果我尝试将其显示为字符串，则逗号消失但心脏不再减少。我觉得我很近，但我很难过。

谢谢！

var playerLives = ['&#128154;', '&#128154;', '&#128154;'];
var hearts = playerLives.join(' ');
//turn playerLives array into hearts string

var playerScore = 0;
var scoreEl = document.getElementById('score');

function checkCollisions() {
    for (var i = 0; i < allEnemies.length; i++) {
        if (player.x <= allEnemies[i].x + 70
            && player.x + 70 >= allEnemies[i].x
            && player.y <= allEnemies[i].y + 50
            && player.y + 50 >= allEnemies[i].y)
        {
                player.x = 200;
                player.y = 415;
                hearts.slice(-10);
                //attempt to remove string from hearts, but doesn't
                //work
                playerLives.splice(-1, 1);
                //decrease playerLives array by 1 on collision
                if (playerScore >= 50) {
                    playerScore -= 50;
                    scoreEl.textContent = 'Score: ' + playerScore;
                }
                //reset(); //create reset function
        }
    }
}

function score() {
    if (player.y < 60) {
        player.x = 200;
        player.y = 415;
        playerScore += 100;
        scoreEl.textContent = 'Score: ' + playerScore;
        level++;
        levelEl.textContent = 'Level: ' + level;
    }
}

function playerLife() {
    for (var i = 1; i <= 3; i++) {
        var lifeEl = document.getElementById('life');
        lifeEl.innerHTML = 'Lives: ' + hearts; // lives appear as 
        //string and do not decrease on collision
        //if use "'Lives: ' + playerLives" hearts do decrease 
        //but appear as an array with commas separating
    }
}

Answer 1

要将数组转换为不带分隔符的字符串，请使用带有空字符串的.join()：

playerLives.join("");

如何在Javascript和canvas中实现递减生命系统

1 个答案: