Snap SVG / jQuery Collision

Question

我尝试使用快照SVG创建粒子效果，我希望我的粒子从SVG的边缘反弹。

此处JSFiddle

        if (  pElement < 0 || pElement > eval(w)) {
            var vlcx = - vlcx;
            var vlcy = vlcy;
        };

        if (  pElement < 0 || pElement > eval(h)) {
            vlcx = vlcx;
            vlcy = - vlcy;
        }

我反向速度，但没有......

Answer 1

你的小提琴中的一些修正。首先，每次移动粒子时都需要更新速度，否则它不会反转

    pElement.attr({
        cx: eval(pElementX+=vlcx),
        cy: eval(pElementY+=vlcy),
        vx: vlcx,
        vy: vlcy,
    });

其次在上面的代码中，pElement应该是pElementX或pElementY。使用posX或posY，这样我们就不会与pElement混淆。

第三，使用console.log(i,'/', posX,'/', posY,'/', vlcx,'/', vlcy)调试位置。

潜在错误：使用posX < radiusP/2代替posX < 0，因此粒子在反转之前不会飞出SVG框。同样posX > (width - radiusP/2)

注意：对于Math.random() == 10和X速度，如果Y，则会有一个静止粒子。