1

캔버스 내부에서 일부 볼을 이동시키는 간단한 JavaScript 애니메이션을 작성하고 싶습니다. Backbone.js로 처리되는 커스텀 이벤트와 충돌을 감지하기 위해서 각 공 쌍 사이의 충돌을 검사하는 루프의 중첩 된 을 가지고 싶습니다.Backbone.js의 맞춤 이벤트 전달

var j; 
for (j = 0; j < N_BALLS; j++) { 
    ball_center = new Point(..., ...); 
    ball_shape = new Circle(ball_center, ball_radius); 
    ball_velocity = ...; 
    ball_ID = j; 
    balls[j] = new Ball(ball_shape, ball_velocity, ball_ID); 
    _.extend(balls[j], Backbone.Events); 
    balls[j].on("imhere", balls[j].event_handler); 
} 

function animate() { 
    if (!paused) { 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     var j; 
     for (j = 0; j < N_BALLS; j++){ 
      balls[j].updatePosition(); 
      balls[j].trigger("imhere", balls[j].shape, balls[j].ID); 
     } 
     for (j = 0; j < N_BALLS; j++) 
      balls[j].draw(context, '#0000ff'); 
     window.requestNextAnimationFrame(animate); 
    } 
} 

event_handler는 각각의 볼 개체

Ball.prototype.event_handler = function(shape, ID) { 
    console.log("ball " + this.ID + " caught message from ball " + ID); 
}; 

가끔 볼 다른 하나에서 하나의 메시지를 잡는다 것을 기대의 멤버 방법이지만이 경우는 결코 없다.

나는 그런 방식으로 일을 준비하고자하는 경우 이벤트 핸들러 할 수 있습니다

앞으로
  • 행사 때 this.ID == ID
  • 정지 이벤트 전파

답변

1

this.ID != ID 경우 백본 이벤트

this.ID은 이미 정의되지 않았기 때문에 Backbone .on() needs the context as the last param이므로 정의되지 않았습니다. 다른 곳에서 수동으로 함수에 대한 온톨로지.


또한 볼에 이벤트를 등록하고 볼을 트리거합니다.

이벤트는 백본에서 전역이 아니므로 직접 전역 이벤트 채널을 만들거나 플러그인을 사용해야합니다. 등 이벤트 버스, 또는 이벤트 애그리 게이터 (aggregator),를 찾아

빠른 예처럼 간단 할 수있다 : 자체가 Backbone.Events 기능을 확장하는 객체가

var GlobalEvents = _.extend({}, Backbone.Events); 

백본하지만 최선의 사용 사례에 맞는 로컬 이벤트 채널을 만듭니다.


당신이 정말로 한 번 Ball 프로토 타입을 확장해야 할 때 당신이 Ball의 각 인스턴스를 확장하고는 Backbone.Events 객체를 사용하는 말하기.

_.extend(Ball.prototype, Backbone.Events); 

당신은 favor listenTo over on을해야한다.

공을 파괴 할 때 ball.stopListening()으로 전화하면 메모리 누출을 피할 수 있습니다. event_handler 콜백 내의 context 문제도 해결됩니다.

그래서, 글로벌 이벤트 애그리 게이터 (aggregator)로 :

balls[j].listenTo(GlobalEvents, "imhere", balls[j].event_handler); 

백본 이벤트는 DOM 이벤트 아니며, 그들은 아래로 버블 링과하지 않는, 그래서 stopPropagation 또는 preventDefault 전혀 없다. 백그라운드에서 백본 용 바닐라 JS입니다.


우리는 이벤트 부분을 다루었 이제

충돌 감지, 내가 그냥 충돌 감지를위한 최선의 해결책이 아니라고 가정 해 봅시다.

위치를 업데이트 할 때 다른 공마다 isCollindingWith(ball) 함수를 호출하는 것과 완전히 같습니다. 이벤트가 진행되는 동안 이벤트 구현에는 루프가 숨겨져 있습니다.

이 답변에서 최적화 된 충돌 감지 알고리즘을 다루는 것은 너무 광범위 할 것이므로 2D collision detection에이 위대한 기사로 연결됩니다.

재미있는 부분은 공간 데이터 구조과 같은 쿼드 트리, R-Trees 또는 Spacial Hashmaps와 관련하여 끝 부분입니다.