constraining movements to a grid

Question

This is all of the code, you would have to access Khan academy's ProcessingJS library to get the rest of it. My issue is that when you start a movement (using rmb), and then while the ellipse is moving start another movement, the ellipse can disconnect from the grid and it looks odd. I'm wondering how I can make it so that this does not happen, while still keeping the ability to overwrite a movement with another. Perhaps by making it move back to the center of its grid square before starting a new movement? but I have no idea HOW to make that happen. if you were to start a new movement while the ellipse was not in the center of its current square it would continue moving, not at the center of any square until it reaches its location. I am looking to fix this.

// var setup
// p is current player location
var pX = 210;
var pY = 210;
// m is movement target
var mX = 210;
var mY = 210;
// t is starting position
var tX = pX;
var tY = pY;
// s is p rounded to grid
var sX = 0;
var sY = 0;

// rounding numbers (used for grid)
function roundNum(number, increment, offset) {
    return Math.ceil((number - offset) / increment ) * increment + offset;
}

// mouse click
mouseClicked = function() {
    if(mouseButton===39 || mouseButton === 'left'){
        mX = roundNum(mouseX-10,20,10);
        mY = roundNum(mouseY-10,20,10);
        tX = sX;
        tY = sY;
    }
};

draw = function() {
    
    // draw setup
    background(255, 255, 255);
    sX = roundNum(pX,20,10);
    sY = roundNum(pY,20,10);
    
    
    // grid (perhaps find a way to simplify)
    stroke(0, 0, 0);
    fill(255, 255, 255);
       // vertical lines
       line(380,400,380,0);
       line(360,400,360,0);
       line(340,400,340,0);
       line(320,400,320,0);
       line(300,400,300,0);
       line(280,400,280,0);
       line(260,400,260,0);
       line(240,400,240,0);
       line(220,400,220,0);
       line(200,400,200,0);
       line(180,400,180,0);
       line(160,400,160,0);
       line(140,400,140,0);
       line(120,400,120,0);
       line(100,400,100,0);
       line(80,400,80,0);
       line(60,400,60,0);
       line(40,400,40,0);
       line(20,400,20,0);
       // horizontal lines
       line(0,20,400,20);
       line(0,40,400,40);
       line(0,60,400,60);
       line(0,80,400,80);
       line(0,100,400,100);
       line(0,120,400,120);
       line(0,140,400,140);
       line(0,160,400,160);
       line(0,180,400,180);
       line(0,200,400,200);
       line(0,220,400,220);
       line(0,240,400,240);
       line(0,260,400,260);
       line(0,280,400,280);
       line(0,300,400,300);
       line(0,320,400,320);
       line(0,340,400,340);
       line(0,360,400,360);
       line(0,380,400,380);
    
    // movement, hopefully.
    noStroke();
    fill(18, 235, 33);
    if(pX!==mX){
        ellipse(mX,mY,10,10);
    }
    if(pY!==mY){
        ellipse(mX,mY,10,10);
    }
    
    else{
        if (mX >= pX) {
            pX+=1;
            if(pY!==sY){
                if(pY<sY){
                    pY+=1;
                }
                if(pY>sY){
                    pY-=1;
                }
            }
        }
    
        if (mX < pX) {
            pX-=1;
            if(pY!==sY){
                if(pY<sY){
                    pY+=1;
                }
                if(pY>sY){
                    pY-=1;
                }
            }
        }
    
        if (mY >= pY) {
            pY+=1;
            if(pX!==sX){
                if(pX<sX){
                    pX+=1;
                }
                if(pX>sX){
                    pX-=1;
                }
            }
        }
    
        if (mY < pY) {
            pY-=1;
            if(pX!==sX){
                if(pX<sX){
                    pX+=1;
                }
                if(pX>sX){
                    pX-=1;
                }
            }
        }
    }

    // player(?)
    noStroke();
    fill(0, 0, 0);
    ellipse(pX,pY,10,10);
    
    // borders
    if (pX > 390) {
        pX=390;
    }
    if (pX < 10) {
        pX=10;
    }
    if (pY > 390) {
        pY=390;
    }
    if (pY < 10) {
        pY=10;
    }
    
    // debugging
    noStroke();
    fill(235, 235, 235);
    quad(0,0,75,0,75,140,0,140);
    fill(0, 0, 0);
    stroke(255, 0, 0);
    line(tX,tY,mX,mY);
    text("pX = "+pX,10,10);
    text("pY = "+pY,10,25);
    text("test = "+null,10,40);
    text("mX = "+mX,10,55);
    text("mY = "+mY,10,70);
    text("tX = "+tX,10,85);
    text("tY = "+tY,10,100);
    text("sX = "+sX,10,115);
    text("sY = "+sY,10,130);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>