1

人们。

今天我正在用画布写一个游戏，我遇到了一个问题。我已经做到了，当你点击画布时，玩家会移动到你点击的点。问题是，如果 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));
}

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

4

1 回答 1

5

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

在线演示在这里

（更新为恒速方法）

例子：

当我们单击画布上的某个位置时，我们的“玩家”（在本例中为黑色方块）移动到该点。

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;
    }
}
于 2013-09-27T01:58:17.287 回答