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

HTML5 Canvas：直接移动到点

1 个答案: