Question

我有一个简单的Javascript程序，在画布中显示一个小矩形。矩形移向鼠标位置。当它改变方向时，它会使用尖角。如同，如果矩形在后面留下一条线，当我将鼠标移动到一个圆圈时，矩形将绘制一个倾斜的正方形。

我想要发生的是，它会画一个圆圈。没有尖角。

这是我用来改变方向的代码：

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

绘制功能：

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;

它实际上移动的地方：

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

您不希望xDirection和yDirection仅为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，你需要更准确地定义你的方向最终会进入，并回想起你最后进入的方向，以及你在改变方向的过程中采取了多少“角度步骤”。

你想要改变方向需要多少个这样的角度步数，以及每个步骤应该是相同的大小还是取决于你移动的速度和/或你的转弯的粗暴程度等等，你应该通过反复试验来适应的事情，因为看起来你所追求的是让事情“看起来”正确，所以很难给出一个精确的处方（看起来对你来说是正确的 ; - 。）

如何让物体顺利改变方向？

2 个答案: