Ограничение движений сеткой ⇐ Javascript

[Гость]

Это весь код. Чтобы получить остальную часть, вам потребуется доступ к библиотеке ProcessingJS Академии Хана. https://www.khanacademy.org/computer-pr ... 7939759104 вот ссылка на саму программу, если интересно. Моя проблема в том, что когда вы начинаете движение (используя ПКМ), а затем, пока эллипс движется, начинаете другое движение, эллипс может отключиться от сетки, и это выглядит странно. Мне интересно, как мне сделать так, чтобы этого не происходило, сохранив при этом возможность перезаписать одно движение другим. Возможно, заставив его вернуться в центр квадрата сетки, прежде чем начать новое движение? но я понятия не имею, КАК это сделать. если бы вы начали новое движение, пока эллипс не находился в центре своего текущего квадрата, он продолжал бы двигаться, а не в центре любого квадрата, пока не достигнет своего местоположения. Я хочу это исправить.

// Настройка переменной вар пХ = 210; вар pY = 210; вар мХ = 210; вар mY = 210; функция roundNum(число, приращение, смещение) { return Math.ceil((число - смещение) / приращение) * приращение + смещение; } настройка = функция() { createCanvas(420, 420); } // щелчок мышью mouseClicked = функция() { если (mouseButton === 39) { mX = roundNum(mouseX, 20, 10); mY = roundNum(mouseY, 20, 10); } }; рисовать = функция() { // настройка рисования фон(255, 255, 255); // сетка (возможно, найдем способ упростить) ход(0, 0, 0); заполнить(255, 255, 255); // вертикальные линии строка (380, 400, 380, 0); строка (360, 400, 360, 0); строка (340, 400, 340, 0); строка (320, 400, 320, 0); строка (300, 400, 300, 0); строка (280, 400, 280, 0); строка (260, 400, 260, 0); строка (240, 400, 240, 0); строка (220, 400, 220, 0); строка (200, 400, 200, 0); строка (180, 400, 180, 0); строка (160, 400, 160, 0); строка (140, 400, 140, 0); строка (120, 400, 120, 0); строка (100, 400, 100, 0); строка (80, 400, 80, 0); строка (60, 400, 60, 0); строка (40, 400, 40, 0); строка (20, 400, 20, 0); // горизонтальные линии линия (0, 20, 400, 20); строка (0, 40, 400, 40); линия (0, 60, 400, 60); линия (0, 80, 400, 80); строка (0, 100, 400, 100); строка (0, 120, 400, 120); строка (0, 140, 400, 140); линия (0, 160, 400, 160); линия (0, 180, 400, 180); строка (0, 200, 400, 200); строка (0, 220, 400, 220); строка (0, 240, 400, 240); линия (0, 260, 400, 260); линия (0, 280, 400, 280); линия(0, 300, 400, 300); строка (0, 320, 400, 320); линия (0, 340, 400, 340); линия (0, 360, 400, 360); линия (0, 380, 400, 380); // движение, надеюсь. нетИнсульта(); заполнить(18, 235, 33); если (pX !== mX) { эллипс(mX, mY, 10, 10); } если (pY !== mY) { эллипс(mX, mY, 10, 10); } if (pX !== mX && pY !== mY) { if (mX >= roundNum(pX, 20, 10)) { рХ += 2; } если (mX < roundNum(pX, 20, 10)) { рХ -= 2; } } еще { if (mX >= roundNum(pX, 20, 10)) { рХ += 2; } если (mX < roundNum(pX, 20, 10)) { рХ -= 2; } if (mY >= roundNum(pY, 20, 10)) { рY += 2; } если (mY < ​​roundNum(pY, 20, 10)) { рY -= 2; } } // игрок(?) заполнить (0, 0, 0); эллипс(pX, pY, 10, 10); // границы если (рХ > 390) { рХ = 390; } если (pX < 10) { рХ = 10; } если (pY > 390) { рY = 390; } если (pY < 10) { рY = 10; } // отладка нетИнсульта(); заполнить(235, 235, 235); четырехъядерный (0, 0, 75, 0, 75, 80, 0, 80); заполнить (0, 0, 0); ход(255, 0, 0); линия(pX, pY, mX, mY); текст("pX = " + pX, 10, 10); text("pY = " + pY, 10, 25); текст("тест = " + ноль, 10, 40); текст("mX = " + mX, 10, 55); text("мГ = " + мГ, 10, 70); };