Javascript HTML5画布：直接移动到点

人民

今天我在用画布写一个游戏，我遇到了一个问题。我这样做是为了当你点击画布时，W播放器移动到你点击的点。问题是，如果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));
}

---

我知道这个问题令人困惑，所以如果您需要更多信息，请告诉我。

以下是如何实现玩家直接移动到某个点：

以恒速方式更新

例如：

当我们点击画布上的某个地方时，我们的玩家会看到一个黑色方块移动到该点

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

---

以下是如何实现玩家直接移动到某个点：

以恒速方式更新

例如：

当我们点击画布上的某个地方时，我们的玩家会看到一个黑色方块移动到该点

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

---

看看这是否能帮助你：@Ken AbdiasSoftware我不知道如何在我的代码中实现它。我添加了一个修改过的例子作为答案。@PHPglue我知道，我今晚刚刚写了这个，它还没有被清理，看看这是否能帮到你：@Ken AbdiasSoftware我不知道如何在我的代码中实现它。我用一个修改过的例子添加了一个答案。@PHPglue我知道，我今晚刚刚写了这个，它还没有被清理干净，用onmousemove替换xdconclick来获得一点乐趣。有没有一种方法可以在不使用f变量系统的情况下使用它？我希望它保持恒定的速度这是一个好主意的概念，你可能想使用，虽然它不中心的矩形，有时通过所需的点时，调整时间。我仍在根据概念投票。剩下的你应该可以做一些简单的数学运算。@JordanFitz对于恒速，只要用三角法计算点之间的距离，然后将其与步数f.ex一起使用。你希望它移动的像素数，以找到与f一起使用的正确速度变量。@JordanFitz请参阅更新的答案和小提琴，其中显示了如何获得恒定速度。将onclick替换为onmousemove，以获得一点乐趣。有没有一种方法可以在不使用f变量系统的情况下使用它？我希望它保持恒定的速度这是一个好主意的概念，你可能想使用，虽然它不中心的矩形，有时通过所需的点时，调整时间。我仍在根据概念投票。剩下的你应该可以做一些简单的数学运算。@JordanFitz对于恒速，只要用三角法计算点之间的距离，然后将其与步数f.ex一起使用。你希望它移动的像素数，以找到与f一起使用的正确速度变量。@JordanFitz请参阅更新的答案和小提琴，其中显示了如何获得恒定速度。