Day18. 一起动手做弹珠台！(4)

今天要来运用昨天我们前两天学到的滑鼠互动方式来为我们的弹珠台加上互动操作。

在弹珠台里，球碰到钉子就会弹开，有时候就因为多了那一个普通钉子，跟颜色钉失之交臂，我们今天预计做的操作是，点击任一个钉子後，把钉子消掉。

所以比起昨天的 mouseConstraint 类似 constraint 的行为，我们更着重的会是前天的 mouse 物件的属性监测。

今天的Demo
今天的Demo原始码

首先我们要先创立我们的 mouse 物件，另外 mouse 物件是不需要加入 engine.world 就可以作用了。我们清楚定义 mouse 依附的对象会是 render 出来的 canvas。

mouse = Mouse.create(render.canvas);

接着我们在本来的 frame 检测里面加上一个函式

function frameUpdated()
{
    var cameraSpeedByFrame = 1.5 * isZoomIn? 0.3 : 1;
    Bounds.translate(render.bounds, {x:0,y:1.5});
    checkClosedToAnyColorBlock(blockList, mainBall);
    mouseEventCheck();
}

今天的主要功能都会在 mouseHandle 里面完成。

var mouseKeepPressed = false;
function mouseEventCheck()
{
    var isMousePressed = mouse.button == 0;
    if(isMousePressed && !mouseKeepPressed)
    {
        mouseKeepPressed = true;
        var collissionedList =getClickedBoxesList();
        for(var i in collissionedList) { removeBlocks(collissionedList[i]); }
    }
    else if(!isMousePressed)
    {
        mouseKeepPressed = false;
    }
}

每个 frame 都会呼叫 mouseEventCheck，函式内第一件我们要判断的行为：滑鼠是否被按下。

是否被按下我们透过 mouse.button 来判断，0表示按下，-1表示没按下(如果不熟这部分，请参考Day16的内容)，没有其他的值。

同时如果持续按压，我们不会读做另一次点击，这个透过 mouseKeepPressed 来达成，初始为 false，一旦按下就会被更新为 true，直到放开为止都会是 true，放开则更新为 false。

所以我们判断点击的逻辑会是：滑鼠目前是被按下的状态且上一次检测时非被按下状态，换句话说就是独立一次的点击最开始那次会被抓到，且同一次点击不会重复跑进上半部点击逻辑里。

抓到点击事件後，我们透过 getClickedBoxesList 来拿到碰撞清单：

function getClickedBoxesList()
{
    return Query.point(blockList, {x: mouse.mousedownPosition.x, y: mouse.mousedownPosition.y + render.bounds.min.y});
}

这边我们用了一个先前在碰撞单元提到的模组(虽然没有详提)，Query.point的作用是给一组 body list，以及一个单点，会判断 body list 中有哪些 body 是有涵盖到该点的，并回传一个阵列。

所以透过这个方法，我们就能拿到点到的钉子。

拿到点到的钉子後，我们会跑 removeBlocks 来移除该钉子，这是先前写过的方法，因为这边也要呼叫，所以抽出成一个函式，写在 triggeredHandle.js 里面。

function removeBlocks(targetBody)
{
    Composite.remove(engine.world, targetBody);
    blockList = blockList.filter(x=>x.id != targetBody.id);
}

到这里，透过滑鼠物件与画面互动的内容就完成了！

尝试跑跑看，点下你的滑鼠，就会看到钉子消失了！

让碍事的钉子通通消失吧！

我们历时了 18 天，把弹珠台中需要做的物理判断都做完了！恭喜一起走到这里的你！
剩下的 12 天，我们会继续介绍其他模组，最後我们会有一个额外实作，也会是一个小游戏 ，请大家敬请期待。