먼지 입자와 유사한 움직임을 시뮬레이션하십시오

Question

나는 setInterval css로 루프를 시도하고 움직입니다. 두 움직임 모두 oldpos1 -> newpos1에서 작은 움직임으로 이루어져 있습니다. 그러나 무작위로 커브를 이동하지 않고 jQuery 애니메이션을 사용하여 발생하지만 무작위로 생성 된 1-3 픽셀 사이에서만 발생합니다. 이는 내가 원하지 않는 것입니다. . 문제가 setInterval의 시계에 있습니까? 여기서 선형 시간 단위 만 흐릅니다.

jQuery에서 아래 이미지를 만들려면 어디에서 시작해야합니까?

내가하고 싶으면 무엇 :

1. 닷지 행동 :

   A, B - 입자

   AB1 - 일반적인 회피 지역, 특정 금액

2 운동 :

아베 BV에서 - 랜덤 원 운동

AACC, BACC - 작은 임의의 가속도 발생하는 위치 (화상의 표시보다 condenced 파선 등)

Answer 1

나는 당신의 케이스가 다소 특별하기 때문에 jQuery의 animate에 의존하지 않을 것입니다 ... 대신 "게임 루프 패턴"을 사용하십시오 : 움직이는 (그리고 충돌 한) 입자들의 컬렉션을 유지하는 게임 개체를 가지며 다음 정규 interv에서 그려집니다. 알. 당신이 원하는대로

function Particle(x, y) { 
    this.x = x; 
    this.y = y; 
    this.speed = 0; // in pixels per second 
    this.direction = 0; // in radians per second 
} 

Particle.prototype.move = function(d_time) { 
    this.x += Math.cos(this.direction) * this.speed; 
    this.y += Math.sin(this.direction) * this.speed; 
} 

Particle.prototype.draw = function() { 
    // either set the position of a DOM object belonging to this particle 
    // or draw to a canvas 
} 

function Game() { 
    this.particles = Array(); 

    this.MS_PER_FRAME = 20; // in milliseconds 
    this.D_TIME = 1000.0/this.MS_PER_FRAME; 
} 

Game.prototype.tick = function() { 
    $.each(this.particles, function(_, particle) { 
     particle.move(this.D_TIME); 
     particle.draw(); 
    }) 
} 

Game.prototype.go = function() { 
    setInterval(this.tick, this.MS_PER_FRAME) 
}) 

이 그럼 당신은 어쩌면 추가 회원에게 d_speed (가속) 및 d_direction 정도를 도입하여, 속도와 입자의 방향을 조작 할 수 있습니다 :

여기 기본 구조입니다.