JavaScript moving an object from starting location to ending location

问题

I'm currently taking a course on intro to computer programming. It's an online course and doesn't have much help when you're stuck.

I'm using Brackets and p5.js and I'm given a template to start off with. I seem to have done everything needed so far, but I'm not able to animate the spotlight to move.

I believe I haven't initialized the spotlight properly but I've tried multiple different ways. If someone could point me in the right direction, I would appreciate it. Code below.

• Edit the spotlight object by creating x and y properties initialised to your location. Also endX and endY properties initialised to Marvin's location

• Make the spotlight move perfectly from you towards Marvin by adjusting the increments of the x and y properties. If you get everything correct then it will stop over the target.

  • Adjust x and y properties using

  • "+=" or "+"

  • "-=" or "-"

*/

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 /////////////
}

回答1:

x, y, endX, endY have to be properties of spotlight:

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

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

Increment spotlight.x and spotlight.y, rather than x and 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 /////////////
}

来源：https://stackoverflow.com/questions/58240244/javascript-moving-an-object-from-starting-location-to-ending-location