风格的matter-js主体

Question

我想创建这个 Ping 效果。 您可以在 https://stake.com/casino/games/plinko

上查看更多相关信息

我正在重新构建这个 plinko 游戏，并想要创建“ping”的效果。我已经达到了可以在球和瓶的身体碰撞时触发事件的程度。我的问题是，因为 Matter-js 渲染器仅限于简单的游戏和调试。我怎样才能设计引脚来发出这种 ping 效果？

  // if (bodyB.label.includes("ball") && bodyA.label.includes("pin")) {
  //   console.log("Ball hit pin");
  //   // Style pin to create a wave effect when hit
  //   bodyA.render.fillStyle = "red";

  // }

Answer 1

“在身体碰撞时触发事件” 你可以看看我的测试 https://mlich.zam.slu.cz/js-matter/js-sorter/mechanical-sorter.htm

https://brm.io/matter-js/docs/classes/Body.html#property_collisionFilter 您可以按组或（掩码和类别）定义碰撞

• Body.collisionFilter.category

  - 我是什么（0x01、0x02、0x04、0x08、0x10、0x20 或 0b00000001、0b00000010、0b00000100 ...）

• Body.collisionFilter.mask

  - 与（cat1 或 cat2 或 cat3 = 0b001 或 0b010 或 0b100 = 掩码 0b111）碰撞

• Body.collisionFilter.group

  - 所有在组中不碰撞，如果你有 5 个球，任何球必须与任何球碰撞，你必须使用 5 个不同的组

• new_group = Body.nextGroup(true);

  您可以使用事件来定义碰撞回调 https://brm.io/matter-js/docs/classes/Events.html

var Events = Matter.Events,


Events.on(engine, 'collisionStart', function(event) {
        var pairs = event.pairs, // colide pair bodyA with bodyB
            i_end = pairs.length; // faster for cycle
        for (var i = 0; i < i_end; i++) {
var a = pair.bodyA
var b = pair.bodyB
// you must identify ball by compare with category
if (a.collisionFilter.category==myCat.ball)
            {...}
        } else { if (b.collisionFilter.category==myCat.ball)
            {...}
...
}
Events.on(engine, 'collisionActive', function(event) {...}
Events.on(engine, 'collisionEnd', function(event) {...}

“设置引脚样式”- 在渲染中查看 https://brm.io/matter-js/docs/classes/Body.html#property_render 如果您使用物质示例，则必须激活颜色模式。

    var render = Render.create({
        element: $('#screen_simulation'), //document.body,
        engine: engine,
        options: {
            width: screen.data.size.w,
            height: screen.data.size.h,
            background: 'transparent'
//          ,wireframes: false  // color mode or wireframe mode
//          ,showAngleIndicator: true
            ,showCollisions: true
           }
       });