我想写一个简单的JavaScript动画，让一些球在画布中移动。我想用Backbone.js处理的自定义事件来检测碰撞，而不是用嵌套的 for 循环来检查每对球之间的碰撞。
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对象的成员方法
Ball.prototype.event_handler = function(shape, ID) {
console.log("ball " + this.ID + " caught message from ball " + ID);
};我会期望有时一个球会从另一个球那里捕捉到一个信息，但事实从来不是这样的。
我希望以这样一种方式安排事件处理程序：
this.ID == ID时转发事件- 如果
this.ID != ID，则停止事件传播
1条答案
按热度按时间jv2fixgn1#
Backbone.js 事件
this.ID可能是undefined，因为Backbone.on()needs the context as the last param，除非您已经手动将上下文绑定到其他位置的函数。您还可以在球本身上注册事件，并在球上触发事件。
事件在Backbone中不是全局的，您需要自己创建一个全局事件通道或使用插件。请查找 * 事件总线 * 或 * 事件聚合器 * 等。
举个简单的例子：
Backbone本身是一个扩展
Backbone.Events功能的对象，但是最好为您的用例创建一个本地事件通道。说到使用
Backbone.Events对象，您扩展了Ball的每个示例，而实际上应该扩展一次Ball原型。你应该去
在销毁一个球的时候，你可以调用
ball.stopListening()，这样你就可以避免内存泄漏，同时也可以在event_handler回调函数中解决context问题。因此，使用全局事件聚合器：
Backbone事件不是DOM事件，它们不会上下冒泡，所以没有
stopPropagation或preventDefault。在后台，它只是Backbone的普通JS。碰撞检测
既然我们已经讨论了事件部分，那么我只想说，这不是冲突检测的最佳解决方案。
这就像你在更新位置时每隔一个球就调用一个
isCollindingWith(ball)函数一样，这就是事件的情况，只是循环隐藏在事件实现中。在这个答案中讨论优化的碰撞检测算法可能太宽泛了，所以我将链接到这篇关于2D collision detection的优秀文章。
有趣的部分是在最后，他们讨论了 * 空间数据结构 *，如 * 四叉树、R-树或空间散列表 *。