javascript - Canvas 分数增加然后清除

Question

我想在每次发生碰撞时更新我的​​分数。分数正确地加 1，并成为一帧的 Score: 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);
    }

Answer 1

如果其他人偶然发现同样的错误......

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

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

因此，每次分数更新 c.filltext 时，即使分数正确递增，它也会绘制零。我所需要做的就是用变量填充原始文本。花了很长时间才发现的简单错误。

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