Яндекс практикум JavaScript. Как исправить баг с движение логотипа?

Question

[fillpower]

Добрый день.

Нужно реализовать движущийся логотип Яндекс.Практикума стрелками.
Я уже реализовал все необходимое для состояния.
Мое решение - разрезать логотип на квадраты размером 25 пикселей. Когда вы нажимаете одну из кнопок со стрелками, квадраты попадают в путь 25 пикселей в соответствующем направлении. Или, если некоторые квадраты получают координаты, выходящие за границы, соответствующие нажатой кнопке со стрелкой, эти квадраты имеют координаты, равные «противоположная сторона минус 25 пикселей» (их координаты вычисляются в верхней левой точке). Во время тестирования у меня возникает ошибка, когда логотип выходит за одну из границ. Логотип не соответствует размеру или содержанию. Что может вызвать это? Я полагаю, это потому, что некоторые параметры из приведенных выше условий не кратны 25. Но я понятия не имею, как учесть это в моем коде.

Ниже все, что реализовал.
https://jsfiddle.net/3bz1rft8/5/

Условия для логотипа:

• размер канваса — 400x400px;
  
• толщина линий — 16px;
  
• длина вертикальной линии — 150px;
  
• длина горизонтальной линии — 100px;
  
• цвет фона — чёрный;
  
• цвет линии — белый;
  
• расстояние по оси X от вертикальной до горизонтальной линии (ближайшие друг к другу границы) — 22px;
  
• расстояние по оси Y от вертикальной до горизонтальной линии — 22px;
  
• логотип должен располагаться по центру.
  

Условия для анимации:

• логотип передвигается по нажатию стрелок на клавиатуре: вверх, вниз, вправо, влево;
  
• каждое передвижение смещает логотип целиком на 25px;
  
• передвижение логотипа должно быть цикличным — если логотип выходит за пределы канваса, то исчезнувшая часть должна появиться с противоположной стороны.
  

Answer 1

[WbICHA]

Я немного переписал код и проблема решилась:

spoiler

const updateSquares = (axis, step, max) => {
	clearRect();
  
  const minAxis = `min${axis.toUpperCase()}`;
  const maxValue = max - 12;
  
  squares.forEach((square) => {
  	square[minAxis] = (maxValue + square[minAxis] + step) % maxValue;
  });

  updateRect(squares);
}

function moveRect(event) {
    switch (event.keyCode) {
        // left
        case 37:
            updateSquares('x', -25, WIDTH);
            break
        // up
        case 38:
            updateSquares('y', -25, HEIGHT);
            break
        // right
        case 39:
            updateSquares('x', 25, WIDTH);
            break
        // down
        case 40:
            updateSquares('y', 25, HEIGHT);
            break
        default:
            break
    }
}

Если кратко, то проблема, скорее всего, была банально в вещественных числах, поскольку жс не использует целые. В итоге накапливалась ошибка при подсчётах и вылазили артефакты.
То есть в твоём коде надо было бы округлять каждый раз значение, а в том, что сделал я, в этом нет необходимости, т.к. остаток от деления целое число.

Comments

[fillpower]

Спасибо, вроде то, что нужно.
Странно еще то, что платформа яндекса не принимает этот ответ, хотя все работает)
Такая ошибка: После прохождения верхней границы фигура не смогла вернуться на прежнее место.

[WbICHA]

fillpower, это не странно, при таком условии поменяйте max - 12 на max - 25.
Мне лень проверять, но, я думаю, это решит проблему.

[fillpower]

WbICHA, теперь идеально, пиксель в пиксель! Платформа так и не хочет принимать, буду разбираться в поддержке, а тебе огромное спасибо.

[WbICHA]

fillpower, хм, ну тогда я могу ещё предложить оставить max как есть, ничего не отнимая. Хоть это и не совсем правильно, но может принять.

[fillpower]

WbICHA, Платформа приняла)