Как очистить счет при обновлении нового счета с помощью clearRect? - PullRequest
Новая
       22

Как очистить счет при обновлении нового счета с помощью clearRect?

0 голосов
/ 07 мая 2019

Я создаю игру со змеями, используя 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

1 Ответ

0 голосов
/ 14 мая 2019

У вас уже есть решение ctx.clearRect («поместите здесь координаты счета»)

Однако, это, скорее всего, просто оставит пустой квадрат цвета вашего холста.Чтобы это исправить, просто нарисуйте фон и игрока снова после использования четкого прямоугольника.

Это немного дешевый способ сделать это, но всегда работал для меня.

...