Как сделать несколько кликабельных экземпляров Mov ie Clip - PullRequest
Новая
       72

Как сделать несколько кликабельных экземпляров Mov ie Clip

0 голосов
/ 06 апреля 2020

Я работаю над простым проектом, используя Create JS, чтобы сделать простую HTML5 игру. Я пытаюсь сделать каждый Mov ie Clip кликабельной кнопкой (я не хочу делать это символом кнопки, поскольку я не хочу анимировать кнопку).

Как правило, когда пользователь нажимает клип Mov ie, клип Mov ie должен перейти к следующему кадру. Я смог успешно сделать это, как показано в следующем коде: 

class Game 
{
    constructor(exportRoot, stage)
    {
        this.root = exportRoot;
        this.stage = stage;
        this.init();
    }

    init()
    {
        const game = this;

        // "place1" is referring to the instance name of the Movie Clip          

        this.root["place1"].on('click', function () 
        {
            game.root["place1"].gotoAndStop(1); 
        });   
    }
}

Вот имя экземпляра в Adobe Animate CC

код делает то, что вы ожидаете. Прежде чем щелкнуть экземпляр Mov ie Clip, он показывает квадрат (который рисуется в первом кадре клипа Mov ie), а затем, когда я нажимаю на квадрат, он становится кругом (который рисуется на второй кадр Mov ie Clip).

Однако проблема заключается в том, что я хочу сделать несколько экземпляров квадрата Mov ie Clip кликабельным, используя для l oop вместо выписывания закодируйте кучу разных времен и только меняя номер. Хотя, что происходит, когда я пытаюсь сделать для l oop, я больше не могу щелкнуть по ним (квадрат не изменится на круг).

Вот код, пытающийся использовать a для l oop НЕ РАБОТАЕТ: 

class Game 
{
    constructor(exportRoot, stage)
    {
        this.root = exportRoot;
        this.stage = stage;
        this.init();
    }

    init()
    {
        const game = this;
        // need help with this loop
        for(var i=1; i<=4; i++)
        {
            this.root["place"+i].on('click', function () 
            {
                game.root["place"+i].gotoAndStop(1); 
            });
        }
    }
}

Результаты при нажатии Mov ie Клип (квадраты НЕ превращаются в круги)

Здесь код, который работает без a для l oop, но повторяется: 

class Game 
{
    constructor(exportRoot, stage)
    {
        this.root = exportRoot;
        this.stage = stage;
        this.init();
    }

    init()
    {
        const game = this;

        // each of the four Movie Clips have an instance name of "place1", "place2", etc

        this.root["place1"].on('click', function () 
        {
            game.root["place1"].gotoAndStop(1); 
        }); 

        this.root["place2"].on('click', function () 
        {
            game.root["place2"].gotoAndStop(1); 
        });

        this.root["place3"].on('click', function () 
        {
            game.root["place3"].gotoAndStop(1); 
        });

        this.root["place4"].on('click', function () 
        {
            game.root["place4"].gotoAndStop(1); 
        });
    }
}

Результаты при нажатии Mov ie Клип (квадраты превращаются в круги)

По сути, я пытаюсь заставить эти экземпляры Mov ie Clip быть кликабельными, используя для l oop.

Спасибо, что прочитали это!

1 Ответ

0 голосов
/ 09 апреля 2020

Одно решение для создания нескольких кликабельных фрагментов mov ie с использованием for для l oop:

Change game.root ["place" + i] .gotoAndStop (1); до this.gotoAndStop (1); внутри функции init () . 

class Game 
{
    constructor(exportRoot, stage)
    {
        this.root = exportRoot;
        this.stage = stage;
        this.init();
    }

    init()
    {
        const game = this; // game refers to Game Object  

        for(var i=1; i<=4; i++)
        {
            game.root["place"+i].on('click', function () // this.root or game.root will work
            {
                this.gotoAndStop(1);  // this keyword here DOES NOT refer to the Game Object
            });
        }           
    } 
}
...