移除后,容器的Easeljs子项仍显示在画布上

时间:2014-03-02 17:03:47

标签: javascript easeljs createjs

我尝试创建一个小的俄罗斯方块游戏来进入javascript。我在画架上遇到了一些问题,但我能够为大多数人找到解决方案。但有一个问题我无法弄清楚。我是这样做的:

tetrisI = function(x, y, size) {
    this.childs = new Array();

    var rect1 = new createjs.Shape();
    var rect2 = new createjs.Shape();
    var rect3 = new createjs.Shape();
    var rect4 = new createjs.Shape();
    rect1.graphics.beginFill('#FF0000').drawRect(0, 0, size, size);
    rect2.graphics.beginFill('#00FF00').drawRect(0, size, size, size);
    rect3.graphics.beginFill('#0000FF').drawRect(0, size * 2, size, size);
    rect4.graphics.beginFill('#FF0000').drawRect(0, size * 3, size, size);

    this.addChild(rect1);
    this.addChild(rect2);
    this.addChild(rect3);
    this.addChild(rect4);

    this.childs.push(rect1);
    this.childs.push(rect2);
    this.childs.push(rect3);
    this.childs.push(rect4);

}
tetrisI.prototype = new createjs.Container();
tetrisI.Container_initialize = tetrisI.initialize;

var stage = new createjs.Stage("mycanvas");
var tetrisBlock = new tetrisI(120, 0, gameState.blockSize);
stage.addChild(tetrisBlock);

正如您所看到的,tetrisBlocks是容器中有多种形状。在某些时候,当我检测到一个完整的行时,我会做这样的事情:

this.removeChild(this.childs [指数]);

这是一个tetrisBlock,this.childs [index]是tetrisBlock内部的形状之一。问题是:在我这样做之后,形状被成功删除,但是即使在stage.update()命令之后它仍然显示在画布上。

如果我从舞台上移除整个tetrisBlock它可以工作,但那不是我想要的。我想删除一个tetrisBlock的几个孩子。

1 个答案:

答案 0 :(得分:0)

将tetrisI函数更改为此后可以工作:

(function() {

var tetrisI = function(x, y, size) {
  this.initialize(x, y, size);
}
var p = tetrisI.prototype = new createjs.Container();

tetrisI.prototype.Container_initialize = p.initialize;
tetrisI.prototype.initialize = function(x, y, size) {
this.Container_initialize();
// add custom setup logic here.
this.childs = new Array();

var rect1 = new createjs.Shape();
var rect2 = new createjs.Shape();
var rect3 = new createjs.Shape();
var rect4 = new createjs.Shape();
rect1.graphics.beginFill('#FF0000').drawRect(0, 0, size, size);
rect2.graphics.beginFill('#00FF00').drawRect(0, size, size, size);
rect3.graphics.beginFill('#0000FF').drawRect(0, size * 2, size, size);
rect4.graphics.beginFill('#FF0000').drawRect(0, size * 3, size, size);

this.addChild(rect1);
this.addChild(rect2);
this.addChild(rect3);
this.addChild(rect4);

this.childs.push(rect1);
this.childs.push(rect2);
this.childs.push(rect3);
this.childs.push(rect4);

this.regX = size / 2;
this.regY = size * 2;
this.size = size;
this.height = size * 4;
this.width = size;
this.x = x + this.regX;
this.y = y + this.regY;
tetrisI.prototype.pos = new Array(0, 0, 0, 1, 0, 2, 0, 3);

}

window.tetrisI = tetrisI;
}());