用鼠标“单击”添加和删除位图图像 - JavaScript / CreateJS

Question

当我单击某些容器（总共 10 个容器）时，我正在向它们添加硬币（位图）。现在我想一个接一个地取出硬币。例如，如果我在舞台上的形状上单击 3 次，而不是创建 3 个硬币并将它们放入容器中。现在，如果我在移除按钮上单击一次（也在舞台上），它应该会移除添加到容器中的最后一个硬币，依此类推。

这是我尝试的方法： -->“evt.target”是一个容器

this.coin= new createjs.Bitmap(images.jeton_image);
this.coin.value = this.coin_index;
this.coin_array.push(this.coin);
this.coin_index++;
this.coin.regX = 50;
this.coin.regY = 50;
evt.target.addChild(this.jetons);
this.target_arr.push(evt.target);

下面是我取出硬币的方法：

this.target_arr[this.target_arr.length].removeChild(this.coin);

我的问题是我无法从 10 个容器中取出硬币。 我做错了什么？

Answer 1

我在这里看到的是问题出在您尝试操作的数组索引的位置：

第一阶段

如果您使用 push 将此数据添加到您的数组中，数据将添加到索引的末尾

假设：

var a=[]; //a.length would be 0 and you can't position any index inside

现在当你向它推送一些数据时：

 a.push(1);//a.length=1
    [ 1 ]
      ^
index:0    
    a.push(2);//a.length=2
    [ 1 , 2 ]
      ^   ^
index:0   1 
    a.push(3);//a.length=3
    [ 1, 2, 3 ]
      ^  ^  ^
index:0  1  2 //when trying to make that a[a.length]  
              //would give error as the maximum position 
              //reside in the index 2 not 3

所以这个：

this.target_arr[this.target_arr.length].removeChild(this.coin);

应该是这样的：

this.target_arr[this.target_arr.length-1].removeChild(this.coin);

第二阶段

你缺少的是：

this.coin_array.pop(this.coin);
this.target_arr.pop(evt.target);

在移除子节点时移除最新元素以收缩数组 因为在内存中你的 Array 仍然由 10 个元素组成，所以你应该通过在删除图像的同时弹出最新元素来缩小它