Question

I have a simple Javascript program that displays a small rectangle in a canvas. The rectangle moves towards the mouse position. When it changes direction, it does so with sharp corners. As in, if the rectangle left a line behind, when I move my mouse in a circle, the rectangle would draw a tilted square.

What I’d want to happen, is that it would draw a circle. No sharp corners.

Here’s the code I am using for changing the direction:

function changeDir()
{
if(mouseXCoord-5<x && x<mouseXCoord+5)
{
    xDirection = 0;//stop moving if close to mouse
}
else if(x>mouseXCoord)
{
    xDirection = -1;
}
else if(x<mouseXCoord)
{
    xDirection = 1;
}

if(mouseYCoord-5<y && y<mouseYCoord+5)
{
    yDirection = 0;//stop moving if close to mouse
}
else if(y>mouseYCoord)
{
    yDirection = -1;
}
else if(y<mouseYCoord)
{
    yDirection = 1;
}
}

The draw function:

function draw()
{
    context2D.clearRect(0, 0, canvas.width, canvas.height);
    fillwith = context2D.fillStyle='red';
    context2D.fillRect(x,y,10,10);
    changeDir();
    x = x + (thrust * xDirection);
    y = y + (thrust * yDirection);
    console.log(x,y,xDirection, yDirection,mouseXCoord,mouseYCoord);
}

So, how do I do that?

Update:
I changed the changeDir() function so that it makes the corners of the tilted square rounded.

function changeDir()
{
    if(mouseXCoord-5<x && x<mouseXCoord+5)
    {
        xstop = true;//stop moving if close to mouse
    }
    else if(x>mouseXCoord)
    {
        if(Math.abs(xthrust)==mainThrust)
        {
            xthrust = -1*mainThrust;
        }
        else
        {
            xthrust--;
        }
        xstop = false;//make sure it moves
    }
    else if(x<mouseXCoord)
    {
        if(xthrust==mainThrust)
        {
            xthrust = mainThrust;
        }
        else
        {
            xthrust++;
        }
        xstop = false;//make sure it moves
    }

    if(mouseYCoord-5<y && y<mouseYCoord+5)
    {
        ystop = true;//stop moving if close to mouse
    }
    else if(y>mouseYCoord)
    {
        if(Math.abs(ythrust)==mainThrust)
        {
            ythrust = -1*mainThrust;
        }
        else
        {
            ythrust--;
        }
        ystop = false;//make sure it moves
    }
    else if(y<mouseYCoord)
    {
        if(ythrust==mainThrust)
        {
            ythrust = mainThrust;
        }
        else
        {
            ythrust++;
        }
        ystop = false;//make sure it moves
    }
    }

Here’s the variables I declare:

const FPS = 5;
var x = 300;
var y = 200;
var xDirection = 1;
var yDirection = 1;
var image = new Image();
var canvas = null;
var context2D = null;
var mouseXCoord = 0;
var mouseYCoord = 0;
var mainThrust = 5;
var xthrust = mainThrust;
var ythrust = mainThrust;
var xstop = false;
var ystop = false;

Where it actualy moves:

changeDir();
if(!xstop)
 x = x + (xthrust);
if(!ystop)
 y = y + (ythrust);

Ok, here’s my new code thanks to cape1232. I actually started over entirely. I get smooth turning, but the speed the block moves at changes. Demo at: http://develzone.davidreagan.net/jsMoveTesting/index.html

var gameVars = {
    fps: 30
}

var object = {
    name: 'default',
    xpos: 200,
    ypos: 200,
    xVect: 1,
    yVect: 1,
    thrust: 15
}
ctx = null;
canvas = null;
xMousePos = 0;
yMousePos = 0;
runGame = null;


function init()
{
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    $('#canvas').mousemove(getMousePos);
    $('#canvas').click(stop);

    //setTimeout('clearInterval(runGame);',30000);
}
function start()
{
    runGame = setInterval('run();',1000/gameVars.fps);
}
function run()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    moveBlock();
    //ctx.translate(object.xpos,object.ypos);
    drawBlock();
    showMousePos = 'X: ' + xMousePos + ' Y: ' + yMousePos;
    ctx.fillText(showMousePos, 215,50);
}
function stop()
{
    //alert('hit stop');
    console.log('clicked');
    //if(e.keyCode == 113)
    if(runGame)
    {
        clearInterval(runGame);
        runGame = false;
        //console.log('stop true');
    }
    else
        start();
}
function drawBlock()
{
    ctx.fillRect(object.xpos,object.ypos,10,10);
}

function moveBlock()
{

    xDiff = xMousePos - object.xpos;
    yDiff = yMousePos - object.ypos;
    minDiff = Math.max(Math.min(xDiff, yDiff), 1);
    deltaX = xDiff / minDiff;
    deltaY = yDiff / minDiff;
    // Scale the deltas to limit the largest to mainThrust
    maxDelta = Math.max(Math.max(deltaX, deltaY), 1)
    if (maxDelta>object.thrust)
    {
        deltaX = deltaX * object.thrust / maxDelta;
        deltaY = deltaY * object.thrust / maxDelta;
    }


    if(object.xpos >= canvas.width)
    {
        object.xpos = 0;        
    }
    else
    {
        object.xpos += deltaX;
        //console.log('moveBlock xpos else: '+object.xpos);
    }
    if(object.ypos >= canvas.height)
    {
        object.ypos = 0;
    }
    else
    {
        object.ypos += deltaY;
        //console.log('moveBlock ypos else: '+object.ypos);
    }
    console.log('xpos: '+object.xpos);
    console.log('ypos: '+object.ypos);
    console.log('xMousePos: '+xMousePos);
    console.log('yMousePos: '+yMousePos);
    console.log('xDiff: '+xDiff);
    console.log('yDiff: '+yDiff);
    console.log('minDiff: '+minDiff);
    console.log('deltaX: '+xDiff+'/'+minDiff+ ' = '+ deltaX);
    console.log('deltaY: '+yDiff+'/'+minDiff+ ' = '+ deltaY);
    console.log('maxDelta: '+maxDelta);
}

function getMousePos(e)
{
    xMousePos = e.pageX;
    yMousePos = e.pageY;
    //console.log('Mouse Moved');
}
window.onload = init;

Answer 1

You don’t want your xDirection and yDirection to be only 1 or -1. They need to be proportional to the difference between the mouse and the rectangle position.

Edited to take comments into account.

function changeDir()
{
  xDiff = mouseXCoord - x;
  yDiff = mouseYCoord - y;
  // Scale the smallest diff to be 1 (or less)
  minDiff = max(min(xDiff, yDiff), 1);
  deltaX = xDiff / minDiff;
  deltaY = yDiff / minDiff;
  // Scale the deltas to limit the largest to mainThrust
  maxDelta = max(max(deltaX, deltaY), 1)
  if (maxDelta>mainThrust) 
  {
    deltaX = deltaX * mainThrust / maxDelta;
    deltaY = deltaY * mainThrust / maxDelta;
  }

  if(mouseXCoord-5<x && x<mouseXCoord+5)
  {
    xDirection = 0;//stop moving if close to mouse
  }
  else 
  {
    xDirection = deltaX;
  }

  if(mouseYCoord-5<y && y<mouseYCoord+5)
  {
    yDirection = 0;//stop moving if close to mouse
  }
  else 
  {
    yDirection = deltaY;
  }
}