HTML5Canvas, запоминающий последний видимый экземпляр

Я хочу выполнить простую задачу в Adobe Animate в среде HTML5Canvas. На сцене есть пара кнопок и соответствующие экземпляры символа круга рядом с ними, которые в начале сделаны невидимыми. Когда я нажимаю кнопку, отображается соседний круг. Затем, если я случайно нажму на другую кнопку, соседний круг будет виден, но ранее видимый круг должен снова стать невидимым, поскольку в любой момент времени должен быть виден только один круг.

В качестве простого решения я начал с 4 экземпляров: button_1, button_2, circle_1, circle_2. Я планировал сохранить имя экземпляра круга в переменной с именем store при первом нажатии любой кнопки. Затем передайте эту информацию в событие щелчка мыши следующей кнопки, чтобы снова сделать предыдущий экземпляр круга невидимым. Мой код новичка выглядит так...

/*Made circles invisible at the beginning*/
this.circle_1.visible = false;
this.circle_2.visible = false;

/*button's click events*/

var _this = this;
_this.button_1('click', function(){
_this.cicle_1.visible = true;
store.visible = false; /*make the previous circle invisible if any*/
var store = this.circle_1; /*updating current circle's name in variable 'store'*/
});

var _this = this;
_this.button_2.on('click', function(){
_this.circle_2.visible = true;
store.visible = false; /*make the previous circle invisible if any*/
var store = this.circle_2; /*updating current circle's name in variable 'store'*/
});

/* It also works if I can make all circles instances invisible and then show the intended one during every click event, but how can I get and set 20+ circle instances invisible in one step? */

Однако код не сработал. У меня нет опыта программирования, поэтому моя логика может показаться смешной, но это самое простое решение, которое я могу придумать. Может быть, мне следовало объявить свою переменную глобально? Может ли кто-нибудь улучшить этот код или заставить его работать, пожалуйста? Пожалуйста, не используйте решения For-i или Array, потому что у меня кружится голова :) Заранее спасибо.


javascript html5-canvas actionscript-3 adobe-animate
person syd252    schedule 05.12.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Добро пожаловать в Джавскрипт! Я могу сказать, что вы пытаетесь сделать, но вы допустили несколько ошибок, которые легко сделать тем, кто только начинает.

  1. Вы обращаетесь к переменной store до фактического объявления переменной с помощью var store = this.circle_1. Использование ключевого слова var объявит переменную в верхней части ее области, независимо от того, в какой строке этой области она объявлена, а let объявит ее в указанной вами строке. В любом случае существование любой переменной не будет существовать за пределами ее области действия. Область действия состоит из набора фигурных скобок {}, что означает, что вы объявляете store, но затем она немедленно удаляется, когда вы оставляете фигурные скобки. Что-то вроде следующего исправит это:
/*
    A variable declared in one scope is available to all scopes inside it.
    By declaring 'store' outside of any scope/curly braces, it will be accessible from anywhere in the code
*/
var store = this.circle_1; // you store either circle here. I'm just using circle_1 as a placeholder

//rest of code

this.button_1('click', function(){
    store.visible = false;
    store = this.circle_1;
    this.circle_1.visible = true; //make circle 1 visible
});

Я чувствую, что вы немного переусердствуете (это нормально, такое случается), и если у вас всего 2 круга, есть гораздо более простой способ сделать это, который я опубликую ниже.

  1. Также кажется, что вы забыли ключевое слово on в объявлении события this.button_1.

  2. Вы повторно объявляете _this, что не должно быть необходимо в первый раз, а тем более дважды. Код var _this = this; сохраняет ссылку на this в новой переменной с именем _this, просто переименовывая ее, и больше ничего не делает.

Я мало что знаю о стиле JavaScript в Adobe Animate, но я попытаюсь изменить исходный код JavaScript таким образом, который, как я полагаю, должен работать с Animate.

следующий код является самым простым способом, если у вас есть только 2 круга

//Made circles invisible at the beginning
this.circle_1.visible = false;
this.circle_2.visible = false;

//button's click events
this.button_1.on('click', function(){
    this.circle_1.visible = true; //make circle 1 visible
    this.circle_2.visible = false; //make the other circle invisible
});

this.button_2.on('click', function(){
    this.circle_2.visible = true;
    this.circle_1.visible = false;
});

Дайте мне знать, если это работает, или, если вы запустите его в браузере, нажмите F12 › Нажмите Console и дайте мне знать, если есть какие-либо ошибки.

Если бы вы хотели произвольное количество кругов, решение массива, как вы выразились, было бы лучшим. Массивы и циклы довольно фундаментальны, и их легко понять, как только вы начнете (хотя синтаксис выглядит пугающе). Если вы планируете продолжить изучение программирования, это, вероятно, должно быть следующим, чему вы научитесь.

person zachThePerson    schedule 06.12.2020
comment
Большое спасибо, Зак, за подробное объяснение! На самом деле, _this был размещен мастером кода Adobe Animate, а не мной. По-видимому, прямое использование «этого» создает ошибку неопределенной кнопки. Я думаю, это связано с использованием режима HTML5Canvas, а не Actionscript 3.0. Однако хорошая новость в том, что ваше первое решение сработало! Но после небольшой доработки. Мне пришлось вернуть var _this = this; и мне пришлось использовать его до того, как var store = _this.circle1; и поставьте _ перед «этим». Кроме того, правильный порядок устранил конфликт между двумя значениями Var, разделяющими «это», я думаю. Еще раз спасибо, вы спасли мой день! - person syd252; 07.12.2020
comment
Без проблем. Здесь я нашел некоторую информацию о том, почему нам нужно повторно объявить this в Animate: community.adobe.com/t5/animate/ . Вам все равно нужно объявить его только один раз вверху, так как когда мы используем var, все объявления все равно перемещаются вверх (если только Animate не делает что-то ДЕЙСТВИТЕЛЬНО странное с кодом). - person zachThePerson; 07.12.2020

arrow_upward
0
arrow_downward

Вероятно, у вас есть проблема с переменной видимостью. Объявление переменной внутри функции не должно позволять другим фрагментам кода достигать значения этой переменной. Вместо этого вы должны объявить эту переменную снаружи и сохранить там значение null, а затем вызвать как if (store) store.visible=false;. Итак, просто переместите var store за пределы обеих функций и обратитесь к store внутри обеих из них.

person Vesper    schedule 07.12.2020