Day17. 老鼠，老虎傻傻分不清楚？- Mouse(下)

来到操控滑鼠和物体互动的环节啦！

其实这个环节走完就有很多很多的互动可以做了，不知道讲到简单点击或拖曳行为的游戏大家会想到哪些呢？如 Flappy Bird、Angry Bird 这些有名的游戏，本身游戏的呈现也跟物理行为有一定挂勾，加上操作简单，只是单纯点击或拖曳，其实走完今天的内容，你也能做到一样的效果！

是不是听起来很耸动呀，一点也不，在 Matter.js 的模组里，我们可以简单的达到这些效果！

今天的Demo
今天的Demo原始码

今天来玩的模组会是 MouseConstraint ，尽管我们还没提到 Constraint 模组，我们还是可以先来看看 MouseConstraint，後面有机会我们再回头看看 Constraint 模组。

MouseConstraint 的用处，一言以蔽之就是，允许使用者透过这个模组让滑鼠和物体产生互动/位移。

这个模组只有一个方法，就叫做 create，其他详细的设置，都在那个 options 里。

Matter.MouseConstraint.create(engine, options)

创建的时候如果不给予 options，里面有些预设值就会自己创建新的东西、依预设绑定到特定对象上，如我们上篇提到的 mouse，即使你不先 create mouse，这边直接 create，options不带任何东西，也仍会为你自动 create 带着 default 值的 mouse，并绑定到 body 上。

我们来看一下范例的 options 里面到底会含有哪些 properties。

var mouseConstraintOptions = {
    type: 'mouseConstraint',
    mouse: mouse,
    element: null,
    body: null,
    constraint: Constraint.create({
                label: 'Mouse Constraint',
                pointA: mouse.position,
                pointB: { x: 0, y: 0 },
                length: 0.01, 
                stiffness: 0.1,
                angularStiffness: 1,
                render: {
                    strokeStyle: '#FFFFFF',
                    lineWidth: 3
                }}),
    collisionFilter: {
        category: 0x0001,
        mask: 0xFFFFFFFF,
        group: 0
    }
}

mouse 就是我们上篇提到的 Mouse 模组产出的物件，详细的内容可以回去看上篇。

collisionFilter 会是决定我们滑鼠操控的时候能碰撞的对象，详细内容可以参考 rigidbody的第三篇。

constraint 我们後面有机会在细讲，简单的说它会像是一个约束，如这个官网的例子，constraint 就是那些线，约束着球与定点的距离，常用来创造线或弹簧。

滑鼠会像是一个随着滑鼠行为移动的 constraint，去和物体做碰撞。

这种类物体的物件，也像物体一样有一个步骤要做：

Composite.add(engine.world, [mouseConstraint]);

没错，要把它加入我们的 world 里面，它才会正式出现。

登登，在我们 runner 是静止的情况下，拉动滑鼠依然可以看到生成的 constraint，不过此时无法和物体产生互动，我们来按下 Run the runner 让 runner 跑起来。

从物体的上方靠近，拉动物体，哇，你已经可以把物体拉起来了！

你会发现，可以对物体做到施力、拖曳等等操作，这些详细的影响会是要去看 constraint 的一些属性，另外 collisionFilter 也可以让你选定允许滑鼠互动的对象，善用这些属性，就能做出各种互动效果。

无论是透过昨天 mouse 物件本身的资料，还是今天 mouseConstraint 来跟物体互动，我们现在已经有一些手段来让滑鼠融入我们的世界里了，明天，我们来好好想想怎麽透过这个功能让弹珠台有一些可玩性。