JavaScript перемещение объекта из начальной позиции в конечную - PullRequest
Новая
       8

JavaScript перемещение объекта из начальной позиции в конечную

1 голос
/ 04 октября 2019

Я сейчас прохожу курс по введению в компьютерное программирование. Это онлайн-курс, и он мало помогает, когда вы застряли.

Я использую Brackets и p5.js, и мне для начала дан шаблон. Кажется, я уже выполнил все необходимое, но я не смог оживить прожектор.

Я считаю, что не правильно инициализировал прожектор, но пробовал несколько разных способов. Если бы кто-то мог указать мне правильное направление, я был бы признателен. Код ниже.

  • Отредактируйте объект прожектора, создав свойства x и y, инициализированные для вашего местоположения. Кроме того, свойства endX и endY, инициализированные для местоположения Марвина

  • Заставьте прожектор идеально перемещаться от вас к Марвину, регулируя приращения свойств x и y. Если вы все сделаете правильно, он остановится над целью.

    • Настройте свойства 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 /////////////
}

1 Ответ

0 голосов
/ 04 октября 2019

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