Question

我正在使用JavaScript创建蛇游戏，现在我可以在吃东西时增加蛇的位置，并显示“分数：0”，但是当分数更新时，将保持零更新分数的顶部。

我在要绘制的分数之上和之下使用了clearRect和cleartext方法。

我已经在自己的函数中创建了drawScore，并使用clearRect（0,0，canvas.width，canvas.height）方法调用了该函数

function drawEverything() {
    const ctx = document.getElementById("gameCanvas").getContext('2d');            

    ctx.fillStyle = "#2a2a2a";
    ctx.fillRect(0, 50, gameCanvas.width, gameCanvas.height);
    ctx.strokeStyle = "white";
    ctx.strokeRect(0, 50, gameCanvas.width, gameCanvas.height);

    //draws snake
    for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = (i == 0) ? "red" : "white";
        ctx.fillRect(snake[i].x, snake[i].y +4.66, pixel, pixel);

        ctx.strokeStyle = (i ==0) ? "white" : "black";
        ctx.strokeRect(snake[i].x, snake[i].y +4.66, pixel, pixel);
    }

    //draws apple
    ctx.fillStyle = 'green';
    ctx.beginPath();
    ctx.arc(apple.x +7.5, apple.y +11, 5, 0, Math.PI * 2, true);
    ctx.fill();

    //old snake head
    let snakeX = snake[0].x;
    let snakeY = snake[0].y;


    //moves snake according to which direction the user initiates
    if (snakeDirection == "LEFT") snakeX -= pixel;
    if (snakeDirection == "UP") snakeY -= pixel;
    if (snakeDirection == "RIGHT") snakeX += pixel;
    if (snakeDirection == "DOWN") snakeY += pixel;

    if (snakeX == apple.x && snakeY == apple.y) {
        score++;
        apple = {
            x: Math.floor(Math.random() * 40) * pixel,
            y: Math.floor(Math.random() * 33 + 3.66) * pixel
        }
    } else {
        //remove the tail
        snake.pop();
    }

    //new head creation
    let newHead = {
        x: snakeX,
        y: snakeY
    }

    //creates the new head
    snake.unshift(newHead);

    //draws score
        ctx.fillStyle = "green";
        ctx.font = "30px arial";
        ctx.fillText(scoreText + score, 3 * pixel, 2.3 * pixel);

}

这里是到代码笔的链接。

https://codepen.io/gjindo/pen/vwEjoy

Answer 1

您已经有了解决方案ctx.clearRect（“在此处输入分数的坐标”）

但是，这很可能只会在画布上留下一个空白方块。要解决此问题，请在使用透明矩形后再次绘制背景和播放器。

这是一种便宜的方法，但始终为我工作。

使用clearRect更新新分数时如何清除分数？

1 个答案: