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

Question

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

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

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

通过创建初始化为您的位置的 x 和 y 属性来编辑聚光灯对象。 endX 和 endY 属性也初始化为 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 /////////////
}

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

JavaScript moving an object from starting location to ending location

javascript

processing

p5.js