javascript - HTML5Canvas, remembering the last instance made visible

Question

I would like to do a simple task in Adobe Animate under HTML5Canvas environment. There are a couple of buttons on stage and corresponding circle symbol instances beside them that are made invisible at the beginning. When I click a button, an adjacent circle is visible. Then if I click on another button randomly, its adjacent circle is visible, but the previously visible circle must become invisible again as only one circle should be visible at any given time.

As a simple solution, I started with 4 instances: button_1, button_2, circle_1, circle_2. I planned to store the circle instance's name in a variable called 'store' when I first click on any button. Then pass that information to the next button's mouse click event to make the previous circle instance invisible again. My rookie code looks like this...

/*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? */

However, the code didn't work. I have no programming experience so my logic could be laughable but this is the easiest solution I can think of. Maybe I should have declared my variable globally? Can anyone kindly improve this code or make it work, please? Please no For-i or Array solution because it makes my head spin :) Thanks in advance.

标签： javascriptactionscript-3html5-canvasadobe-animate

Answer 1

欢迎使用 JavaScript！我可以告诉您您要做什么，但是您犯的一些错误对于刚开始犯的人来说很容易。

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 个圆圈，有一个更简单的方法，我将在下面发布。

2. 您似乎也忘记了事件声明中的on关键字。this.button_1

3. 您正在重新声明_this第一次不需要，更不用说两次了。该代码var _this = this;将 的引用存储this在一个名为基本上只是重命名它的新变量中_this，并且不做任何其他事情。

我对 Adob​​e Animate 的 JavaScript 风格了解不多，但我会尝试以我认为应该适用于 Animate 的方式修改您的原始 JavaScript。

如果您只有 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并让我知道是否有任何错误。

如果您想要任意数量的圆圈，那么您所说的“数组解决方案”将是最好的。数组和循环非常基础，一旦开始就很容易理解（尽管语法看起来很吓人）。如果您打算继续学习编程，那可能应该是您学习的下一件事。