Как работает цикл for и fillRect() в данном примере?

Question

[SpaceOrNot]

Я недавно начал изучать JavaScript и уже понимаю как работает этот код змейки.
Но меня запутал процесс с рисованием квадратов (тела змейки). Почему достаточно лишь переписать координаты для fillRect(), что-бы после змейки не оставалось вот таких следов как на картинке?

Чем этот код, который не стирает предыдущие квадраты

let d = [];

d[0] = {l: 1, c: 3}

function ip () {
    for(i = 0; i < 1; i++){
        c.fillStyle = "green";
        c.fillRect(d[0].l, d[0].c, 33, 33)
    }
    d.pop()
    d.unshift({l: 10, c: 44})
}
setInterval(ip, 100)

Отличается от этого?

let box = 32;

let snake = [];
snake[0] = {
    x: 9 * box,
    y: 10 * box
};

document.addEventListener("keydown", direction);

let dir;

function direction(event){
    if(event.keyCode == 37 && dir != "right")
        dir = "left";
    else if(event.keyCode == 38 && dir != "down")
        dir = "up";
    else if(event.keyCode == 39 && dir != "left")
        dir = "right";
    else if(event.keyCode == 40 && dir != "up")
        dir = "down";
}



 function drawGame() {

    for(let i = 0; i < snake.length; i++){
        ctx.fillStyle = "green";
        ctx.fillRect(snake[i].x, snake[i].y, box, box)
    }

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

    snake.pop();

    if(dir == "left") snakeX -= box;
    if(dir == "right") snakeX += box;
    if(dir == "up") snakeY -= box;
    if(dir == "down") snakeY += box;

    let newHead = {
        x: snakeX,
        y: snakeY
    };

    snake.unshift(newHead);
}

let game = setInterval(drawGame, 100)

Comments

[WbICHA]

for(i = 0; i < 1; i++){

Какой вообще смысл в существовании этого фора?

[SpaceOrNot]

WbICHA, никакого смысла. Это просто пример, в котором предыдущий рисунок fillRect() не стирается. Видимо неудачный пример, но я не смог подобрать получше.

Answer 1

[rPman]

для затирания хвоста змейки нужно хранить его тело, в виде массива (размер которого - длина змейки) координат. Этот массив - это fifo буфер, т.е. тебе нужно хранить указатели на начало и конец, делая шаг змейки, ты добавляешь новую запись в массив, стираешь квадрат по координатам самой старой записи и удаляешь эту запись, сдвигая оба указателя.

Comments

[SpaceOrNot]

Спасибо большое.