小编Bob*_*aar的帖子

我正在使用 GameObjects 构建游戏。在我的游戏中，我将 GameObjects 与 CollidableObject 分开。所有对象（GameObjects 和 CollidableGameObjects）都被推送到一个名为 gameObjects 的数组中。

当涉及到碰撞检测时，我希望过滤 gameObjects 数组，这样我就可以只遍历 CollidableObject 类型的对象。我为此创建了以下代码：

let temp : any = this.gameObjects.filter(g => g instanceof CollidableObject);

//optional
let collidables : Array<CollidableObject> = temp;

for (let obj1 of collidables) {
    for (let obj2 of collidables){
        if (obj1 != obj2) {
            if(obj1.hasCollision(obj2)) {        
                obj1.onCollision(obj2);
                this.gameOver();
            } 
        }
    }
}

问题1：为什么不能直接过滤到CollidableObject的数组？

问题 2：有没有更简单的方法来过滤某种类型的数组？

这个关于交叉淡入淡出图像的问题已经给出了 Canvas 中交叉淡入淡出解决方案的答案。我正在尝试做同样的事情，唯一的区别是我正在尝试淡化运行时加载的图像。

图像加载正确，但没有可见褪色。这是因为加载图像而不起作用吗？谢谢。

超文本标记语言

 <div id="wrapper">
     <canvas id="bg1"></canvas>
     <canvas id="bg2"></canvas>
 </div>

JS

var toggle = true;

var canvas         = document.getElementById('bg1');
    canvas.width   = $(document).width();
    canvas.height  = $(document).height();
var ctx            = canvas.getContext('2d');

var canvas2        = document.getElementById('bg2');
    canvas2.width  = $(document).width();
    canvas2.height = $(document).height();

var ctx2           = canvas2.getContext('2d');

var image = new Image();
image.src = 'download1.jpg';

var image2 = new Image();
image2.src = 'download2.jpg';

image.onload = function() {
    ctx.drawImage(image, 0, 0, 200, 100);
    ctx2.drawImage(image2, 0, 0, 200, 100);
};

$('#wrapper').click(function () …