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 скорости, вы будете иметь неподвижную частицу.