JavaScript 将对象从起始位置移动到结束位置

Question

我目前正在学习计算机编程入门课程。这是一门在线课程，当您遇到困难时没有太多帮助。

我正在使用 Brackets 和 p5.js，并且我得到了一个模板来开始。到目前为止，我似乎已经完成了所需的一切，但我无法为聚光灯设置动画。

我相信我没有正确初始化聚光灯，但我尝试了多种不同的方法。如果有人能指出我正确的方向，我将不胜感激。代码如下。

• 通过创建初始化到您所在位置的 x 和 y 属性来编辑聚光灯对象。还将 endX 和 endY 属性初始化为 Marvin 的位置

• 通过调整 x 和 y 属性的增量，使聚光灯完美地从您向 Marvin 移动。 如果一切都正确，那么它将停在目标上方。

  • 使用

  调整 x 和 y 属性

  • "+=" 或 "+"

  • “-=”或“-”

*/

var x;
var y;

var startX = 360;
var endX = 575;

var startY = 760;
var endY = 570;


// other variables, you don't need to change these
var img, spotlight_image;

var spotlight;


function preload()
{
    img = loadImage('scene.png');


    spotlight_image = loadImage('spotlight.png')

}

function setup()
{
    createCanvas(img.width, img.height);

    //Initialise the spotlight object
  //with properties x, y, endX and endY
    x = 360;
    y = 760;
    endX =575;
    endY = 570;



  spotlight = {
            image: spotlight_image

        }

}

function draw()
{
    image(img, 0, 0);

    // alter the object properties x and y below to animate the spotlight

    x += 1;
    y +=1;


    ////////// DO NOT CHANGE ANYTHING BELOW /////////////

    //stop the spotlight if it goes off of the screen
    spotlight.x = min(spotlight.x, 960);
    spotlight.y = min(spotlight.y, 945);
    spotlight.x = max(spotlight.x, 0);
    spotlight.y = max(spotlight.y, 0);

    if (abs(spotlight.endX - spotlight.x) < 50
        && abs(spotlight.endY - spotlight.y) < 50)
    {
        spotlight.x = spotlight.endX;
        spotlight.y = spotlight.endY;
    }

    var spotlightSize = 180;

    blendMode(BLEND);
    background(10);
    image(spotlight.image, spotlight.x-spotlightSize/2,
            spotlight.y-spotlightSize/2, spotlightSize, spotlightSize);
    blendMode(DARKEST);
    image(img, 0, 0);

    ////////// DO NOT CHANGE ANYTHING ABOVE /////////////
}

Answer 1

x、y、endX、endY 必须是 spotlight 的属性：

function setup()
{
    createCanvas(1000, 1000);

    spotlight = {
            image: spotlight_image,
            x: 360,
            y: 760,
            endX: 575,
            endY: 570,
        }
}

增加spotlight.x和spotlight.y，而不是x和y：

function draw()
{
    image(img, 0, 0);

    // alter the object properties x and y below to animate the spotlight

    spotlight.x += 1; // <-----
    spotlight.y += 1; // <-----

    ////////// DO NOT CHANGE ANYTHING BELOW /////////////

    //stop the spotlight if it goes off of the screen
    spotlight.x = min(spotlight.x, 960);
    spotlight.y = min(spotlight.y, 945);
    spotlight.x = max(spotlight.x, 0);
    spotlight.y = max(spotlight.y, 0);

    if (abs(spotlight.endX - spotlight.x) < 50
        && abs(spotlight.endY - spotlight.y) < 50)
    {
        spotlight.x = spotlight.endX;
        spotlight.y = spotlight.endY;
    }

    var spotlightSize = 180;

    blendMode(BLEND);
    background(10);
    image(spotlight.image, spotlight.x-spotlightSize/2,
            spotlight.y-spotlightSize/2, spotlightSize, spotlightSize);
    blendMode(DARKEST);
    image(img, 0, 0);

    ////////// DO NOT CHANGE ANYTHING ABOVE /////////////
}