如何讓對象順利改變方向？

Question

我有一個簡單的Javascript程序，在畫布上顯示一個小矩形。矩形移向鼠標位置。當它改變方向時，它會在尖角處發生。如在矩形後面留下一條線，當我將鼠標移動到一個圓圈中時，該矩形將畫出一個傾斜的正方形。

我想要發生的事情是，它會畫一個圓圈。沒有尖角。

下面是我使用的代碼改變方向：

​​

繪製函數：

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); 
} 

那麼，如何做呢？

更新： 我改變了changeDir（）函數，使它使得傾斜的正方形的邊角變圓。

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 
    } 
    } 

這裏的變量我宣佈：

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; 

凡actualy移動：

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

好吧，這裏是我的新代碼感謝cape1232。我其實完全開始了。我平穩轉彎，但是擋塊移動的速度發生了變化。演示在：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

你不希望你的X方向和Y方向是隻有1或-1。它們需要與鼠標和矩形位置之間的差異成比例。

編輯考慮到意見。

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; 
    } 
} 

Answer 2

而不必xDirection和yDirection的（正弦和你的方向餘弦，實際上）大幅定義爲0，1，或-1，則需要更明確地界定了方向，你應該最終是向前走，並回想起你最後進入的方向以及你在改變方向的過程中做了多少「角度步驟」。

你想要改變方向的步數有多少，以及每一步的大小應該是相同還是取決於你移動的速度和/或你如何粗魯地轉向等等，是你應該通過反覆試驗來適應的，因爲看起來你最主要的是讓事情「看起來」是正確的，所以很難給出一個精確的處方（對你看起來 ;-)。