如何将方块移动到目的地

How to move the square to the destination?

本文关键字：目的地 移动 方块      更新时间：2023-09-26

如何将正方形移动到目的地?当点击鼠标时，正方形只移动一个像素?对不起，我的英语不好。

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

这里有一种方法，改编自我几个月前写的一篇文章。

下面是让它工作的部分

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

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

完整的工作示例和代码

现场演示

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();
相关文章：