javascript - 如何将方 block 移动到目的地？

Question

如何把方 block 移动到目的地？ Square 只在单击鼠标时移动一个像素？对不起我的英语。

window.onload = function(){
var x = 50;
var y = 50;
var c = document.getElementById("game");
var ctx = c.getContext("2d");   
init();
draw();

function init()
{
    document.addEventListener("click",paint,false);
}

function paint(e)
{
if(x<e.clientX) x++;
}

function draw()
{
    ctx.clearRect(x-1,y,1,15);
    ctx.fillStyle = "blue";
    ctx.fillRect(x,y,15,15);
    window.requestAnimationFrame(draw);
}
}

Answer 1

这是一种方法，改编自 this article我几个月前写的。

下面是让它工作的部分

var tx = targetX - x,
    ty = targetY - y,
    dist = Math.sqrt(tx*tx+ty*ty);

velX = (tx/dist)*thrust;
velY = (ty/dist)*thrust;

我们需要得到当前位置和目标位置(点击区域)之间的差异，然后我们得到距离，并使x和y的速度等于差异除以总距离乘以速度对象。

完整的工作示例和代码

Live demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 500,
    height = 500,
    mX = width/2,
    mY = height/2;

canvas.width = width;
canvas.height = height;

canvas.addEventListener("click", function (e) {
    mX = e.pageX;
    mY = e.pageY;
});


var Ball = function (x, y, radius, color) {
    this.x = x || 0;
    this.y = y || 0;
    this.radius = radius || 10;
    this.speed = 5;
    this.color = color || "rgb(255,0,0)";

    this.velX = 0;
    this.velY = 0;
}

Ball.prototype.update = function (x, y) {
    // get the target x and y
    this.targetX = x;
    this.targetY = y;

    // We need to get the distance this time around
    var tx = this.targetX - this.x,
        ty = this.targetY - this.y,
        dist = Math.sqrt(tx * tx + ty * ty);

    /* 
     * we calculate a velocity for our object this time around
     * divide the target x and y by the distance and multiply it by our speed
     * this gives us a constant movement speed.
     */

    this.velX = (tx / dist) * this.speed;
    this.velY = (ty / dist) * this.speed;

    // Stop once we hit our target. This stops the jittery bouncing of the object. 
    if (dist > this.radius / 2) {
        // add our velocities
        this.x += this.velX;
        this.y += this.velY;
    }
};

Ball.prototype.render = function () {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    // draw our circle with x and y being the center
    ctx.arc(this.x - this.radius / 2, this.y - this.radius / 2, this.radius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
};

var ball1 = new Ball(width / 2, height / 2, 10);

function render() {
    ctx.clearRect(0, 0, width, height);
    ball1.update(mX, mY);
    ball1.render();

    requestAnimationFrame(render);

}

render();