昨天我們以 Matter.js 讓三個物件（球體）能透過不透的效果落地反彈，今天的目標則是加入滑鼠事件，並讓物件彼此之間有互動效果，這樣的特效時常應用在一些官方網頁 Landing 的首頁，目標就是吸睛！

這就是我們今天的練習目標，讓球體之間有碰撞效果，滑鼠點擊後會新增球體：

話不多說，我們來看看程式碼吧！

1. 起手式與參數設定

一樣先從設定基礎的畫面 Render、Engine、World 等參數開始

 // 新增初始設定（Engine、render、World）
    const engine = Engine.create();
    const render = Render.create({
      element: this.refs.scene,
      engine: engine,
      options: {
        width: 600,
        height: 600,
        wireframes: false
      }
    });

2. 繪製四周牆壁

    World.add(engine.world, [
      Bodies.rectangle(200, 0, 800, 50, { isStatic: true }),
      Bodies.rectangle(200, 600, 800, 50, { isStatic: true }), 
      Bodies.rectangle(-25, 300, 100, 600, { isStatic: true }),
      Bodies.rectangle(600, 300, 50, 600, { isStatic: true })
    ]);

3. 新增滑鼠事件

在這次的練習中我們加入 Mouse 以及 MouseContraint API，Constraint 代表了物件之間的限制條件，在這邊我們讓物件的 Stiffness 的係數介於 0.1 ~ 1，代表的物件之間的彈性係數，1 是最剛性的。

    // 新增滑鼠事件－當滑鼠點擊時，可以新增球體
    const mouse = Mouse.create(render.canvas),
    mouseConstraint = MouseConstraint.create(engine, {
      mouse: mouse,
      constraint: {
        stiffness: 0.2,
        render: {
          visible: false
        }
      }
    });
    
    World.add(engine.world, mouseConstraint);
    Events.on(mouseConstraint, "mousedown", (event) => {
      World.add(engine.world, Bodies.circle(150, 50, 30, { restitution: 1 }));
    });

    Engine.run(engine);
    Render.run(render);

以上就是 Matter.js 更進階一點點的應用，學起來讓網頁有更多可能性！