HTML5帆布：直接移动到点

Question

人。

今天我正在用帆布写一个游戏，我遇到了问题。我已经做到了，当你点击画布时，玩家会移动到你点击的位置。问题是，如果x大于y，玩家将正确移动，直到达到y值的末尾，然后转向x点。我需要它直接直接到我点击的地步。这里是我的代码：

var canvas, ctx, fps; 
canvas = $("#canvas")[0]; 
ctx = canvas.getContext("2d"); 
fps = 30; 

window.onload = function(){init()} 

function init(){ 
    setInterval(function(){ 
     draw(); 
    }, 1000/fps); 
} 

var backgroundTile = new Image(); 
backgroundTile.src = "img/background.png"; 
var lighting = new Image(); 
lighting.src = "img/lighting.png" 
var sprite = new Image(); 
sprite.src = "img/sprite.png"; 
var spritePos = { 
    posX: 288, 
    posY: 208 
} 
var goX, goY; 
goX = spritePos.posX; 
goY = spritePos.posY; 

function update(){ 

    if (distance(spritePos.posX, spritePos.posY, goX, goY) <= 5){ 
     spritePos.posX = goX; 
    } 

    if (distance(spritePos.posX, spritePos.posY, goX, goY) <= 5){ 
     spritePos.posY = goY; 
    } 

    if(spritePos.posX > goX){ 
     if(spritePos.posX - goX > 5){ 
      spritePos.posX -= 5; 
     } else { 
      spritePos.posX = goX; 
     } 
    } else if(spritePos.posX < goX){ 
     if(goX - spritePos.posX > 5){ 
      spritePos.posX += 5; 
     } else { 
      spritePos.posX = goX; 
     } 
    } 
    if(spritePos.posY > goY){ 
     if(spritePos.posY - goY > 5){ 
      spritePos.posY -= 5;  
     } else { 
      spritePos.posY = goY; 
     } 
    } else if(spritePos.posY < goY){ 
     if(goY - spritePos.posY > 5){ 
      spritePos.posY += 5; 
     } else { 
      spritePos.posY = goY; 
     } 
    } 
} 

function drawSprite(){ 
    ctx.drawImage(sprite, spritePos.posX, spritePos.posY); 
} 

function drawLighting(){ 
    ctx.drawImage(lighting, (spritePos.posX - spritePos.posX) - 7, (spritePos.posY - spritePos.posY) - 7); 
} 

function drawBackground(){ 
    ctx.drawImage(backgroundTile, 0, 0); 
} 

$("#canvas").click(function(e){ 
    var x = e.pageX; 
    var y = e.pageY; 
    goX = x - 32; 
    goY = y - 32; 
}); 

function draw(){ 
    clean(); 
    drawBackground(); 
    update(); 
    drawSprite(); 
    drawLighting(); 
} 

function clean(){ 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
} 

function distance(pnt1X, pnt1Y, pnt2X, pnt2Y){ 
    var xs = 0; 
    var ys = 0; 
    xs = pnt2X - pnt1X; 
    xs = xs * xs; 
    ys = pnt2Y - pnt1Y; 
    ys = ys * ys; 
    return Math.ceil(Math.sqrt(xs + ys)); 
} 

我知道这个问题很混乱，所以如果你需要更多的信息让我知道。

Answer 1

这里是你如何实现一个播放器直接移动到一个点：

ONLINE DEMO HERE

（更新以恒定速度的方法）

例子：

当我们点击画布上的某个地方我们的“玩家”（在这种情况下，一个黑色的正方形）将移动到该点。

var ctx = demo.getContext('2d'), 
    x, y, x1, y1, x2 = 0, y2 = 0, /// positions 
    f = 0,      /// "progress" 
    speed,      /// speed based on dist/steps 
    dist,       /// distance between points 
    steps = 3;     /// steps (constant speed) 

demo.onclick = function(e) { 

    /// if we are moving, return 
    if (f !== 0) return; 

    /// set start point 
    x1 = x2; 
    y1 = y2; 

    /// get and adjust mouse position  
    var rect = demo.getBoundingClientRect(); 
    x2 = e.clientX - rect.left, 
    y2 = e.clientY - rect.top; 

    /// calc distance 
    var dx = x2 - x1, 
     dy = y2 - y1; 

    dist = Math.abs(Math.sqrt(dx * dx + dy * dy)); 

    /// speed will be number of steps/distance 
    speed = steps/dist; 

    /// move player 
    loop(); 
} 

然后在循环中，玩家将从上次停止的位置移动到我们点击的位置。

function loop() { 

    /// clear current drawn player 
    ctx.clearRect(x - 6, y - 6, 12, 12); 

    /// move a step 
    f += speed; 

    /// calc current x/y position 
    x = x1 + (x2 - x1) * f; 
    y = y1 + (y2 - y1) * f;  

    /// at goal? if not, loop 
    if (f < 1) { 
     /// draw the "player" 
     ctx.fillRect(x - 4, y - 4, 8, 8); 

     requestAnimationFrame(loop); 
    } else { 
     /// draw the "player" 
     ctx.fillRect(x2 - 4, y2 - 4, 8, 8); 

     /// reset f so we can click again 
     f = 0; 
    } 
}