画布分数递增,然后清除

时间:2018-11-11 15:00:47

标签: javascript canvas html5-canvas

我想在每次发生碰撞时更新分数。分数正确加1并变为分数:1表示一帧,然后又回到0。我无法弄清楚为什么分数被清除并重置为零而不是在每次碰撞时递增。

// text
c.fillStyle = "#ffff00";
c.font = "30px Arial";
c.fillText("Score: 0 ", 10, 50);

var score = 0;
var scorevalue = 0;

// collision detection

if (dy >= 400 && (padxpos + 90 >= dx && padxpos <= 220)){
    t = 0;
    t += 0.1;
    dy = dyi + viy*t - (ay*t*t)/2;
    c.fillStyle = "#ffff00";
    c.font = "30px Arial";
    updateScore();
    }

// update score

function updateScore(){

    c.clearRect(0, 0, canvas.height, canvas.width);
    c.fillStyle = "#ff0000";
    c.fillRect(0, 0, canvas.width, canvas.height);
    c.fillStyle = "#ffff00";
    c.font = "30px Arial";
    scorevalue = ++score;
    c.fillText("Score: " + scorevalue, 10, 50);
    }

1 个答案:

答案 0 :(得分:1)

万一其他人偶然发现相同的错误...

在原始填充文本中,我有这个

c.fillText("Score: 0 ", 10, 50);

因此,每次分数更新c.filltext时,即使分数适当增加,它也会绘制零。我需要做的就是用变量填充原始文本。简单的错误永远被发现。

c.fillText("Score: " + scorevalue, 10, 50);