JavaScript 将对象从起始位置移动到结束位置 [英] 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.

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

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.

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

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

通过调整 x 和 y 属性的增量，使聚光灯完美地从您移向 Marvin.如果一切正确，它就会停在目标上方.

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.

• 使用

"+="或"+"

*/

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

推荐答案

x, y, endX, endY 必须是 spotlight 的属性:

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

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

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

这篇关于JavaScript 将对象从起始位置移动到结束位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！